mam chyba prosty problem ale siedze już ponad 2h i nie wychodzi mi rozwiązanie
Otóż chodzi o to że mam na stronie dwa menu jedno na górze poziome (składa się z wykazu <ul><li>) ustawiłem w nim wsyztsko backgrpound jako obrazek itp.Problem się zaczął kiedy zabrałem się za drugie menu pionowe. Mimo że napisałem #lewa ul,li to jednak pobiera on wszytskie dane z #gora ul,li
background sam sie wstawia wymiary tez i co najgorsze modyfikując to dolne menu zmienia mi się też górne.MOJE PYTANIE: JAK ROZDZIELIĆ punkty <UL> i <LI>
Wstawiałem tak <ul class="gora"><li></li></ul> a w drugim <ul class="lewa"><li></li></ul> ale to nic nie daje ponieważ background mam zdefiniowany w li. Wychodzi na to że do każdego punktu <li> mam dodawać klase?? to raczej nie możliwe bo nigdzie nie widziałem czegoś takiego
MENU GÓRNE DZIAŁAJĄCE
Kod
div#menu {
width:748px;
height:33px;
font:12px arial;
font-weight:bold;
text-align:center;
color:#ffffff;
}
#menu ul, ul li{
list-style:none;
margin:0;
padding:0;
float:left;
color:yellow;
}
#menu li{
width:104px;
height:33px;
margin:0 2px 0 0;
}
#menu li a:link, li a:visited{
text-align:left;
display:block;
width:85px;
height:26px;
background-color:#000000;
padding:7px 0 0 20px;
color:#ffffff;
text-decoration:none;
background-image: url(zd/btn.jpg);
}
#menu li a:hover{
background-color:orange;
color:#ffffff;
background-image: url(zd/btn1.jpg);
font:14px arial;
font-weight:bold;
}
<div id="menu">
<ul class="gora">
<li><a href="#">INDEX</a></li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">ADRES</a></li>
<li><a href="#">MAPA</a></li>
<li><a href="#">DOJAZD</a></li>
</ul>
</div>
width:748px;
height:33px;
font:12px arial;
font-weight:bold;
text-align:center;
color:#ffffff;
}
#menu ul, ul li{
list-style:none;
margin:0;
padding:0;
float:left;
color:yellow;
}
#menu li{
width:104px;
height:33px;
margin:0 2px 0 0;
}
#menu li a:link, li a:visited{
text-align:left;
display:block;
width:85px;
height:26px;
background-color:#000000;
padding:7px 0 0 20px;
color:#ffffff;
text-decoration:none;
background-image: url(zd/btn.jpg);
}
#menu li a:hover{
background-color:orange;
color:#ffffff;
background-image: url(zd/btn1.jpg);
font:14px arial;
font-weight:bold;
}
<div id="menu">
<ul class="gora">
<li><a href="#">INDEX</a></li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">ADRES</a></li>
<li><a href="#">MAPA</a></li>
<li><a href="#">DOJAZD</a></li>
</ul>
</div>
A TUTAJ MOJ NIEUDOLNY KOD W TRAKCIE ZMIAN:
Kod
div#lewa{
width:252px;
border:1px solid red;
float:left;
font:11px arial;
text-align:left;
}
#lewa ul.second, ul.second li.first{
margin:0px;
padding:0px;
display:block;
border:1px solid green;
}
#lewa li.first{
height:22px;
list-style:none;
padding:5px 0 0 20px;
margin:2px 0 0 0;
}
#lewa li.first a:link, li.first a:visited{
display:block;
background-color:red;
}
#lewa li.first a:hover {
background-color:red;
}
<div id="lewa">
<ul class="second">
<li class="first"><a href="#">Placówki opiekuńczo wychowawcze</a></li>
<li><a href="#">Rodziny Zastępcze</a></li>
<li><a href="#">Rehabilitacja Niepełnosprawnych</a></li>
<li><a href="#">Świadczenia Rodzinne</a></li>
<li><a href="#">Formularze do pobrania</a></li>
<li><a href="#">Przeczytaj Koniecznie</a></li>
<li><a href="#">Kadra pracownicza Centrum</a></li>
<li><a href="#">Programy szkoleniowe</a></li>
</ul>
</div>
width:252px;
border:1px solid red;
float:left;
font:11px arial;
text-align:left;
}
#lewa ul.second, ul.second li.first{
margin:0px;
padding:0px;
display:block;
border:1px solid green;
}
#lewa li.first{
height:22px;
list-style:none;
padding:5px 0 0 20px;
margin:2px 0 0 0;
}
#lewa li.first a:link, li.first a:visited{
display:block;
background-color:red;
}
#lewa li.first a:hover {
background-color:red;
}
<div id="lewa">
<ul class="second">
<li class="first"><a href="#">Placówki opiekuńczo wychowawcze</a></li>
<li><a href="#">Rodziny Zastępcze</a></li>
<li><a href="#">Rehabilitacja Niepełnosprawnych</a></li>
<li><a href="#">Świadczenia Rodzinne</a></li>
<li><a href="#">Formularze do pobrania</a></li>
<li><a href="#">Przeczytaj Koniecznie</a></li>
<li><a href="#">Kadra pracownicza Centrum</a></li>
<li><a href="#">Programy szkoleniowe</a></li>
</ul>
</div>
Bede BARDZO wdzieczny za pomoc.
