2 replies to this topic

[scouseflip]

Hi all

Just starting on a site for a friend - very early stages but I'm working on the top menu navigation and hit a snag. I want a horizontal menu and want all the links/nav buttons to be same width. I have managed this easily enough in Vertical menus and have done it horizontally by adding spacing in to pad out the links with shorter anchor text, but this seems messy and I can't work out how to control the width. the CSS is:

CODE

#topnav
{
    margin-left:180px;
    width: 600px;
    height:30px;
    color:white;
}

#topnav ul
{
}

#topnav li
{
    list-style-type:none;
    display:inline;
    margin-bottom:20px;
}

#topnav a
{
    font-weight:bolder;
    padding:5px;
    width:75px;
    height:30px;
    color:#dab870;
    text-decoration:none;
}

and the code is

CODE

        <div id="topnav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Photo's</a></li>
                <li><a href="#">Guestbook</a></li>
            </ul>
        </div>

Can anyone help?

Page I'm working on is: its-our-place.co.uk/walkerhughes/default.aspx and you wll be able to see the navigation at the top of the page.

Cheers

Andy

[scouseflip]

Sorry ignore me I think I got it now!

[Dimmerswitch]

(I know it sounds like you're on top of it, but in case a future reader finds the thread):

I expect the issue is that 'width' only is applied to block-level elements, not inline ones.

Block level elements will generally begin on a new line - stuff like <p>, <div>, <form> or <li> are block-level elements.

Inline elements are rendered within the flow of the surrounding content - stuff like <em>, <a>, <strong>, or <span> are inline elements.

You're already using the display:inline; property to cause the list items in your menu to be treated as inline elements (so the list will display horizontally rather than vertically. It's also possible to cause inline elements (like anchor tags) to be treated as block-level elements is through using the display:block; property. However, in this case that would have the unintended side effect of 'stacking' the anchor links vertically again.

The solution I think you're looking for (and may have already come up with, it sounds like) is to use floats. Adding a float rule to an inline element will have the useful side effect of 'promoting' it to a block-level element. At that point, your width rule should be properly applied.