Stories
Slash Boxes
Comments
NOTE: use Perl; is on undef hiatus. You can read content, but you can't post it. More info will be forthcoming forthcomingly.

All the Perl that's Practical to Extract and Report

use Perl Log In

Log In

[ Create a new account ]

Journal of LTjake (4001)

Friday April 23, 2004
08:04 AM

CSS headers

[ #18452 ]

I've been playing with doing CSS based layouts for all of my new projects. My most recent project has a pretty standard header look:

+--------------------+
| Logo | Site Name   |
+--------------------+
|                    |
:                    :

I've been trying hard to make things accessible. One simple test is to use FireFox with the Web Development Toolbar and disable styles. This will let you know how things will look to text only browsers.

If you do the header in the normal way with an <img> and an <h1>, in text mode it doesn't look so hot.

Instead I've pushed the logo into the background and used a margin-left on the <h1> to move it right of the image. This is fine, except that the header is only as big as your text. To fix this, use a height on the header.

The last issue you'll notice is that the text is now vertically aligned to the top of the graphic. A decent counter-measure is to use a line-height on the <h1>. The caveat here is that, should your title text be very long, or your header width very short, making your title 2 or more lines long, then your page will look like crap. :)

HTML:

<div id="header">
    <h1>My Page</h1>
</div>

CSS:

#header {
    /* a 90 x 90 logo */
    height: 90px;
    background: #c0c0c0 url( logo.png ) no-repeat center left;
}

#header h1 {
    line-height: 90px;
    margin-left: 115px;
    font-size: x-large;
    margin-top: 0;
    margin-bottom: 0;
}

The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
 Full
 Abbreviated
 Hidden
More | Login | Reply
Loading... please wait.
  • In case anyone wonders, the Web Development Toolbar is also available for Mozilla.
  • Is there a reason for having the div wrapping the h1? I reckon that you could get away with simply styling the h1, which would give you more semantically correct (read "accessible") markup.

    If you want some good accessibility tips, have a look at Mark Pilgrim's work [diveintoac...bility.org].

    -Dom

    • You're right that divs and spans have no semantic value. However, wrapping an h1 in a div does not do any harm. Things lose semantic value if you start replacing them with divs and spans.

      You could probably do it with just the h1, but i prefer to wrap my sections in divs and give them ids (header, footer, whatever). If you were to use the h1, you'd have to switch from margin-left to padding-left. Other than that i guess it's pretty straight forward.

      I've read Mark's site before, and in fact, i linked it fro