Autor Zpráva
Radim Blaťák
Profil
Mám udělané menu ve kterém mám danou svou odrážku. Když dám ale menu inline, ať se mi zobrazí na řádku, tak se mi odrážka nezobrazuje. Když display:inline zruším, tak tam odrážky jsou, ale menu je pod sebou.

div#h_menu {
    position: absolute;
    top: 140px;
    right: 0px;
    margin: 0px;
    width: 600px;
    padding: 0px;
}
#h_menu ul, #h_menu li {
    list-style-image: URL('zg/odrazka.png');
    display: inline;
        margin: 0px;
    padding: 0px;
  }
jenikkozak
Profil
Radim Blaťák:
Tu odrážku můžeš přidat jako obrázek na pozadí položky.
ALLSSA
Profil
Radim Blaťák:
Pokud máš seznam jako inline prvek, tak se zobrazuje jako řádkový prvek a ten přeci odrážku nemá. Odrážka se bude zobrazovat pouze pokud bude display:list-item; (což je seznam defaultně). Pokud chceš mít seznam inline s obrázkem před textem, tak bych zvolil toto:
//css kód
#h_menu li
{
  display:inline;
  background-image: url(zg/odrazka.png);
  background-repeat:no-repeat;
  padding-left:"šířka obrázku plus odsazení od textu"px;
  height:"výška obrázku";
  line-height:"výška obrázku";
  #padding-top:"nějaký adekvátní";
}
Obrázek bude nalepený k levému hornímu rohu, tudíž doporučuji též nastavit height a line-height jako výšku obrázku.
#padding-top:2px; je tam z důvodu, že v IE8 a starších prohlížečích nefunguje line-height a tudíž bude text nalepen nahoru (této technice se říká css hack)

BTW. Tohle bys ale zjistil i s pomocí googlu nebo zde a zde.
Radim Blaťák
Profil
ALLSSA:
Dík, to pomohlo, super. Ještě se tu ale trápím s jednou věcí, a to s tím, že se mi mezi položkami seznamu přepíná kurzor miši do textového zobrazení. Na samotných položkách mám ruku, což je v pohodě, ale ta změna kurzoru mezi položkami mě štve. Na oddělení položek seznamu používám margin. Asi to bude tím.
panther
Profil
Radim Blaťák:
Na oddělení položek seznamu používám margin. Asi to bude tím.
ano, je to tím. Ručičku máš nad odkazem, ne nad ničím jiným.

Pokud chceš, aby mezery měly také ručičkový kurzor, musejí být součástí odkazu. Podívej se na rozdíl mezi marginem a paddingem.
margin
Profil *
ALLSSA:
Obrázek bude nalepený k levému hornímu rohu
Pozice pozadí jde přesně usadit pomocí background-position.

Radim Blaťák:
Na oddělení položek seznamu používám margin. Asi to bude tím.
Jednak tím, a pokud máš seznam inline (dělá to i inline-block), tak také případné bílé znaky v kódu. Pokud nepotřebuješ mít menu vycentrované a chceš ho mít bez mezer, tak bych doporučil položky menu i odkazy floatovat.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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