Ebben a kis rövid tippben a listák kinézetét tudjuk megformálni az oldalon. Természetesen, ezt is ízlésed szerint formálhatod, de azért van néhány alapbeállítás, amit nem érdemes kihagyni. Nálam egyébként a listák valahogy így néznek ki:

  • 1. listaelem
  • 2. listaelem
  • 3. listaelem

A listákat lehet ponttal és számozással jelölni, ez a kis kód pedig mindkettőre egyszerre fog hatni. Ezt mindenképpen másold be a CSS kódjaid közé:

ul, li{
margin-bottom: 3px;
line-height: 15px;
margin-left: -5px;
}

Most pedig a li listaelemet fogjuk megformálni. Ebben nincs semmi bonyolult, ugyanis csak a li taggel kell megjelölni a CSS-ben a lista egyes elemeit.

li{
list-style-type: none; /*nincs pont*/
margin: 1;
height: 22px;  /*egy elem vastagsága*/
padding-left: 50px; /*elem távolsága a szélétől*/
padding-top: 8px; /*fentről való távolság*/
-moz-border-radius: 15px; /*lekerekítettség mértéke*/
-webkit-border-radius: 15px; /*lekerekítettség mértéke*/
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition:.5s ease-out;
width: 310px; /*elem szélessége*/
font-size: 12px; /*betűméret*/
background: url(images/cimsorback01.png); /*háttér*/
}

li:hover{ /*elem, ha ráviszed az egeret*/
list-style-type: none; /*nincs pont*/
margin: 1;
background: url(images/cimsorback02.png); /*háttér*/
}

Egyedi listákat is létre tudsz hozni, ehhez meg kell nevezni az egyes listatípusok nevét. Például:

li.lista1{
list-style-type: none; /*nincs pont*/
margin: 1;
height: 22px;  /*egy elem vastagsága*/
padding-left: 50px; /*elem távolsága a szélétől*/
padding-top: 8px; /*fentről való távolság*/
-moz-border-radius: 15px; /*lekerekítettség mértéke*/
-webkit-border-radius: 15px; /*lekerekítettség mértéke*/
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition:.5s ease-out;
width: 310px; /*elem szélessége*/
font-size: 12px; /*betűméret*/
background: url(images/cimsorback01.png); /*háttér*/
}

li.lista1:hover{ /*elem, ha ráviszed az egeret*/
list-style-type: none; /*nincs pont*/
margin: 1;
background: url(images/cimsorback02.png); /*háttér*/
}

Ebben az esetben a listába be kell illeszteni class taggel a megfelelő lista elnevezést.

 <ul>
<li class="lista1">1. listaelem</li>
<li class="lista1">2. listaelem</li>
<li class="lista1">3. listaelem</li>
</ul>

Valahogy így működik a dolog, egyébként viszonylag egyszerű. Szimpla CSS ismeretet igényel. Remélem, hasznos volt a segítség.


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *