[CSS]Obrazek Listy (LI) - Pozycjonowanie Opcje

[Damiankossek]

Witam,

Mam listę opartą o LI, zrobiłem sobie obrazek poprzez list-style-image . Wszystko jest ok, z tym że jak wyrównać tekst wobec tego obrazka ? Musze kombinować z wielkością obrazka czy mogę jakoś przesuwać w dół/góre tekst lub obrazek ?

[sunpietro]

lepiej zainteresuj się background dla li - daje to lepsze efekty niż list-style-image i łatwiej go odpowiednio dopasować

[Damiankossek]

Właśnie tak rozwiązałem ten problem Ale dzięki

[elnino17]

Witam
background li działa, ale mam troche inny problem ponieważ chciałbym umieścić ukośny separator w liście i chciałbym żeby był on za obiektem/tekstem a nie z przodu tak jak to jest gdy użyjemy bg li, żeby dzielił listę/menu i nie chce żeby separator był z przodu pierwszej pozycji listy/menu.

[Sephirus]

Może skorzystaj z CSS ":after"

klik!

[elnino17]

Użyłem, firebug go widzi ale w oknie przeglądarki tego nie ma, sepatar w ogóle znikł

Kod

#top .navigation .tlo_menu .navi li:after{background-image: url('separator.png'); background-repeat: no-repeat;}

[Sephirus]

To co jest po :after jest traktowane jako zwykły element HTML toteż musisz nadać mu jakiś width i height - inaczej jest niewidoczny bo nie ma rozmiaru

[elnino17]

Dalej robię coś źle, mój plik PNG(separator) ma wielkość 14x21px więc i takie wartości nadałem, lecz ciągle go nie widzę

Kod

#top .navigation .tlo_menu .navi li { margin-top:15px; padding:0; float:left; width:auto; height:auto; position:relative;}
#top .navigation .tlo_menu .navi li:after {background-image: url('separator.png'); background-repeat: no-repeat; width:14px; height:21px;}

[Sephirus]

dodaj do stylu z "after" jeszcze to

[CSS] pobierz, plaintext 
display:inline-block;
content:"";
[CSS] pobierz, plaintext 

powinno pomóc.

[elnino17]

Dzała wielkie dzięki

Mógłbyś mi jeszcze poradzić co zrobić żeby za ostatnią pozycją mojego menu nie było widać separatora, żeby było: "poz1 / poz2 / poz3" bo treaz mam: "poz1 / poz2 / poz3 /" ?

Ten post edytował elnino17 2.10.2013, 11:20:02

[Sephirus]

Możesz użyć "last-child":

[CSS] pobierz, plaintext 
#top .navigation .tlo_menu .navi li:last-child:after {display:none}
[CSS] pobierz, plaintext 

Ten kod powinien (sprawdź) schować sztuczny element "after" w ostatnim LI

[elnino17]

Wszystko działa jeszcze raz WIELKIE dzięki jesteś Najlepszy