...

View Full Version : Convert table menu to css menu



Michiel
10-04-2004, 02:24 PM
Hi guys,

I'm trying to create a horizontal menu with descriptions underneath each item with correct xhtml and css. But someway I just can't get it right. I know how to do it the old-fashioned way (with tables), but I'm shifting towards the CSS approach.

The problems I'm experiencing are that the 'display: inline' property doesn't seem to work anymore when other elements (e.g. <h1>, <div>, <span>) are placed inside the element.

Can anyone help me on creating a correct menu? This is the way it should look like, using tables:



<html>
<head>
<style type="text/css">
<!--
th {
border: solid 1px #cccccc;
width: 175px;
}
-->
</style>

</head>
<body>
<table>
<tr>
<th>Menu Item 1</th>
<th>Menu Item 2</th>
<th>Menu Item 3</th>
<th>Menu Item 3</th>
</tr>
<td>Description Menu Item 1 Description Menu Item 1</td>
<td>Description Menu Item 2 Description Menu Item 2</td>
<td>Description Menu Item 3 Description Menu Item 3</td>
<td>Description Menu Item 4 Description Menu Item 4</td>
</tr>
</table>
</table>
</body>
</html>


Thanx in advance, Michiel

ronaldb66
10-04-2004, 02:35 PM
The usual way to mark up menus is with unordered lists. Consider each list item as a container for both a menu item and its decription. For marking up the contents of each menu item several possibilities come to mind; an interesting read can be found on Dan Cederholm's site: Multi-Paragraph List Items (http://www.simplebits.com/notebook/2003/12/01/simplequiz_part_x_multiparagraph_list_items.html).

After you're satisfied with how your list items are marked up and styled you can position them horizontally by floating them left.

Michiel
10-04-2004, 03:40 PM
Hi,

thanx for your reply but I still can't get it to work. I've now got the following html:



<div id="menu">
<ul>
<li>
<h1>Item 1</h1>
<p>
More info on Item 1
</p>
</li>
<li>
<h1>Item 2</h1>
<p>
More info on item 2
</p>
</li>
</ul>
</div>


and this is my css:



#menu {
width: 100%;
padding-top: 10px;
}

#menu ul, li {
padding: 0px;
margin: 0px;
display: inline;
}

#menu li {
width: 175px;
border: solid;
}

#menu h1 {
width: 175px;
border: solid 1px #eeeeee;
font-size: 12px;
}

#menu p {
width: 175px;
font-size: 12px;
}


Still this doesn't work because of the elements inside '<li>'. ANy ideas on how to solve this?

Thanx, Michiel

brothercake
10-04-2004, 09:02 PM
A definition list is probably better semantics for the structure you're creating:


<dl id="menu">
<dt>Item 1</dt>
<dd>
More info on Item 1
</dd>
<dt>Item 2</dt>
<dd>
More info on item 2
</dd>
</dl>

ronaldb66
10-05-2004, 11:50 AM
As mentioned, the list (li or other... :D ) elements need to stay block level, so remove "display: inline"; they need to be floated to line up horizontally.
Add a "float: left;" rule to the "#menu li" declaration block.

@Brothercake:

You're probably right; that was one of the more interesting and popular options Dan Cederholm provided in the quiz and that many commenters adopted in some form or another.

AaronW
10-05-2004, 12:55 PM
http://offtone.com/scripts/dl.html

After trying with a <dl> and giving up, I used a list to emulate the <dl>... Just couldn't get the dt/dd pairs to stack on top of each other and float left as one container...

ronaldb66
10-05-2004, 01:17 PM
AaronW,

Sweeeet... :thumbsup:

Michiel
10-05-2004, 01:50 PM
Hi everybody,

thanx for your input on solving my problem. I have been working on it myself as well and found that the following approach (similar as AaronW) works just as it should and is correct semantics as well.


html:



<div id="menu">
<ul>
<li>
<h1>Item 1</h1>
<p>
Description 1
</p>
</li>
<li>
<h1>Item 2</h1>
<p>
Description 2
</p>
</li>
<li>
<h1>Item 3</h1>
<p>
Description 3
</p>
</li>
<li>
<h1>Item 4</h1>
<p>
Description 4
</p>
</li>
</ul>
</div>



css:




#menu {
width: 100%;
padding-top: 10px;
}

#menu ul, li {
padding: 0px;
margin: 0px;
float: left;
}

#menu li {
width: 175px;
margin-right: 6px;
margin-left: 6px;
}

#menu h1 {
width: 175px;
border: solid 1px #eeeeee;
font-size: 11px;
text-align: center;
}

#menu h1:hover {
width: 175px;
background-color: navy;
color: #cccccc;
}

#menu p {
font-size: 11px;
}



This works exactly as desired!

Michiel

