CODEWITHSUNDEEP
css
Forza
Forza

Reputation: 1649

CSS prevent menu from changing position

Someone asked me to improve his CSS to prevent the navigation menu from changing position when the browser gets smaller, but I can't figure out why it won't work. See the jsFiddle: http://jsfiddle.net/gtvTY/10/

The HTML:

<div id="menu">
    <ul>
        <li><a href="index.html" title="Home">HOME</a></li>
        <li><a href="virage.html" title="Virage">VIRAGE</a></li>
        <li><a href="rapide.html" title="Rapide">RAPIDE</a></li>
        <li><a href="dbs.html" title="DBS">DBS</a></li>
        <li><a href="db9.html" title="DB9">DB9</a></li>
        <li><a href="cygnet.html" title="Cygnet">CYGNET</a></li>
    </ul>
</div>

This is the original menu:

        ul.menu {
        position:absolute;
        left:18%;
        right:18%;
        background: #333;
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 64%;
        z-index: 3;
    }
    ul.menu li {
        float: left;
        margin: 0;
        padding: 0;
    }
    ul.menu a {
        background: #333;
        color: #ccc;
        display: block;
        float: left;
        margin: 0;
        padding: 8px 12px;
        text-decoration: none;
    }
    ul.menu a:hover {
        background: #666;
        color: #fff;
        padding-bottom: 8px;
    }

I have redesigned it a bit to this. But it doesn't work at all...

#menu ul {
        position: absolute;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #menu li
    {
        float: left;
        margin: 0 0.15em;
    }

    #menu li a
    {
        background-color: #333;
        height: 2em;
        line-height: 2em;
        float: left;
        width: 9em;
        display: block;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }

    #menu ul a:hover {
        background: #666;
        color: #fff;
        padding-bottom: 2px;
    }

Why doesn't this menu stay centered at all times?

Upvotes: 0

Views: 308

Answers (3)

syed mohsin
syed mohsin

Reputation: 2938

Is that what you want? jsfiddle

  1. Menu canter aligned in the bowoser.
  2. Menu Items will not go in the second row.

if this is so the solution is

You have to use position:relative; instead of position:absolute; 

<div class="center">
 <div id="menu">
    <ul>
        <li><a href="index.html" title="Home">HOME</a></li>
        <li><a href="virage.html" title="Virage">VIRAGE</a></li>
        <li><a href="rapide.html" title="Rapide">RAPIDE</a></li>
        <li><a href="dbs.html" title="DBS">DBS</a></li>
        <li><a href="db9.html" title="DB9">DB9</a></li>
        <li><a href="cygnet.html" title="Cygnet">CYGNET</a></li>
    </ul>
</div>

​​​​​​​​​​​​

and define a width to your menu css

.center
{
 width:auto;   
}
#menu
{
width:900px;
margin:0 auto;
position:relative;

}
#menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #menu li {
        float: left;
        margin: 0 0.15em;
    }

    #menu li a {
        background-color: #333;
        height: 2em;
        line-height: 2em;
        float: left;
        width: 9em;
        display: block;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }

    #menu ul a:hover {
        background: #666;
        color: #fff;
        padding-bottom: 2px;
    }

​

Upvotes: 0

AndrewHenderson
AndrewHenderson

Reputation: 4972

You need to put the menu in a wrapping container. Give it a width and set the margin: 0 auto;

See fiddle here: http://jsfiddle.net/AndrewHenderson/gtvTY/7/

HTML:

<div class="container">
    <div id="menu">
        <ul>
            <li><a href="index.html" title="Home">HOME</a></li>
            <li><a href="virage.html" title="Virage">VIRAGE</a></li>
            <li><a href="rapide.html" title="Rapide">RAPIDE</a></li>
            <li><a href="dbs.html" title="DBS">DBS</a></li>
            <li><a href="db9.html" title="DB9">DB9</a></li>
            <li><a href="cygnet.html" title="Cygnet">CYGNET</a></li>
        </ul>
    </div>    
</div>​

CSS:

.container{
    margin: 0 auto;
    width: 800px;
}

Upvotes: 0

daniel
daniel

Reputation: 1433

Maybe it is something like this you are looking for - jsFiddle in comment

Upvotes: 2

Related Questions