Vertikální menu a stylování barev

[SpeediParticipant]

Ahoj, řeším teď jeden problém.. Mám vertikální menu a to se řídí podle nějákého stylu.

ul.art-hmenu>li>a

{

position: relative;

display: block;

height: 94px;

cursor: pointer;

text-decoration: none;

color: #4E6983;

padding: 0 12px;

line-height: 94px;

text-align: center;

}



ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after

{

position: absolute;

display: block;

content:' ';

top: 0;

bottom:0;

z-index: -1;

background-image: url('images/menuitem.png');

}

a přemýšlím jak pro každé tlačítko udělat jinou barvu.

Představa je taková že bych udělal několik pozadí a ty bych přidal do stylu. Ale nevím jak to rozdělit aby 1odkaz 1pozadí atd… Díky za nápady.

[adminKeymaster Web]

Pokud používáte vlastní menu, tak každá jeho položka má definovanou vlastní třídu a identifikátor menu-item-ID, který můžete libovolně nastylovat v souboru style.css, např. tedy definovat pro každou položku vlastnost background-image.

Případně můžete ke každé položce menu přidat vlastní třídu s názvem barvy (návod). To je vhodné zejména pokud budete mít více položek se stejnou barvou…

[SpeediParticipant]

Tak jsem zkoušel

.item-20: { color:pink; }

pak přidat podle návodu u každé položky css třídu a v css taky přidal .red { color:red } a bez úzpěchu.

tak nevím co dělám špatně..

[adminKeymaster Web]

.menu-item-20 { color:pink; }

[SpeediParticipant]

Tak ani tohle nepomohlo.. :-(

Přidal jsem do ccs .menu-item-20: { color:pink; }

Zavolal jsem to pink i menu-item-20 ale barva je pořád stejná. Default barvu jsem vyhodil.

Tak nevím, a id je opravdu 20…

[adminKeymaster Web]

To byl jen obecný příklad, který musíte přizpůsobit na svou šablonu :-)

Pro Twenty Eleven mi to funguje např. takto:

#access ul li.menu-item-20 a { color:pink; }

Pokud se stále nezadaří, tak budu potřebovat přístupové údaje (nebo alespoň URL adresu), abych to mohl vyzkoušet konkrétně…

[LukenziParticipant]

na artisteer a ten balast co produkuje je lék !important; Takže bych zkusil

ul li.menu-item-20 { color:pink!important; }

…a nejlépe někde úplně na konec CSS souboru pro jistotu :)

[LearnParticipant]

Prosím pomůže mi někdo? Vidím, že se to tu již řešilo, ale není tu výsledek Potřebuji na stránce

http://www.hanak.bluefile.cz/ udělat různobarevné menu pomocí css. Vyzkoušel jsem už snad všechny možnosti včetně ul li.menu-item-45 { color:#00a74b!­important; } Uměl by mi prosím někdo poradit?

[adminKeymaster Web]

Zapomněli jste možná na odkaz (html a) a !important a ul tam asi ani být nemusí, tedy:

li.menu-item-45 a { color:#00a74b; }

A pokud jde o pozadí, tak by to mělo jít také vcelku jednoduše:

li.menu-item-45 a { background-color: red; }

P.S. Duplicitní dotaz nalezen zde.

[LukenziParticipant]

jak píše admin…výsledek je tady

[adminKeymaster Web]

Tak to tu je i s názorným příkladem :-)

Podle toho zmiňovaného ID 45 (“Kuchyně”) ale soudím, že šlo patrně o levé postranní menu a podle obrázku je to už asi funkční – místo barvy jsou tam ale načítány obrázky v podobě barevného pozadí, což je asi zbytečné…

[LearnParticipant]

Moc děkuji, podařilo se mi to vyřešit stylem pokus – omyl. Výsledek je zde.

li.menu-item-45 a  {

color: #030303 !important;

background-image: url(images/vmenuitem_a.png)!important;

background-repeat: repeat-x;

}

[adminKeymaster Web]

Díky za reakci, ale proč tam používáte ten obrázek? Nestačilo by pouze výše uvedená vlastnost background-color? Nemusíte pak načítat obrázek a zrychlíte tím načítání celého webu. A podle toho, co jsem viděl na webu by celý uvedený zápis stačilo zkrátit na:

li.menu-item-45 a  {

background-image: url(images/vmenuitem_a.png);

}

[Autor]

Příspěvky