HTML and CSS Reference
In-Depth Information
Styling a Page Header
When we refer to a
page header
, we're talking about that part of the web page that usually
contains things like a company logo, a marketing tagline, a site search, and sometimes other
features (links to a site map, “Contact Us,” and so on). Page headers are not to be confused
with elements inside the
<head>
tag, nor do we mean headers in the sense of a server's HTTP
headers (see “Quick Reference to HTTP Headers,” at
www.cs.tut.fi/~jkorpela/http.html
).
There are as many different ways of approaching header styles as there are colors in the
spectrum—basically, each company or individual has its own brand or style and so we cannot
look at every possible permutation. We will discuss some techniques you can consider best
practices, though.
Using a Small Logo
It may be tempting to put a big logo on your page, but consider that one of the benefits of
using CSS is the adaptability of your page layout on different devices. If you view your web
page on a device that doesn't support CSS (a mobile device of some kind, most likely) or you've
actively disabled CSS display for a given reason, your page layout can adapt; a 600-pixel-wide
logo, on the other hand, may not be able to.
If you can keep a logo down to the 200-pixel-wide level, you have a fighting chance of
being able to make it fit on a small screen without users having to scroll horizontally to see it.
Mixing and Matching Foreground and Background Images
It is a good idea to separate the essential foreground images (for which you may need to apply
an
alt
attribute, for example, with the company logo) from the purely decorative background
images. You shouldn't place anything in background images that conveys essential information;
you want to save background images for graphics that are pure decoration and nonessential if
switched off. Consider also that if you
do
put something important in as a background image,
it's unlikely to be printable as most browser/printing setups by default will ignore background
images and color.
Figure 8-1 shows a header design that is typical of the kind of thing that you as a developer
might be asked to build. If it looks familiar, pat yourself on the back—it's based on the fictional
travel site that we used in the previous chapter to show off the body CSS switcher idea.
Figure 8-1.
A simple header design
Now you need to put on your special web-building specs and see it for what it is:
•
A logo
•
A tagline
•
A background with a slight gradient fade that is repeated
•
A reflection of the logo (let's assume that this is a “trendy” thing the company decided
they wanted for the web site but is not their traditional logo)
