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:
My Page
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;
}
If you want some good accessibility tips, have a look at Mark Pilgrim's work.
-Dom
Re:Small Comment...
LTjake on 2004-04-24T15:48:52
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 from my original message.
:)