Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Convert table menu to css menu

    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:

    Code:
    <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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    List and then some

    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.

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

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

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

    Code:
    <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:

    Code:
    #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
    Last edited by Michiel; 10-04-2004 at 04:45 PM.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A definition list is probably better semantics for the structure you're creating:
    Code:
    <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>
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floated blocks

    As mentioned, the list (li or other... ) 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.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Well, there you go!

    AaronW,

    Sweeeet...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
          <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:

    Code:
    #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

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Erm, your method isn't semantic at all.

    <h1> elements do not belong in menus.

    http://offtone.com/scripts/dl.html -- Updated to compare.
    Last edited by AaronW; 10-05-2004 at 03:04 PM.

  • #10
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #11
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Regular Coder
    Join Date
    Jul 2002
    Location
    The Netherlands
    Posts
    252
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Header, why not

    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.
    Last edited by ronaldb66; 10-06-2004 at 08:57 AM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #14
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Headings, headache

    For those interested in some more views on the whole heading debacle, Tomas Jogin posted sort of a nice summary with links to related articles a while ago: Hierarchy.
    Seems like he agrees on your take not to use headers for menus; then again, what to do instead?
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •