It is possible for you to place an HTML element at a particular spot on your web page, independent of what is already there. In this article there’s an in-depth treatment of that topic.
You need basic knowledge in CSS and HTML (XHTML) in order to understand this article…
Direct link: Understanding CSS Absolute Positioning and Layering
Recently I was working on a site where I had to style an ordered list and thought this may help some of you in future projects. The snag that some people tend to run into is that they are not sure how to separate the styles of the numbers and the actual content of the list.
It may feel easier to number each list item manually but then we end up defeating the purpose. In this tutorial I will show how to give an ordinary ordered list a face lift…
Direct link: Styling Ordered Lists with CSS Tutorial
Yep, using free software and HTML, CSS, and jQuery, here’s a cross-platform desktop application using Adobe AIR. Well, the beginnings of one at least. The challenge was to build a useful application (rather than another to-do list, thankfully) to make use of the new flippa.com web site – it’s a marketplace for buying and selling web sites. So here’s the idea. Imagine you’re interested in buying a web site about photography with a forum attached. You open this application, fill in the custom search form, and see a list of matching auctions. The app will let you pick the auctions you want to watch and it’ll notify you every time there’s a new bid…
Direct link: Take Your CSS to the Desktop with Adobe AIR
Anyone who has used CSS for a while will know about the merits of absolute and relative positioning. To recap:
position: relative allows an element to be shifted from its original position either horizontally (using left or right) or vertically (using top or bottom).
position: absolute allows an element to be positioned with respect to a containing block using left, right, top or bottom (the containing block is the nearest ancestor node with a position of relative, absolute or fixed)…
Direct link: The Two Ways of Sizing Absolute Elements in CSS
Before CSS, images were always put into Web pages with image tags. We gave them alternate alt text so they still made sense when images were turned off – it was the only way. Today, we have Cascading Style Sheets. Using CSS to add images to Web pages has been called a "vital cornerstone of all future Web design". It gives us new power to control the presentation not just of basic styles like borders, but all the images across a whole site. Fahrner Image Replacement FIR was the first widespread method of doing this, and remains the most well known. But it isn't perfect. Today I'll show you two methods that overcome its problems.
Direct link: Accessible Header Images With CSS And XHTML
There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward.
Here are five techniques snatched from the future that you can put into practice in your website designs today…
Direct link: Push Your Web Design Into The Future With CSS3
This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float…
Direct link: Learn CSS Positioning in Ten Steps: position static relative absolute float
The best way to explain CSS specificity is to start with some examples. CSS specificity can get confusing. Here’s a closer look at how to calculate the actual specificity value to determine which selector takes precedence…
Direct link: Specifics on CSS Specificity