Problem menu poziome i pionowe

[kubatur0]

Kod:

html, body {
    background-image: url("../images/ikonka.jpg");
}

.pionowe a:link {
color: white;
text-decoration: none;
}



.pionowe a:visited{
color: black;
}

ul#poziome, ul#poziome li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;      

}

ul#poziome li {
    display: inline;
    white-space: nowrap;
    background-image: url("../images/menu.jpg") no-repeat;
}


ul #poziome a:link, ul #poziom a:visited {
    display: block;
    text-decoration: none;
    font-weight: bold;
    background: black;
    color: white;
}

ul .pionowe, ul .pionowe li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;

}

ul .pionowe li {
    width: 160px;
    padding-left: 19px;
    background: url("../images/kamien.jpg") no-repeat left top;
    float:left;
}

ul .pionowe a:link, ul .pionowe a:visited {
    display: block;
    width: 139px;
    text-decoration: none;
    padding: 5px 10px;
    font-weight: bold;
    background: black;
    color: white;
}

ul .pionowe a:hover{
    background-color: black;
    color: violet;
}
ul .pionowe li a:hover{
    width: 160px;
    padding-left: 19px;
    background: url("../images/kamien1.jpg") no-repeat right top;
}

.menu{
background-image: ulr("../images/linia.jpg");
color: white;
font-size: 16pt;
font-weight: bold;
text-indent: 20px;
}

.submenu{
color:pink;
margin-left: 60px;
float: left;
}



#top {
    width: 880px;
    margin-top: 20px;
    margin-left: 200px;
}

#NAGLOWEK {
    background-color: #888;
    background-image: url("../images/banner.jpg");
    height: 200px;
}

#MENUGORNE{
    height: 20px;
    background-color: black;

}

#NAW1{
background-image: url("../images/naw2.jpg");
float: left;
width: 5px;
height: 795px;
}

#MENU {
    
    width: 180px;
    float: left;
    background-color: black;
    height: 700px;
    
}


#NAW2{
background-image: url("../images/naw2.jpg");
width: 5px;
height: 795px;
float: left;
}


#INFORMACJE {
    width: 200px;
    float: left;
    overflow: hidden;
    background-color: black;
    height: 700px;
}

#TRESC {
    width: 690px;
    float: center;
    overflow: hidden;
    background-color: black;
    height: 800px
}

#STOPKA {
    clear: both;
    background-image: url("../images/stopka.jpg");
    width: 880px;
    background-color: #888;
    height: 100px;
    float: left;
}

Oto moj plik .css ... mam pewien problem. Na stronie chce umiescic 2 menu (poziome i pionowe). Przez ciagle zabawy na tym pliku zrobil sie tam taki burdel ze nie potrafie tego juz ogarnac... ;( nie moge ustawic obu menu tak zeby byly tak jak sobie to wymyslilem. Na stronie za pomoca Div-ow ustawilem wszystkie czesci strony takie jak naglowek, tresc menu menugornew itp itd. Menu wsadzilem za pomoca <ul><li>. Czy ktos moze mi pomoc, co mam zrobic zeby dzialalo glowny problem mam z ta gorna czescia .pionowe #poziome zeby dzialalo jak nalezy... Bede wdzieczny za pomoc...

[KowR]

Lepiej stosuj tak:

XHTML:

Kod:

<div id="menupoziome">
   <ul>
       <li><a href="">Pozycja menu poziomego</a></li>
       <li><a href="">Pozycja menu poziomego</a></li>
       <li><a href="">Pozycja menu poziomego</a></li>
       <li><a href="">Pozycja menu poziomego</a></li>
       <li><a href="">Pozycja menu poziomego</a></li>
   </ul>
</div>

<div id="menupionowe">
    <ul>
       <li><a href="">Pozycja menu pionowego</a></li>
       <li><a href="">Pozycja menu pionowego</a></li>
       <li><a href="">Pozycja menu pionowego</a></li>
       <li><a href="">Pozycja menu pionowego</a></li>
       <li><a href="">Pozycja menu pionowego</a></li>
   </ul>
</div>

Oraz CSS

Kod:

div#menupoziome {
margin:0px;
padding:0px;
text-align:center;
width:1000px;
float:left;
}

div#menupoziome ul {
text-align:center;
margin:0px;
padding:0px;
display:inline;
width:1000px;
list-style-type:none;
}

div#menupoziome ul li {
text-align:center;
margin:0px;
padding:0px;
display:inline;
list-style-type:none;
}

div#menupoziome ul li a {
text-align:center;
margin:0px;
padding:0px;
display:inline;
color:#000000;
text-decoration:none;
}

div#menupoziome ul li a:hover {
text-align:center;
margin:0px;
padding:0px;
display:inline;
color:#000000;
text-decoration:underline;
}

div#menupionowe {
margin-top:30px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
text-align:center;
width:300px;
float:left;
}

div#menupionowe ul {
text-align:left;
margin:0px;
padding:0px;
display:block;
width:300px;
list-style-type:none;
}

div#menupionowe ul li {
text-align:left;
margin:0px;
padding:0px;
display:block;
width:300px;
list-style-type:circle;
}

div#menupionowe ul li a {
margin:0px;
padding:0px;
color:#000000;
text-decoration:none;
}

div#menupionowe ul li a:hover {
margin:0px;
padding:0px;
color:#000000;
text-decoration:underline;
}

Dla ułatwienia stosuj sobie komentarze które będą oddzielać Ci elementy...

Np. nad menu poziomym:

Kod:

/* MENU POZIOME */

A nad menu pionowym:

Kod:

/* MENU PIONOWE */

I reszta analogicznie.

Pokazałeś kawałek CSS'a, który ma bardzo mało linijek. A co by było gdybyś miał do zakodowania ogromny layout?

Pisane z palca.