Reklama: Jesteś webmasterem ? Zacznij zarabiać KLIKNIJ
Dołącz do grupy

Stwórz profil

Musisz wpisać swoje imię
Musisz wpisać swoje nazwisko
Musisz wpisać poprawny e-mail
Musisz wpisać hasło (min. 8 znaków)
Musisz zaakceptować regulamin

Maja Miarecka 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.
9.10.2011, 13:46
Link do wypowiedziLink | Cytuj

Andrzej Winnicki Frontend Architect,
Developer &
Magician

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 ;)
9.10.2011, 14:57
Link do wypowiedziLink | Cytuj

Rafał Krupiński .koder

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 :)
9.10.2011, 15:05
Link do wypowiedziLink | Cytuj

Andrzej Winnicki Frontend Architect,
Developer &
Magician

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.
9.10.2011, 15:28
Link do wypowiedziLink | Cytuj

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
9.10.2011, 17:01
Link do wypowiedziLink | Cytuj

Maja Miarecka 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.
9.10.2011, 18:21
Link do wypowiedziLink | Cytuj

Andrzej Winnicki Frontend Architect,
Developer &
Magician

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! ;)
9.10.2011, 19:21
Link do wypowiedziLink | Cytuj

Krzysztof Tomasz Jasiak multimedia, grafika,
internet, IT -
chętnie spróbuje
nowy...

Temat: ostylowanie elementu listy - co lepsze?

ano uczy... podobna zabawka może też Wam się przyda
http://jsbin.com/#javascript,html,live
9.10.2011, 22:58
Link do wypowiedziLink | Cytuj

Adam Pawliczek Programista Web
Developer, Devesoft
Software Development
...

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.
10.10.2011, 06:08
Link do wypowiedziLink | Cytuj

Łukasz Kliś Front-end developer

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. ;)
10.10.2011, 08:30
Link do wypowiedziLink | Cytuj

Jarosław P. Hand Coding Service

Temat: ostylowanie elementu listy - co lepsze?

ul:after { content: ""; display: block; overflow: hidden; clear: both; height: 0; } i wtedy bez overflowa
10.10.2011, 09:24
Link do wypowiedziLink | Cytuj

Andrzej Winnicki Frontend Architect,
Developer &
Magician

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 :)
10.10.2011, 11:01
Link do wypowiedziLink | Cytuj

Łukasz Kliś Front-end developer

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
10.10.2011, 11:02
Link do wypowiedziLink | Cytuj

Rafał Krupiński .koder

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/
10.10.2011, 11:41
Link do wypowiedziLink | Cytuj

Piotr L. projektowanie user
experience,
interakcji,
architektura i...

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
10.10.2011, 15:31
Link do wypowiedziLink | Cytuj

Oskar Wróbel Front-End Developer,
Allegro.pl

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ć :)
10.10.2011, 15:34
Link do wypowiedziLink | Cytuj
« Wróć do tematów
Odpowiedz
Dołącz do grupy



Wyślij zaproszenie do

Anuluj