Změna velikosti písma

Drobečková navigace

CSS blog > Použití obrázku v menu

Použití obrázku v menu



Návod pro použití ikonky namísto textu v menu:

CSS horní menu

#ipotopmenu ul.topmenulevel1 li#ipomenuXXXXXX a {
    background: url("image.php?nid=xxx&oid=xxx") no-repeat scroll left top transparent;
    text-indent: -2000em;
    width: xx;
    height: xx;
    padding: xx;
}

 

CSS levé menu

#ipomenu ul li#ipomenuXXXXX a {
background: url("image.php?nid=xxx&oid=xxx") no-repeat scroll left top transparent;
 text-indent: -2000em;
    width: xx;
>     height: xx;
    padding: xx;
}

Text-indent odsune text mimo a zanechá pozadí na místě prvku. Podle toho jak budete mít upravený obrázek můžete i upravit pozici vykreslení obrázku na pozadí položky menu:

#ipomenu ul li#ipomenuXXXXX a {
background: url("image.php?nid=xxx&oid=xxx") no-repeat scroll 10px 50% transparent;
}

 

Použití

- používá se např. pro nahrazení slova "Úvod" za ikonu domečku.

- ID #ipomenuXXXXX zjistíte jednoduše po nakliknutí položky menu ve firebugu

Ukázka

http://www.klinikatosa.cz/


Kalendář akcí

Po Út St Čt So Ne
25 26 27 28 29 30 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5