How to make 100% horizontal cross-browser menu HTML/CSS?
1. with keeping clean HTML, li list
2. no image/javascript, tableless, W3C standards compliance
100 horizontal cross-browser menu HTML/CSS


Example for invalid example:

/*CSS doesn't make `block` right/left space between `li` items (see attached image)*/
#nav{
    text-align:justify;
}
#nav li{ /*border:1px solid #000; margin-right:1px; margin-left:1px;*/
    display:inline-block; white-space:nowrap;
}
#nav li#span{ /*hack to make 100% horizontal*/
    display:inline-block; width:100%; height:1px;
}
*html #nav li,*html #nav li#span,*+html #nav li,*+html #nav li#span{ /*IE6/7 hacks tah are not working*/
    display:inline;
}

and:

<div id="nav">
    <ul>
        <li>Home <!--unfortunately it doesn't work without space after each list, 
                                                 need for some solution--></li>
        <li>Services </li><!--don't want to add style for each list separated-->
        <li>Portfolio </li>
        <li>Clients </li>
        <li>Articles </li>
        <li>Contact Us </li>
        <li id="span"></li><!--don't like to add any extra tag (like this),
                               but other way it doesn't work,
                               need for some solution-->
    </ul>
</div>
  • The same question in http://stackoverflow.com/questions/3232430/100-horizontal-cross-browser-menu-html-css Binyamin almost 4 years ago

2 answers

1
point

This is as close as I can get:

http://www.boldfishclient.co.uk/doctype/IMB/

source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title></title>
        <style type="text/css" media="screen">
            body
            {
                padding: 0;
                margin: 0;
                background-color: #FFF;
            }
            #container
            {
                width: 90%;
                margin: 10px auto;
                background-color: #FFF;
            }

            ul
            {
                padding: 0;
                margin: 0;
                width: 100%;
                overflow: hidden;
                list-style-type: none;
                float: left;
            }

            li
            {
                float: left;
                border: 1px solid #ccc;
                margin: 0 1px;
                width: 16%;
                padding: 0;
                background-color: #FFF;
            }

            a
            {
                text-decoration: none;
                color: #333;
                text-align: center;
                display: block;
                height: 42px;
                line-height: 42px;
                white-space: nowrap;
                overflow: hidden;
                font-size: 0.9em;
                width: auto;
            }

            a:hover
            {
                background-color: #ccc;
                color: #FFF;
            }

        </style>
    </head>
    <body>
        <div id="container">            
            <div id="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Clients</a></li>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>
Answered almost 4 years ago by Tony Crockford
  • Thanks, Tony Crockford! Nice example. Unfortunately, if there will be more or less links in list, then, because of CSS li { width:16% /*because of percentage*/ }, width will not be 100% or menu will be even broken to few lines. Binyamin almost 4 years ago
0
points

You can set #footer a and #footer li to either display: block; or display: inline-block; From there, it should be easy to style just as you normally would.

Answered almost 4 years ago by Vinny Burgh