Elastyczne menu w css

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

Elastyczne menu w css

Postautor: adus10 » 18 lip 2011, 13:30:41

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:

CodeColon Select All Code

ulul li {
    
displayblock;
    list-
stylenone;
    
margin0;
    
padding0;
}

ul {
    
floatleft;
    
width100%;
    
border-bottom1px solid #365;
    
padding-left20px;
}

ul li {
    
floatleft;
    
backgroundurl("zakladka.gif"no-repeat left top;
    
margin-right5px;
}

ul a:linkul a:visited {
    
text-decorationnone;
    
displayblock;
    
font-weightbold;
    
backgroundurl("zakladka2.gif"no-repeat right top;
    
color#365;
    
padding5px 15px 5px 5px;
    
margin-left10px;
}

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
Reputacja: 33
Lokalizacja: Silesia
Płeć: Mężczyzna
User Agent: Opera Windows 1920x1080
Kontakt:

Re: Elastyczne menu w css

Postautor: LaY » 18 lip 2011, 16:48:30

adus10 WroteColon1. 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.

CodeColon Select All Code


ul a
:linkul a:visited {
background#000 url("tlo.gif") repeat-x center;
color#fff;
}
ul a:hover{
background-color#800;
background-imageurl("tlo2.gif");


adus10 WroteColon2. 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:

CodeColon Select All Code

    backgroundurl("zakladka.gif"no-repeat left top

CodeColon Select All Code

    backgroundurl("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
Reputacja: 0
Strona na CBA.pl: ReklameX
Płeć: Niewybrana
User Agent: Firefox Windows 1360x1024

Re: Elastyczne menu w css

Postautor: adus10 » 22 lip 2011, 21:39:14

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

Wróć do „HTML, CSS”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 1 gość