Web design: design and layout
More CSS
CSS2 gives you almost complete control over the way a web browser draws a page on screen. Sadly older browsers do sometimes get things wrong. As a web designer you'll find yourself always in the know about new fun things you can do to make your life easier, and it always seems that you can't use them because one of your clients is still using an old, broken web browser (naming no names, Netscape 4). It's possible to work around many visual bugs, but the most reasonable answer is to come up with a flexible layout that functions right in as many browsers as possible. The Bob's Bits template is just that.
Don't worry about making your page look exactly the same in 25 browsers, as long as it looks mostly similar. Make sure everyone can read your content, that's the important part. Those who use old browsers usually know they're using old browsers (you aren't the only web page author in the world who's found out how to code properly, after all) and these people are generally resigned to not getting the best experience possible. Give them incentives to upgrade, but don't block them off from using your site. It's the best compromise you can give.
Background images
Images brighten up pages and can make your site much more visually appealing. CSS allows you to set both a background colour and a background image to virtually any item from the over-all page background to links or sections of text. You can make background images repeat across the screen, down it, or both (or neither), and you can attach them to any point on the screen. The properties for this are background-image, background-color, background-repeat, background-position, and background-attachment:
body {
background-color: #EAEAE0;
background-image: url(images/page-bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
The example above makes the page background a creamy pale yellow, and adds an image in the top left of the screen that does not repeat. It stays fixed to the top left of the screen even when you scroll down the document. The default value for background-attachment is "static" which makes it scroll like everything else. To make images repeat horizontally or vertically, use "repeat-x" or "repeat-y" as the value for background-repeat. The default value is to repeat in both directions. Background-position also allows absolute values in percent (vertical, then horizontal) and pixels, as well as "bottom" and "right". You can see complete listings in the CSS Reference.
pseudo-elements
As you saw before with the the link tag, CSS has a system of "pseudo-elements" that you can apply rules to. These elements are either states or automatically created by the browser. Internet Explorer 6 only supports the :hover pseudo-element, but other, newer browsers like Opera 7 and Netscape 6 support a whole host of pseudo-elements you can use to add a little more eye-candy or usability to your site.
For example, the :hover pseudo-element can actually be applied
to nearly every tag, but very few browsers support its use anywhere other
than on the anchor tag, a. Don't be afraid to hide little treats
for users with newer browsers, but make sure your site functions just fine
without those extras. For example, you could specify a style that highlights
the paragraph the mouse is currently pointing to for those people with reading
disabilities. Research suggests that up to 80% of dyslexics with reading
problems can read text
better through a coloured filter, with the most successful colours being pink
and blue. The following rule makes the paragraph under the mouse dark blue
on a pale blue background. This sort of feature currently only works on a
few browsers, but benefits the few that can make use of it in a way that
doesn't badly affect those who can't. As new browser versions come out, more
and more people will be able to see those previously "hidden" features:
p:hover { color: RGB(0,0,50); background-color:
RGB(80, 128, 230); }
Other pseudo-elements include:
| Pseudo-element | Meaning |
|---|---|
| :before | Refers to the point just before the element |
| :after | Refers to the point just after the element. :before and
:after are both useful for
generating new content with the "content" property, i.e., if
you want to put brackets around a piece of text, or certain kinds of quote-marks
around text marked up with the <q> tag. |
| :hover | Special rules for when the mouse pointer or cursor is over the element. |
| :focus | Special rules for when the item is selected (has been clicked on). You can use this for changing the colour of a form field while it's being typed in. |
| :first-line | Applies to the first line of a displayed block. |
| :first-letter | Applies to the first letter of the block. Can be used for making drop-caps. |
Bending the rules (display as block, display as inline)
The display property allows you to render block tags as if they were inline tags, and vice versa. We used it earlier to hide the "skiplink" section with display: none. Display allows the following four values: block, inline, hidden, and none. The first two should be obvious, and "none" simply pretends the marked section does not exist, but hidden allows for the item to exist on screen and simply doesn't draw them.
An example of inline tags made to render like block tags are the examples
on this page. Each has a white background and blue dotted border that exists
because the <samp> tag has been made to draw like a block.
This is borderline naughty really - a descendent CSS rule or a class could
have achieved the same, but this way is more simple and the <samp>
tag is still performing its function.
A better example is one of a block tag made to appear on screen as an inline tag. The small blue navigation bar at the bottom of this page, and the menu bar on the Bob's Bits example site are both unordered lists in HTML. That's what the unordered list is: a collection of similar items. However bullet points are rather limited, so CSS can make a list render in a line of text and hide the markers. Lists usually have either left-padding or a left-margin (depending on the browser) which we have to remove, and in the Bob's Bits example we add a border to each list item to separate it visually from its fellows:
/* Put a separator on the left of each list item,
* then set the vertical padding to 0 and the
* horizontal padding to 0.5em */
#menu li
/* Render list items and unordered lists inline */
#menu li, #menu ul
/* Each item has a left border, put a right border
* on the list itself to complete the set, and
* remove padding and margins. */
#menu ul