AaronW
10-05-2004, 01:54 PM
Erm, your method isn't semantic at all.

<h1> elements do not belong in menus.

http://offtone.com/scripts/dl.html -- Updated to compare.

Michiel
10-05-2004, 01:58 PM
It isn't? The reason I did this is because of search engine optimization. As far as I know Google percieves <h1> as an important element, at least more important tha <span>.

Will it cause problems leaving it like this?

Michiel

AaronW
10-05-2004, 02:06 PM
http://offtone.com/scripts/dl.html -- updated to compare.

The way it, you might as well have used tables, really. <h1> as a clickable menu link just doesn't make sense.

<h1> should wrap your site's name. <h2> should wrap the page name. <h3> should wrap section titles of the page, etc.

Michiel
10-05-2004, 03:26 PM
Hi AaronW,

I guess your right about that. I'll change it as I see that it works just as well and is in fact right semantics .. I'm really just learning ;)

thanx for your help!

Michiel

ronaldb66
10-06-2004, 07:51 AM
I don't see anything fundamentally wrong in using a header element (hn) for this purpose; a h1 might be a bit over the top, however.
Something lower down the scale, in line with the rest of your document structure, would do nicely, like a h3 or h4 perhaps.

Update, @AaronW:

This application of header levels you suggest is hardly set in stone, in fact it's wide open to debate: I myself, and a good deal of others, see the h1 element more suited for the page header/title, with h2, etc. following suit, while the title element can serve to cite the site name, and possibly echo the page title again.
Mentioning the site title, like in the page header, should then not be done in a header element.

AaronW
10-06-2004, 01:26 PM
Even still, I'm pretty sure it's semantically 'wrong' to use an <h*> when you haven't use an <h*-1>. So <h3> without an <h2> before it wouldn't make any sense.

<h1>'s for the navigation titles just doesn't make sense. Google might just end up naming your page "HOME ABOUT CONTACT" etc. You can use your way, as I'm not terribly concerned about your SE ranking. Do what you think's best.

ronaldb66
10-06-2004, 02:05 PM
For those interested in some more views on the whole heading debacle, Tomas Jogin (http://jogin.com/weblog/) posted sort of a nice summary with links to related articles a while ago: Hierarchy (http://jogin.com/weblog/archives/2004/07/19/hierarchy).
Seems like he agrees on your take not to use headers for menus; then again, what to do instead?

brothercake
10-06-2004, 02:20 PM
Even still, I'm pretty sure it's semantically 'wrong' to use an <h*> when you haven't use an <h*-1>.
Absolutely - a page must only ever have one <h1>

So <h3> without an <h2> before it wouldn't make any sense.
In this case yeah, and generally, but not always - the <h1> is not necessarily the first thing on the page, so it's fair to group content that comes before it using <h2> and lower levels as necessary

gohankid77
10-06-2004, 03:54 PM
However, if you are looking for structure and organization, you can turn on the "Show Outline" feature of the W3C Markup Validator. After listing your errors (or lack thereof), it will show an outline. If you don't have an <h*-1> before your first <h*> tag, but you do have one later, it will not look right.

Example:


<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
<h3>Level 3 Heading</h3>
<h2>Level 2 Heading</h2>
<h1>Level 1 Heading</h1>


That will render similar this using the "Show Outline" feature of the Validator:


* Level 4 Heading
* Level 5 Heading
* Level 6 Heading

Level 3 Heading
Level 2 Heading
Level 1 Heading


----------------------

And if you skip a <h*> tag, you will get an error message in the outline.

Example:



<h2>Level 2 Heading</h2>
<h4>Level 4 Heading</h4>
<h1>Level 1 Heading</h1>
<h3>Level 3 Heading</h3>


That will render similar this using the "Show Outline" feature of the Validator:


* Level 2 Heading
* A level 3 heading is missing!
* Level 4 Heading

Level 1 Heading

* A level 2 heading is missing!
* Level 3 Heading


Because of that one heading missing, your structure is destroyed. That is why the error, and any subsequent headings are highlighted.

Michiel
10-06-2004, 06:47 PM
Hi,

you guys do have a point concerning the use of <h1> for my menu structure, but I must say that this was a standalone test-page with just the menu. In the final version I'd probably end up using something like h4 or even h5.

The article on hierarchy sure is an interesting read. I'll take it as an advise in the final version of my website.

Cheers, Michiel

AaronW
10-06-2004, 09:01 PM
In the final version I'd probably end up using something like h4 or even h5.

Dude, the header tags aren't used to rank the relevance of sections; they're used to denote the depth.

<h1>Title</h1>
<p>Intoduction.</p>

<h2>Topic #1</h2>
<p>Details</p>

<h3>Topic #1, Sub-topic #1</h3>
<p>Details</p>

<h2>Topic #2</h2>

Etc.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum