2 posts tagged “css”

I had this horizontal menu (list based, like all the cool kids are doing these days), but it was just a little too long.

+--------+ +--------+ +------
| Item A | | Item B | | Item
+--------+ +--------+ +------
--+
C |
--+

Since each of the menu items were at least two words long, i decided that they could go on two lines. Simply adding a <br> didn't do the trick -- it pushes the entire menu down a line on each break.

Thanks to Phrogz on #css who pointed out that the trick is to use the following two CSS statements:

display: table-cell;
display: inline-block;

inline-block for IE and Safari, table-cell for Mozilla. Adding this to the anchors in the list items results in something like:

+------+ +------+ +------+
| Item | | Item | | Item |
|   A  | |   B  | |   C  |
+------+ +------+ +------+

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;
}