| Autor | Zpráva | ||
|---|---|---|---|
| j4kub Profil * |
#1 · Zasláno: 3. 1. 2012, 17:03:27
Dobry den,
prosim Vas je tu niekto zdatny v CSS? mam menu cez CSS, funguje super, len by som chcel oddlisit farebne tlacitka ( rozdelit na 4 skupiny ), uz nad tym dumam 4 dni a neviem ako to spravit tak aby to pekne chodilo, ked mi to ide, tak zasa validator vyhadzuje chyby. zdrojovy kod menu: <div class="menu">
<ul>
<li><a href="#" ">KATŠKOLA</a></li>
<li><a href="#" >GAŠ</a></li>
<li><a href="#" >CZŠ</a></li>
<li><a href="#">ŠJ</a></li>
<li><a href="#">ŠKD</a></li>
<li><a href="#">ŠSZČ</a></li>
<li><a href="#">EXKURZIE</a>
<li><a href="#">SÚTAŽE</a></li>
<li><a href="#">FOTOGALÉRIA</a></li>
<li><a href="oznamy.php">OZNAMY</a></li>
<li><a href="linky.php">LINKY</a></li>
</ul>
</div>a zdrojovy kod CSS: .menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}
.menu ul{
background: #4875FC ;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background: #4875FC url("images/seperator.gif") bottom right no-repeat; /* farba pozadia*/
color: black ; /* farba textu */
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 5px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #000000 url("images/hover.gif") bottom center no-repeat;
color:white; /* farba po vyrolovani text*/
text-decoration:none;
}
.menu li ul{
background: #2E9AFE; /* farba po vyrolovani pozadie*/
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:150px;
z-index:200;
/*top:1em; */
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background: #2f2f2f url('images/hover_sub.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:230px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2E9AFE url('images/odrazka.gif') center left no-repeat; /* farba po vyrolovani pozadie plus mys*/
border:0px;
color: black; /* farba po vyrolovani text plus mys*/
text-decoration:none;
}
.menu p{
clear:left;
} |
||
| Taurus Profil |
#2 · Zasláno: 3. 1. 2012, 17:12:37
Můžeš si ušetřit jeden div:
<ul class="menu"> <li><a...></li> ... </ul> V tvém kódu máš neuzavřený <li>, uvozovku navíc... Pořádně si to projdi raději. Pokud chceš odlišit odkaz např. barvou, tak stačí přidat třídu: <a href="#" class="barva">...</a> V css pak: a.barva {background: #000; color: #ccc} |
||
| Str4wberry Profil |
#3 · Zasláno: 3. 1. 2012, 17:18:37
Reakce na j4kuba:
Přidáš <li> třídu (class) a připíšeš příslušný styl, který změní barvu:
.menu .jmeno-tve-tridy a {background: barva}Reakce na Taura: Kde tam vidíš neuzavřený <li>? :–)
|
||
| Taurus Profil |
#4 · Zasláno: 3. 1. 2012, 17:48:39
Str4wberry:
Psal jsem "v kódu", ne v prohlížeči... Když už to tedy bereme do detailu. :-) Jinak nic nenamítám, vím kam míříš. Jak je vidět, j4kub chce uzavírat li sám, tak je fajn držet všude stejný styl. |
||
| Str4wberry Profil |
#5 · Zasláno: 3. 1. 2012, 18:24:28
Jasně, to bylo jen takové rýpnutí.
|
||
|
Časová prodleva: 15 dní
|
|||
| j4kub Profil * |
#6 · Zasláno: 18. 1. 2012, 14:01:22
Taurus:
> Můžeš si ušetřit jeden div: > > > 1 > 2 > 3 > 4<ul class="menu"> > <li><a...></li> > ... > </ul> diky moc, takto mi to slo :) |
||
|
Časová prodleva: 12 let
|
|||
0