HTML and CSS Reference
In-Depth Information
Disabling the Style Sheets
If you disable the style sheets on this example (using a tool such as the Web Developer Toolbar
for Firefox—see
http://chrispederick.com/work/webdeveloper/
), your images will appear one
after the other and will work on a very small screen size, as shown in Figure 8-6.
Figure 8-6.
With the CSS layout disabled, even small screens can display our header successfully.
Adding Site Search and Sitewide Header Links
Let's consider some other common features you'd expect to see on a web page: a site search
and links that appear in the page header. Figure 8-7 shows the image mock-up that our fic-
tional graphic design team has provided for our fictional web site (which you're going to learn
how to do for real!).
Figure 8-7.
Sitewide links and site search added
To approach this task, we could use absolute positioning or we could “float” the features.
Either scheme could work here. In fact, we're going to suggest using both techniques:
•
Floating the links section to the right
: By doing this we can set a background image that
is bigger than the default area (allowing for font scaling upward), but because of the
nature of floats, the containing
div
will close down and use only the amount of room it
needs. Oh, and it will also position it on the right as we would like—perfect!
•
Absolutely positioning the search area
: If we floated this item, it would float next to the
links section. Not what we want. By positioning it to the top and right, but setting the
top measurement far enough down so that it appears underneath the links, we should
be just fine.
