Autor Zpráva
Anonymní
Profil *
Zdravím, chtěl bych se zeptat jak lze pomocí css udělat, aby se mi u položek v seznamu střídala např. barva jejich jejich pozadí. Děkuju za rady...

příklad: seznam

- (červené pozadí) Lorem Ispsum
- (modré pozadí) Lorem Ispsum
- (červené pozadí) Lorem Ispsum
- (modré pozadí) Lorem Ispsum
- (červené pozadí) Lorem Ispsum
- (modré pozadí) Lorem Ispsum
panther
Profil
Anonymní:
jak lze pomocí css udělat
v CSS lze nadefinovat pozadím třídám. Ty budeš na střídačku přiřazovat PHPčkem, když se ti ten seznam generuje (předpokládám, že ho nepíšeš ručně). To si dohledej, řeší se to na mnoha místech.
kelvin
Profil
li.licha {background:red}
li.suda {background:blue}

<ul>
<li class="licha" >Lorem Ispsum
<li class="suda">Lorem Ispsum
<li class="licha" >Lorem Ispsum
<li class="suda">Lorem Ispsum
<ul>

Dá se zautomatizovat, pokud to vypisuješ skriptem.
Anonymní
Profil *
omlouvám se, špatně jsem se vyjídřil, samozřejmě bych potřeboval vedět jak to zautomatizovat. Je zapotřebí javascript?
panther
Profil
Anonymní:
samozřejmě bych potřeboval vedět jak to zautomatizovat.
hledej. Je toho všude spousta, začni třeba ve FAQ PHP, tam je to taky.
Anonymní
Profil *
ok díky za rady ;)
__construct
Profil
Je tu jedna ďalšia možnosť - asi najjednoduchšia - CSS3 pseudo class :nth-child
problém ale je, že nefunguje v IE8 a starších prehliadačoch ..
Trejpa
Profil
Anonymní:
V CSS 3 se plánuje selektor n-tého potomka. Zatím je to nepoužitelné.
Nepodporuje to Internet Explorer, pro který se stejně musí použít skript.
Také to nepodporují starší verze ostatních prohlížečů. Některé z nich jsou stále dost rozšířené (např. Firefox 3.0.x).
ul li:nth-child(even) { background: red }
ul li:nth-child(odd) { background: blue }


V CSS 2.1 se dá využít selektor sourozence, ale dosti kostrbatě. Internet Explorer 6 to nepodporuje.
ul li { background: red }
ul li+li { background: blue }
ul li+li+li { background: red }
ul li+li+li+li { background: blue }
ul li+li+li+li+li { background: red }
ul li+li+li+li+li+li { background: blue }
ul li+li+li+li+li+li+li { background: red }
ul li+li+li+li+li+li+li+li { background: blue }


Potom zbývá PHP nebo Javascript:
http://wellstyled.com/singlelang.php?lang=cs&page=css-striped-tables.html
http://www.alistapart.com/articles/zebratables/

EDIT: Upraveno.
__construct
Profil
Trejpa:
Zatím je to nepoužitelné
Nesúhlasím .. Nepodporuje to iba Internet Explorer .. a ten sa dá ošidiť nejakým JS .. napr. týmto :
www.css3.info/css3-pseudo-selectors-emulation-in-internet-explorer/
Bubák
Profil
Trejpa:
V CSS 3 se plánuje selektor n-tého potomka. Zatím je to nepoužitelné.
Na konci je tabulka, které prohlížeče tohle umí: http://reference.sitepoint.com/css/pseudoclass-nthchild
Trejpa
Profil
__construct, Bubák:
Ano, nejnovější verze prohlížečů (mimo IE) to umí.
Poupravil jsem svůj předchozí příspěvek.

Nicméně vykašlat se na starší verze prohlížečů bych si já netroufl. Namátkou jsem vytáhl aktuální statistiku jednoho svého webu. Prohlížeč Mozilla Firefox (verze tři a nižší – tedy bez podpory :nth-child) má přes čtyři procenta návštěvníků.

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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

0