Autor Zpráva
j4kub
Profil *
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
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
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
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
Jasně, to bylo jen takové rýpnutí.
j4kub
Profil *
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 :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: