Forum PHP.pl > [xhtml][css] listy li - zawartość obok siebie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [xhtml][css] listy li - zawartość obok siebie

pijanyadmin

5.02.2008, 15:41:35

zazwyczaj lista wygląda tak:

Kod

<ul>
<li><a href="#">gra:</a></li>
        <li><a href="#">cena: </a></li>
        <li><a href="#">ilosc: </a></li>
        </ul>

oczywiście jest to ostylowane w css itp. tylko jak można zrobić aby lista była wyświetlana w ten sposób:

Kod

<li><a href="#">gra:</a> gatunek</li>

biorąc pod uwage fakt iż cała lista jest "with:100%;" aby "gra" była po lewej, a gatunek po prawej... float ? tylko że wtedy "gatunek" znajdzie się pod spodem w "cena"

czachor

5.02.2008, 15:50:22

100% dla li + margin-right: 0px dla np. div'a z "gatunek"?

koderrr

5.02.2008, 15:57:52

display inline ?

pijanyadmin

5.02.2008, 16:20:33

Kod

.gramenu{
width: auto;
border-top: 1px solid #e3e3e4;
border-left: 1px solid #e3e3e4;
border-right: 1px solid #e3e3e4;
}

.gramenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.gramenu li{
padding: 0;
margin: 0;
width: 100%;
border-bottom: 1px solid #e3e3e4;
}

.gramenu a{

display: block;
width: 100%;
color: #595959;
text-decoration: none;
border-bottom: 1px solid #e3e3e4;
}

.gramenu a:hover{
background-color: #F8FBBD;
color: black;
}
.prawy{
float: right;
margin-right: 0px;

}

Kod

<div class="gramenu">
        <ul>
        <li><a href="#">gra: </a><div class="prawy">gatunek</div></li>
        <li><a href="#">gra </a><div class="prawy">gatunek</div></li>
        <li><a href="#">cos</a></li>
        <li><a href="#">cos2</a></li>
        </ul>
</div>

problrm jest z:

Kod

.gramenu a{

display: block;
width: 100%;
color: #595959;
text-decoration: none;
border-bottom: 1px solid #e3e3e4;
}

w takiej formie "gatunek" spada do drugiego <li> jaki jest pod spodem, gdy usune "display: block" wyświetlanie jest dobrze, tylko brak już zaznaczenia po najechaniu na liste.

charlie-cherry

5.02.2008, 17:46:46

Nie jestem pewnien czy dobrze zrozumiałem twoje intecje, ale ja był wyrzucił tego diva z klasą .prawy i wstawił tam <span>, czyli:

Kod

<li><a href="#">gra: </a><span>gatunek</span></li>

Klasę do span możesz dodać, aby ustalić marginesy i co tam chcesz, ale nie dodawaj już floata.

Czy teraz działa?

pijanyadmin

5.02.2008, 17:53:43

kombinowałem już z tym i jeśli jest tak:

Kod

<li><a href="#">gra: </a><span class="prawy">gatunek</span></li>

Kod

.prawy{
margin: 0px;
padding: 0px;
background-color: #F8FBBD;
}

to efekt jest taki

Kod

gra
gatunek

a chce uzystać taki efekt listy:

Kod

gra gatunek

charlie-cherry

5.02.2008, 18:00:53

No to napisz:

Kod

.gramenu ul li a {
color: #595959;
text-decoration: none;
border-bottom: 1px solid #e3e3e4;}

Zastąp tym .gramenu a

I jak teraz?

pijanyadmin

5.02.2008, 18:11:12

teraz jest tak:

Kod

gra: gatunek

czyli efekt został uzyskany, tylko jak gatunek zrobić po prawej stronie

Kod

gra: gatunek

charlie-cherry

5.02.2008, 18:25:32

Zależy jak bardzo ma być odległy, ale można np. nadać padding lub margin elementowi prawy:

Kod

padding: 0 0 0 300px;

Z tym, że można też użyć procentów, no i zobacz czy nie lepiej zrobić to w margin (nie wiem jaki efekt kolorystyczny chcesz osiągnąć.

pijanyadmin

5.02.2008, 18:47:58

heh, to nie jest takie proste... przy innych rozdzielczościach rozwala sie cały układ listy, tak samo jest przy zmianie wielkosci okna przegladarki... chyba że to zrobie na divach które imituja tabele... ale wtedy IE sobie z tym nie poradzi...

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.