GoldenLine
Zaloguj się
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: ostylowanie elementu listy - co lepsze?

Zalozmy ze mamy poziome menu. Wiadomo robi sie je lista nieuporzadkowana. By default elementy wyswietlaja sie jeden pod drugim. Zeby ulozyc je obok siebie zawsze uzywalam display: inline; jednak w wiekszosci tutoriali i porad jest uzyte float: left/right;. Osobiscie nie lubie float, bo w zaleznosci od tego czym jest element otoczony,zdarza sie, ze trzeba uzywac wlasciwosci clear, zeby reszta layoutu wyswietlala sie poprawnie.

Bede wdzieczna za info, co jest lepsze, bardziej zgodne ze standardami w tej sytuacji.
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

float left ;) i tak, trzeba potem zrobic clear'a. Naturalna sprawa.
Co do standardow, obydwa sa zgodne, kwestia tego z czym sie czujemy lepiej. Ale z tego co pamietam, IE mialo glupie problemy jak sie robilo inline (divy zdaje sie), i robilo spacje, ktora trzeba bylo w dziwne sposoby usuwac.

Jskis czas temu walczylem z menu poziomym, ktore mialo miec dynamiczne wielkosci, zaleznie od jezyka, po wielu kombinacjach, CSSowych i JSowych, skonczylem z najzwyklejsza na swiecie TABELKA, ktora jako jedyna dziala jak trzeba i robila to, co miala robic ;)
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

Andrzej Winnicki:
float left ;) i tak, trzeba potem zrobic clear'a. Naturalna sprawa.

A jeśl elementy menu muszą być wyśrodkowane, jak tekst? Trzeba się przeprosić z inline (ew. inline-block);
Co do standardow, obydwa sa zgodne, kwestia tego z czym sie czujemy lepiej. Ale z tego co pamietam, IE mialo glupie problemy jak sie robilo inline (divy zdaje sie), i robilo spacje, ktora trzeba bylo w dziwne sposoby usuwac.

Np wypluwać html'a bez białych znaków pomiędzy elementami listy.

Jskis czas temu walczylem z menu poziomym, ktore mialo miec dynamiczne wielkosci, zaleznie od jezyka, po wielu kombinacjach, CSSowych i JSowych, skonczylem z najzwyklejsza na swiecie TABELKA, ktora jako jedyna dziala jak trzeba i robila to, co miala robic ;)

Faaak :)
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

rafał krupiński:
IE nie wie co to jest inline-block, niestety.
A float vs inline vs tabela vs cokolwiek innego, to tylko i wylacznie kwestia potrzeb. Nie mozna powiedziec ze float bedzie uniwersalny do wszystkiego co chcemy zrobic. norma.
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

Znaczy sie jeszcze jest inna opcja jak używasz float a nie chcesz po nim dawać kolejnego elementu, to jeszcze możne elementowi nadrzędnemu nadać overflow: hidden;

http://jsfiddle.net/EpABs/Michał Szaniewski edytował(a) ten post dnia 09.10.11 o godzinie 17:02
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: ostylowanie elementu listy - co lepsze?

No dobra, ale podsumowujac w uzywaniu display nie ma nic zlego i to w sumie kwestia potrzeb/przyzwyczajen a nie jakis zasad, o ktorych nie wiem.
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

Michał Szaniewski:
Znaczy sie jeszcze jest inna opcja jak używasz float a nie chcesz po nim dawać kolejnego elementu, to jeszcze możne elementowi nadrzędnemu nadać overflow: hidden;

http://jsfiddle.net/EpABs/

Czlowiek sie uczy cale zycie! ;)
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

ano uczy... podobna zabawka może też Wam się przyda
http://jsbin.com/#javascript,html,live
Link do wypowiedziLink
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: ostylowanie elementu listy - co lepsze?

Andrzej Winnicki:
IE nie wie co to jest inline-block, niestety.
Wie, ale nie do końca:
http://foohack.com/2007/11/cross-browser-support-for-i...

Inline-block jest zdecydowanie bezpieczniejsze i robi mniej problemów niż float.
Link do wypowiedziLink
Łukasz Kliś

Łukasz Kliś Fullstack Engineer @
Luko

Temat: ostylowanie elementu listy - co lepsze?

Michał Szaniewski:
Znaczy sie jeszcze jest inna opcja jak używasz float a nie chcesz po nim dawać kolejnego elementu, to jeszcze możne elementowi nadrzędnemu nadać overflow: hidden;

http://jsfiddle.net/EpABs/

Wszystko fajnie dopóki nie musisz robić nawigacji z dropdownami. ;)
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

ul:after { content: ""; display: block; overflow: hidden; clear: both; height: 0; } i wtedy bez overflowa
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

Jarosław P.:
ul:after { content: ""; display: block; overflow: hidden; clear: both; height: 0; } i wtedy bez overflowa
I sie zaczyna jazda bo IE6 i IE7 nie wie co to :after :)
Link do wypowiedziLink
Łukasz Kliś

Łukasz Kliś Fullstack Engineer @
Luko

Temat: ostylowanie elementu listy - co lepsze?

Andrzej Winnicki:
Jarosław P.:
ul:after { content: ""; display: block; overflow: hidden; clear: both; height: 0; } i wtedy bez overflowa
I sie zaczyna jazda bo IE6 i IE7 nie wie co to :after :)

Od czego to mamy IE8.js? :D
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

Andrzej Winnicki:
Jarosław P.:
ul:after { content: ""; display: block; overflow: hidden; clear: both; height: 0; } i wtedy bez overflowa
I sie zaczyna jazda bo IE6 i IE7 nie wie co to :after :)


http://nicolasgallagher.com/micro-clearfix-hack/
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

Łukasz Kliś:
Andrzej Winnicki:
Jarosław P.:
ul:after { content: ""; display: block; overflow: hidden; clear: both; height: 0; } i wtedy bez overflowa
I sie zaczyna jazda bo IE6 i IE7 nie wie co to :after :)

Od czego to mamy IE8.js? :D

Ale po co ? Wystarczy ów overflow: hidden elementu UL o którym wspomniał Michał Szaniewski a LI floatujemy i problem z głowy. Z tego co pamiętam, to, żeby overflow: hidden: działał w IE6 to potrzeba nadać elementowi UL hasLayout (np. ustawiając mu szerokość - blok menu zajmuje zazwyczaj i tak całą szerokość strony). UL {overflow: hidden; } UL LI { float: left; } działa poprawnie we wszystkich znanych mi przeglądarkach.Piotr L. edytował(a) ten post dnia 10.10.11 o godzinie 15:31
Link do wypowiedziLink

konto usunięte

Temat: ostylowanie elementu listy - co lepsze?

Moim zdaniem powinno się używać display: inline-block - dokładnie po to, to powstało :)
Jak zależy komuś na IE <= 7 to może dla tej przeglądarki dać float.
Clearowanie za pomocą overflow: hidden, ewentualnie jak pozycjonujemy coś absolutnie to jakiś clearfix z :after

clear: left/right/both to ostateczność, ale staram się robić wszystko, żeby go nie stosować :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Ostylowanie rozwijalnej lis...




Wyślij zaproszenie do
Anuluj