problem z menu...

[amon]

Witam,
mam dość dziwny problem i szczerze mówiąc już nie mam pomysłów co jest nie tak...

mam menu w formie w divach poziome rozsuwane do góry i za nic nie świecie nie jestem w stanie go wycentrować. proszę o pomoc...

Kod:

<div class="menubg">

<ul id="nav">

        <!-- <li>

            <p>&nbsp;</p>

        </li> -->

                <li>

            <p><a href="#">H O M E</a></p>

            

        </li>

        <li>

            <p><a href="#">B I O</a></p>

            

        </li>

        <li>

            <p><a href="#">G A L L E R Y</a></p>

            <ul>

                <li><a href="#">beauty</a></li>

                                <li><a href="#">nudes</a></li>

                <li><a href="#">linergie</a></li>

                <li><a href="#">fashion</a></li>

                <li><a href="#">glamour</a></li>

                                <li><a href="#">commercial</a></li>

                                <li><a href="#">photos for sale</a></li>

            </ul>

        </li>

                <li>

            <p><a href="#"> C O N T A C T </a></p>

        </li>

        <li class="last">

            <p>&nbsp;</p>

        

        </li>

    </ul>

</div>

to jest kod na stronie.


teraz kod z CSS:

Kod:

.menubg {
background-image: url(menubg.png);
text-align: center;
}





ul#nav,ul#nav ul {
        padding: 0;
    list-style: none;
        
}
ul#nav {
    width:100%;
    height:50px;
    background: url(menubg.png);
        margin: 10px;
}

ul#nav li {
    position: relative;
    float: left;
    width:155px;
    height:50px;
    border-right:3px solid white;
    background: transparent;
    color:#000000;
    text-align: center;
}
ul#nav li a {
    text-decoration: none;
    color:#000000;
}
#nav li ul {
    position: absolute;
    left: 0;
    top:-180px;
    margin-left: -999em;
    border:none;
    height:180px;
    width:155px;
    background:#000000;
    border-right:0px solid white;
/*opacity for IE5+*/
  filter: alpha(opacity=75);
  /*opacity for older Mozilla browsers*/
  -moz-opacity: 0.75;
  /*opacity for mozilla/safari*/
  opacity: 0.75;
}
ul#nav li li{height:auto;border:none;}
ul#nav li li a{
    color:#fff;
    padding:5px 10px 5px 10px;
    display:block;
}
ul#nav li:hover ul,
ul#nav li.over ul {
    margin-left:0;
}
ul#nav li:hover,
ul#nav li.over,
ul#nav li:hover a,
ul#nav li.over a {color:#a0a0a0}

ul#nav li:hover li a,ul#nav li.over li a{color:#ffffff;}
ul#nav li li a:hover{color:#a0a0a0;}
ul#nav li p {padding:5px;}
ul#nav li.last,ul#nav li.last ul{border:none;width:170px;}

Będę ogromnie wdzięczny za pomoc

[Kartofelek]

margin: 10px; <- to na margin:10px auto; + width dla tego samego elementu
Lub display:inline i wtedy dla nadrzędnego text-align:center;
lub position:absolute; left:50%; top:0; margin-top:10px; margin-left:-polowa width;
lub ... to zależy od sytuacji ;]

[amon]

margin: 10px; <- to na margin:10px auto; + width dla tego samego elementu
Lub display:inline i wtedy dla nadrzędnego text-align:center;
lub position:absolute; left:50%; top:0; margin-top:10px; margin-left:-polowa width;
lub ... to zależy od sytuacji ;]

Jesteś Wielki! Dzięki