Elastyczne menu w css

Wszystko o HTML, XHTML, XML, CSS.
adus10
Posty: 23
Rejestracja: 04 maja 2011, 16:10:10
Strona na CBA.pl: ReklameX
Płeć: Niewybrana
User Agent: Firefox Windows 1360x1024

Elastyczne menu w css

Post autor: adus10 »

Siemka!
Chcę zrobić na swojej stronie elastyczne, poziome menu (takie, które zmienia szerokość w zależności od ilości tekstu).
Kod CSS menu:

Kod: Zaznacz cały

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

ul {
    float: left;
    width: 100%;
    border-bottom: 1px solid #365;
    padding-left: 20px;
}

ul li {
    float: left;
    background: url("zakladka.gif") no-repeat left top;
    margin-right: 5px;
}

ul a:link, ul a:visited {
    text-decoration: none;
    display: block;
    font-weight: bold;
    background: url("zakladka2.gif") no-repeat right top;
    color: #365;
    padding: 5px 15px 5px 5px;
    margin-left: 10px;
}

ul a:hover {
    color: #032;
} 
Jest to menu z Kursu Html te ostatnie.

1. Wszystko pięknie chodzi tylko prosiłbym o to, żeby menu zmieniało kolor po najechaniu, ale nie wiem kompletnie jak to zrobić. Próbowałem wkleić: backround: url"przykladowyobrazek.png" no-repeat right top;), ale nie działało.

2. Jeżeli ktoś mógłby mi powiedzieć, która linijka odpowiada za różną szerokość przycisków.

Dzięki za pomoc
LaY
Posty: 1120
Rejestracja: 28 sty 2009, 15:20:07
Lokalizacja: Silesia
Płeć: Mężczyzna
User Agent: Opera Windows 1920x1080
Kontakt:

Re: Elastyczne menu w css

Post autor: LaY »

adus10 pisze: 1. Wszystko pięknie chodzi tylko prosiłbym o to, żeby menu zmieniało kolor po najechaniu, ale nie wiem kompletnie jak to zrobić. Próbowałem wkleić: backround: url"przykladowyobrazek.png" no-repeat right top;), ale nie działało.
Popatrz w podany przez Ciebie link, jest tam czarne menu w którym przyciski po najechaniu zmieniają kolor(i obrazek tła) na czerwony. Odpowiada za to ta część kodu.

Kod: Zaznacz cały

ul a:link, ul a:visited {
background: #000 url("tlo.gif") repeat-x center;
color: #fff;
}
ul a:hover{
background-color: #800;
background-image: url("tlo2.gif");
} 
adus10 pisze: 2. Jeżeli ktoś mógłby mi powiedzieć, która linijka odpowiada za różną szerokość przycisków.
W tym kodzie za szerokość przycisków odpowiadają obrazki tła:

Kod: Zaznacz cały

    background: url("zakladka.gif") no-repeat left top; 

Kod: Zaznacz cały

    background: url("zakladka2.gif") no-repeat right top; 
W dodatku poniżej tego kodu jest to wyraźnie napisane, kursy trzeba czytać, nie kopiować.
Dla tak przygotowanych grafik, szerokość zakładki nie może przekroczyć 200px. Jeśli spodziewasz się, że może się tutaj znaleźć dłuższy tekst, musisz utworzyć szerszą grafikę zakladka2.gif.
Niě nerwuj hanysa
adus10
Posty: 23
Rejestracja: 04 maja 2011, 16:10:10
Strona na CBA.pl: ReklameX
Płeć: Niewybrana
User Agent: Firefox Windows 1360x1024

Re: Elastyczne menu w css

Post autor: adus10 »

Dzięki za to, że mi wszystko pięknie wytłumaczyłeś. Już rozumiem o co tutaj chodzi. Widocznie nie doczytałem. :ble:
ODPOWIEDZ