 [xhtml][css] listy li - zawartość obok siebie |
  |
| [xhtml][css] listy li - zawartość obok siebie |
 5.02.2008, 15:41:35
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 128 Pomógł: 1 Dołączył: 24.10.2007 Ostrzeżenie: (0%) 
 |
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" Ten post edytował pijanyadmin 5.02.2008, 15:45:44 |
 |
 
|
|
5.02.2008, 15:50:22
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 897 Pomógł: 40 Dołączył: 16.12.2003 Skąd: Warszawa Ostrzeżenie: (0%)
|
100% dla li + margin-right: 0px dla np. div'a z "gatunek"?
-------------------- how many SEO experts does it take to change a light bulb,lightbulb,light,bulb,lamp,lighting,switch,sex,xxx
5-Reasons-why-you-should-NEVER-fix-a-computer-for-free |
|
|
|
|
5.02.2008, 15:57:52
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 255 Pomógł: 16 Dołączył: 4.07.2007 Ostrzeżenie: (0%)
|
display inline ?
|
|
|
|
|
5.02.2008, 16:20:33
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 128 Pomógł: 1 Dołączył: 24.10.2007 Ostrzeżenie: (0%)
|
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. |
|
|
|
|
5.02.2008, 17:46:46
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 93 Pomógł: 5 Dołączył: 15.12.2007 Ostrzeżenie: (0%)
|
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? |
|
|
|
|
5.02.2008, 17:53:43
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 128 Pomógł: 1 Dołączył: 24.10.2007 Ostrzeżenie: (0%)
|
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
Ten post edytował pijanyadmin 5.02.2008, 17:54:10 |
|
|
|
|
5.02.2008, 18:00:53
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 93 Pomógł: 5 Dołączył: 15.12.2007 Ostrzeżenie: (0%)
|
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? |
|
|
|
|
5.02.2008, 18:11:12
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 128 Pomógł: 1 Dołączył: 24.10.2007 Ostrzeżenie: (0%)
|
teraz jest tak:
Kod gra: gatunek czyli efekt został uzyskany, tylko jak gatunek zrobić po prawej stronie Kod gra: gatunek ? |
|
|
|
|
5.02.2008, 18:25:32
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 93 Pomógł: 5 Dołączył: 15.12.2007 Ostrzeżenie: (0%)
|
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ąć. |
|
|
|
|
5.02.2008, 18:47:58
Post
#10
|
|
|
Grupa: Zarejestrowani Postów: 128 Pomógł: 1 Dołączył: 24.10.2007 Ostrzeżenie: (0%)
|
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...
|
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 26.04.2025 - 04:03 |
