Garth

Jak na vlastní vzhled odrážek seznamů?

Základní vzhled seznamů/listů je ve většině webů příliš strohý a je dobré si dané "odrážky" dostylovat ať již barevností, či dokonce vlastním vzhledem odrážky. Několik způsobů jak toho docílit se dočtete v článku.

1) Stylování tagu "ul" pomocí vlastnosti "list-style-image"
ul{
padding-left: 26px;
list-style-image:url("../../img/ic-odrazka.png")
}



2) Stylování tagu "li" pomocí atributu "background-image"
ul{
  padding-left: 0px;
}
li{
  padding-left: 26px;
  background-position: left 4px;
  background-repeat: no-repeat;
  background-image: url("../../img/ic-odrazka.png");
}



Obě řešení fungují, ale nastane u nich problém při víceúrovňových seznamech jako například:
  • one
  • two
    • one
    • two
    • one1
    • two2
  • next

Zde se stane, že u prvního řádku vnořeného seznamu se nám zobrazí dvě odrážky vedle sebe. Proč? První odrážka je z hlavního seznamu respektive jeho 3.řádku a druhá odrážka je z vnořeného seznamu respektive jeho prvního řádku.
Jak tento problém vyřešit? Jsou 2 cesty (obě vychází z výše zmíněného stylovní tagu li pomocí "background-image"), kde každá má své pro a proti.

1) úprava HTML
//CSS cast
ul {
  list-style: none;
}
ul li > span {
  display: block;
  padding-left: 26px;
  list-style-type: none;
  background-position: left 4px;
  background-repeat: no-repeat;
  background-image: url("../../img/ic-odrazka.png");
}

//HTML cast
  • one
  • two
    • one
    • two
    • one1
    • two2
  • next

Pro:
- Nepotřebujete Javascript
Proti:
- Pokud máte u webu administraci, tak bez použití Javascriptu nedokážete zajistit, že Vám uživatelé budou vkládat do každého tagu "li" tag "span".


2) Využití jQuery
//CSS cast
   ul{
      padding-left: 0px;
    }
    li{
      padding-left: 26px;
      list-style-type: none;
      background-position: left 4px;
      background-repeat: no-repeat;
      background-image: url("../../img/ic-odrazka.png");
    }
li ul li{ /*druha uroven seznami*/
      background-image: url("../../img/ic-odrazka-2.png");
}
li ul li ul li{ /*treti uroven seznami*/
      background-image: url("../../img/ic-odrazka-3.png");
}
li.has-list {
  background: none;
}

//jQuery cast
$(function() {
  $('ul li:has("ul")').addClass('has-list');
});

//HTML cast
  • one
  • two
    • one
    • two
    • one1
    • two2
  • next

Pro:
- Dynamické řešení, které funguje vždy.
Proti:
- Než zareaguje Javascript tak lze pár milisekund vidět 2 obrázky u sebe.
- Použití Javascriptu.

Ukázka ralizace na JSFiddle zde

<< zpět




Nejnovější články

Jak udělat stín bloku pouze na jedné straně?

CSS - Úvod do CSS

Jak detekovat klik na tlačítka myšy?

JavaScript - Úvod do JavaScriptu

Jak udělat odkaz na celý řádek tabulky?

JavaScript - Příklady v JavaScriptu

Jak zrušit tečky kolem odkazu?

CSS - Základy CSS

Jak fungují lomítka a tečky v url adrese?

(x) HTML - Úvod do HTML