So you've set up the styles for the links of your page but you have one section that you want to be different from everything else. To do that, you need to assign a different class or ID.
How do I get different styled links?
By John Faulds /
Blog Articles
How do I centre my layout?
By John Faulds /
To centre a CSS layout horizontally, you need to add margin: 0 auto; to either the body or a containing element (it's generally a good idea to wrap your whole layout in a containing element and give it a meaningful ID like #wrapper or #container) and give that element a width. What that does is set the left and right margins to automatically take up the window space not occupied by the specified width.
For IE5 browsers we also have to add text-align: center; to the same element. This also centres anything in descendant elements so if you don't want your text centred, you then have to reset the text-align back to left on a descendant element. So you might set the auto margins and text-align: center; on the body but then set the text-align back again on #container.
I’m getting CSS validator warnings
By John Faulds /
When you validate your CSS file, do you get a load of warnings about background-color not being accompanied by a color and vice versa?
My floated layout won’t work!
By John Faulds /
Usually when people have trouble with floating columns it's because they've specified a width where there doesn't always need to be one.
How do I include code on every page?
By John Faulds /
Variations on this question can include:
- Can CSS insert content onto a page?
- How do I update the content of multiple pages from a single file?
- How can I get CSS to behave like frames?
Why won’t faux columns work?
By John Faulds /
One of the easiest methods of giving your site the appearance of the columns being the same height is to used the Faux Columns technique as first outlined by Dan Cederholm on A List Apart.
Why does my layout look wrong in IE?
By John Faulds /
If your site looks right in a browser like Firefox, Opera or Mozilla, but not in Internet Explorer, it's highly likely you're being affected by one of IE's numerous bugs.
Fortunately, most of these have been well-documented at Position is Everything.
Single image replacement rollovers with Suckerfish dropdowns
By John Faulds /
I discovered two of my most often used CSS techniques at the same place - Petr Staníček's Wellstyled.com (Staropramen, Budvar, Pilsner Urquell, great CSS techniques - gotta love the Czechs 😉 ). And those techniques are an image replacement (IR) technique that I later found out was actually called the Gilder Levin method and the use of a single image for creating CSS rollovers without the need for preloading images.
Absolute positioning pitfalls
By John Faulds /
This article first appeared on CSS Creator Forum and was written in response to the common requests for help from people new to CSS who were encountering problems whilst trying to use absolute positioning to create layouts (seemingly as a result of using Dreamweaver in 'design view' mode).