- Porad: 21
- Tutoriali: 6
- Tekstów: 8
- STATYSTYKA
Wykorzystamy tutaj możliwość użycia body id.
#menu {
width:auto;
}
ul {
margin:40px;
width:408px !important;
width:402px; /* IE */
height:20px;
list-style:none;
text-align:center;
border:1px solid #ffffff;
background:#1a507e;
padding:0;
}
li {
margin:0;
float:left;
text-align:center;
}
ul li a:link {
color:#ffffff;
font-size:12px;
text-decoration:none;
font-weight:bold;
width:100px;
height:20px;
margin:0 auto;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
line-height:19px;
display:block;
}
ul li a:visited {
color:#ffffff;
font-size:12px;
text-decoration:none;
font-weight:bold;
width:100px;
height:20px;
margin:0 auto;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
line-height:19px;
display:block;
}
ul li a:hover {
background:#333333;
}
body#jeden #menu a#one,
body#dwa #menu a#two,
body#trzy #menu a#three,
body#cztery #menu a#four
{
color:#ffffff;
font-size:12px;
text-decoration:none;
font-weight:bold;
width:100px;
margin:0 auto;
background:#1a7e3a;
}
body#jeden #menu a#one:hover,
body#dwa #menu a#two:hover,
body#trzy #menu a#three:hover,
body#cztery #menu a#four:hover
{
color:#ffffff;
font-size:12px;
text-decoration:none;
font-weight:bold;
width:100px;
margin:0 auto;
background:#333333;
}
Teraz jak w stylu, przypisujemy kolejne body id
<body id="jeden">
<div id="menu">
<ul>
<li><a href="index.html" id="one">link jeden</a><li>
<li><a href="index2.html" id="two">link dwa</a><li>
<li><a href="index3.html" id="three">link trzy</a><li>
<li><a href="index4.html" id="four">link cztery</a><li>
</ul>
</div>
</body>
kliknij żeby zobaczyć demo
