Search code examples
htmlcssxhtmlw3c

CSS/HTML: What is the "right" way to create this effect?

I'm working on a website for a small law office. There's a menu bar across the top that I want to be equi-spaced with a | between each item: Link. (The white bar just below the title banner)

This looks exactly right, but I'm using tables to accomplish it. Is there a "more correct" method for doing this with XHTML/CSS?

My code is below:

<div id="topMenu" class="spanningMenu">
        <table>
            <tr>
                <td class="topMenuEnd"></td>
                <td class="topMenuMiddle"><a href="index.htm">Home</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="contact.htm">Contact Us</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="directions.htm">Directions</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="disclaimer.htm">Disclaimer</a></td>
                <td class="topMenuEnd"></td>
            </tr>
        </table>
    </div>

And the CSS:

.spanningMenu {
    border-style: solid;
    border-width: 4px 0px;
    padding: .2em;
}

#topMenu td.topMenuMiddle {
    width: 12.5%;
}

#topMenu td.topMenuEnd {
    width: 6.25%;
}

I like my solution because it's pretty robust, but it definitely has layout information in the HTML, which I've been trying to avoid.

Solution

  • I've just hacked something together to give you an idea. It's a method I always use. You can adjust the width to suit your needs. Here's a fiddle : http://jsfiddle.net/pfkgw/

    #menu {
    background:#ECD8B1;
    overflow:auto;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    padding: 5px 0px;
}
ul li {
    width: 24%;
    border-right:1px solid #000;
    float:left;
    text-align:center;
}

ul li.last {
    border-right:none;
}

li a {
    display:block;
    padding:5px;
    color:#000;
}

<div id='menu'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Contact Us</a></li>
        <li><a href='#'>Directions</a></li>
        <li class='last'><a href='#'>Disclaimer</a></li>
    </ul>
</div>