PC-HELP.CZ

Ahoj, mohu poprosit o radu, jak udelat odrazkovy seznam, aby měnil pozadí nebo odrážky když na něj najedu. Mohu poprosit jak se to děláte? Staci pomoci hover, nebo musim nějak jinak? Děkuji

na efekt po najetí je hover, takže třeba li:hover
obrázek jako img se pomocí css ale měnit nedá, takže buď jako pozadí, nebo spojit dva img do jednoho a při hoveru ho posunout do jiný pozice, kde bude vidět ten druhej, samozřejmě s overflow hidden na li

Odrážkový seznam má vlastnost list-style-image, takže pomocí :hover to jde dobře, ale takto umístěný obrázek má konstantní svislé umístění, často nevhodné, takže se to beztak řeší jako list-style-type:none a obrázek se vkládá jako background-image. Ale i v tomto případě samozřejmě :hover na změnu funguje.

Děkuji. Ano, list-style-image znám, ale vždy když mám více úrovňový seznam, tak ty odrážky jsou strašně daleko od sebe.
Ještě prosím nevíte jak udělat, aby pozadí odrážky a samotný text měly stejný pozadí. Když dám background pro ul li, tak je samozřejmě jenom odrážka, a když jenom ul tak pak má vše pozadí. Ještě jednou díky
Nechá se taky nastavit tloušťka čáry a případně délka podtržení pro text-decoration: underline?

Pro underline nemůžeš zvětšit šířku... jedině použít border-bottom.

Co se týče obrázků tak použij nějaký takovýto kód:

Kód: Vybrat vše

<style type="text/css">
#menu li > a {
  background-image: url('images/moje_odrazka.png');
  background-repeat: no-repeat;
  background-position: left center;
}
#menu li:hover > a, #menu li:focus > a {
  background-image: url('images/moje_odrazka_hover.png');
}
</style>

<ul id="menu">
 <li><a href="./">Domů</a></li>
 <li><a href="kontakt.html">Kontakt</a></li>
</ul>

Ano děkuji, ale když dám například border-bottom pro a:hover, tak tím je najednou větší blok a při najížedění myši to vždy divně se zvětšuje o to spodní podtržení. Mohu se prosím ještě zeptat, co je znak > mezi #menu li:focus > a? Děkuji

Znak > značí přímého potomka. Když se neuvede žádnej operátor takj e to jakýkoliv zanořený prvek.
Pokud ti to skáče tak nech spodní border o velikosti jakou potřebuješ

Kód: Vybrat vše

#menu li > a {border-bottom-width: 2px; border-bottom-color: transparent;}

a při přejetí jen přidej barvu

Kód: Vybrat vše

#menu li > a {border-bottom-color: red;}

Border se roztahuje po celé délce prvku (včetně paddingu).