Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[HTML/CSS] wyrównanie divów i tabel w IE6

Chcesz nauczyć się projektowania funkcjonalnych i dostępnych dla wszystkich serwisów, poznać standardy tworzenia stron WWW? A może masz w tej dziedzinie spore doświadczenie, ktorym chcesz się podzielić z innymi?

[HTML/CSS] wyrównanie divów i tabel w IE6

Post 14.09.2005, 11:09:08

Zaciekawiła mnie dyskusja na temat porównań div do table i że to niby div jest lepszy od table.
Niestety okazuje się że tabele sa niezbędne.
Jak wiadomo większość ludzi korzysta z IE a tutaj nie przewidziano stylu wyświetlania elementów w:
display:inline-block
oraz
display:table

więc jedynym elementem który ma automatycznie ustawiony "display:table" jest tabela.

Jeśli zaś chodzi o display:inline-block to jest on częściowo zastąpiony przez display:inline (bo MOŻNA nadawać wymiary elementom inline).Można użyć text-align aby wyśrodkować poziomo oraz vertical-align aby ustawić je w pionie.Niestety jest problem z vertical-align,bo jest ono trochę inaczej rozumiane niz zwyczajne valign w <TD>,a przy tym często działa błędnie ,a po drugie display:inline powoduje dopasowanie szerokości elementu inline co uniemożliwia wykonanie w jednej chwili dopsowania w pionie i wyrównania do przeciwnego brzegu w poziomie.Tutaj tylko tabela może pomóc.
Nikt świadomy nie będzie tworzył stron działających dobrze tylko pod przeglądarkami innymi od IE.
Więc tabele są niezastąpione w ie,aczkolwiek nie w każdej sytuacji.
floppoza
xx

Posty: 88
Dołączył(a): 27.08.2005
Lokalizacja: Rzeszów

Post 14.09.2005, 12:55:17

i że to niby div jest lepszy od table.

a kto tak powiedział? TABLE ma swoje zadania i DIV ma swoje zadania. Nikt nie mówi o wyższości jednym nad drugim. To Twoja zła interpretacja
Więc tabele są niezastąpione w ie,aczkolwiek nie w każdej sytuacji.

wiele układów da się zrobić bez tabel, ale oczywiście nie wszystko się da. To, że brakuje display: table, display: inline-block nie oznacza jeszcze końca świata. Masz masę innych właściwości, którymi możesz się bawić (męczyć ;P). Obecnie większość korzysta z odpowiednich manipulacji wlaściwością float, padding, margin oraz clear i jakoś wszyscy zyją i czują się dobrze... tylko ty panikujesz
Avatar użytkownikakuku
Rafał Kukawski


…

Posty: 17177
Dołączył(a): 14.04.2002
Lokalizacja: Berlin

Post 16.09.2005, 10:48:14

Jeszcze do niedawna byłem przeciwnikiem używania table a szczególnie ich zagnieżdzania.Czytałem propagandę pewnych forumowiczów na znanym forum.o2
Sprawdziełem do końca i okazuje sie że tabela oferuje niepowtarzalny sposób wyrównywania i nadawania elementom odpowiednich szerokości,wysokości,wyrónań w poziomie(text-align) i w pionie przy czym float przy elementach w tabeli nie unieważnia wyrównania w pionie,bo vertical stoi przy <tr> albo <td> a nie przy elemencie.I to jest właśnie wyświetlanie typu display:table,którego nie ma w IE bo po co?Od tego jest tabela.

Przez kilka dni usilnie próbowałem zrobic coś takiego na divach w display:block oraz display:inline(kiedys też się w to bawiłem).I niestety porażka-NIE DA SIĘ,co oznacza że używanie tabel i ich zagnieżdżanie jest dla IE jest BARDZO uzasadnione.

Nie uzasadnione jest natomiast uzycie tabeli dla:
1)bloków wyrónanych w pionie od góry w każdym układzie(czyli ze zwykłym float).Tu stosujemy <div style="display:block">

2)Dla bloków z vertical-align ale tylko dopasowanych w szerokości i tylko leżących obok siebie.Tu stosujemy <div style="display:inline">

3)Dla połączonych komórek tabeli w nietypowy sposób,służący rozstawieniu komórek tej samej tabeli w niedozwolonych miejscach.Tutaj nie wolno używać komórek tej samej tabeli,lecz porozstawiać wiele różnych elementów w body.

Nieuzasadnione użycie tabeli sprawia nieprzejrzystość i smietnik w kodzie,a i czasem strona się sypie.

Dokładny przepis przedstawiłem na stronie:
http://www.darmoland.pl/andriu/uklady_html

Jest to również ściągą dla mnie podczas projektowania stron ze skomplikowanymi układami.Zaczynam od rozpoznania najbardziej zewnętrznej struktury strony i dopasowuję do niej jeden z układów.Potem zagnieżdżam kolejne podstruktury.
floppoza
xx

Posty: 88
Dołączył(a): 27.08.2005
Lokalizacja: Rzeszów

Post 16.09.2005, 11:31:22

floppoza napisał(a):I to jest właśnie wyświetlanie typu display:table,którego nie ma w IE bo po co?

po to ze IE jest za stare zeby to zrozumiec, jak widze Ty rowniez tego nie rozumiesz...

floppoza napisał(a):... <div style="display:block">

div jest domyslnie elementem blokowym

floppoza napisał(a):... <div style="display:inline">

nie powinno sie zamianiac elementu blokowego w liniowy, od tego jest <span />

floppoza napisał(a):Nieuzasadnione użycie tabeli sprawia nieprzejrzystość i smietnik w kodzie,a i czasem strona się sypie.

to juz zalezy wylacznie od samego kodera i sposobu w jaki porzadkuje kod, jesli nie umie tworzyc stron to pewnie ze mu sie strona posypie...
Pokaż przykład działającego kodu, wrzuć na Dropboxa. Nie masz? Załóż (2GB + 500MB), lub użyj jsFiddle
Avatar użytkownikaVadIT
Posty: 602
Dołączył(a): 13.12.2004
Lokalizacja: Warszawa/Łęczna

Post 16.09.2005, 14:18:03

Widzisz, za całym beztabelkowym układem kryje się pewna Idea. Semantyka kodu gra tutaj dużą rolę. No cóż, sprawę utrudniają przeglądarki, które nadal za słabo interpretują CSS, żeby bezproblemowo wszystko złożyć. Nikt nie będzie cię zmuszał, do rezygnowania z tabelek, bo to twoja strona. To jest normalne, że są zwolennicy tej idei i jej przeciwnicy.
I to jest właśnie wyświetlanie typu display:table,którego nie ma w IE bo po co?Od tego jest tabela.

różnica między <table> a display: table jest ogromna. Jak już wspominałem, całość kryje się w semantyce.

[OT]Dla niektórych, użycie tabelki (żeby sobie pomóc w składaniu) lepsze będzie niż majstrowanie z CSS, bo jeszcze nie opanował tego standardu na tyle, żeby sobie radzić. Wiele osób niestety uważa, że umie CSS, bo wyuczyło się na pamięć wszystkich właściwości, ale prawda jest taka, że wiele z tych osób nie bardzo się orientuje, jak w danej sytuacji dana właściwość zadziała.[/OT]
.. <div style="display:inline">

ja rozumiem, że to stosować jako hack dla IE, bo ogólnie, to ta metoda jest tępiona nawet przez samo W3C, ale gdzieś czytałem, że w ten sposób można w IE naprawić kilka rzeczy.
Avatar użytkownikakuku
Rafał Kukawski


…

Posty: 17177
Dołączył(a): 14.04.2002
Lokalizacja: Berlin

Post 17.09.2005, 13:35:41

poprawiłem link:
http://www.darmoland.pl/andriu/uklady_html.htm

a to tak na początek
tam opisałem gdzie ,co i jak,ale to nie do końca jest tak.
Dzisiaj rano tak dla ćwiczeń bawiłem się w rekonsrukje strony znanego forum(oczywiście w notatniku) ,ale żeby zrobic jak najmniej kodu.I co wyszło:

http://floppoza.host.sk/o2.htm

Były problemy z zawijaniem białych znaków i wyrównywaniem w pionie bo z początku chciałem zrobic z float i na divach ale było źle.Jeszcze poćwiczę na innych stronach.Jak widac wcale nie trzeba nadawać width ani height elementom o nie znanych parametrach.Bo przecież przeglądarka ma to obliczyć a nie ja.
floppoza
xx

Posty: 88
Dołączył(a): 27.08.2005
Lokalizacja: Rzeszów

Post 18.09.2005, 20:07:34

@floppoza - nie wiem, może tak ma być, ale ja mam 404 przy drugim linku.
Suilannon,
Termit
Avatar użytkownikaTermit
Posty: 177
Dołączył(a): 27.09.2003
Lokalizacja: z Gostynia

Post 19.09.2005, 11:30:39

poszukaj coś o box modelu-ciekawe rzeczy piszą.
A tu taki przykład jak amnijszyc ilość kodu:
http://www.darmoland.pl/andriu/o2.htm
ale nie słuchaj głupot marginesach.Sam testowałem i marginesy pionowe dziiałaja inaczej niż poziome i wcale nie da się nimi wyrównac czegokolwiek w pionie do dólu czy do środka.Pozostaje tylko tabela.A waże jest żeby strona działała także pod starszymi przeglądarkami typu IE a nie tylko pod nowymi
floppoza
xx

Posty: 88
Dołączył(a): 27.08.2005
Lokalizacja: Rzeszów

Post 19.09.2005, 21:10:47

no... teraz to mnie rozbawiles... ^^
... nie słuchaj głupot marginesach.Sam testowałem i marginesy pionowe dziiałaja inaczej niż poziome...

zanim przeszedles do testow moze napisalbys poprawny kod ;)
wiesz bardzo dziwne, ale ja na przyklad nie mam problemow z ktorymkolwiek marginesem, a juz troche w tym siedze...

OT: pewnie ze intel ;)
Pokaż przykład działającego kodu, wrzuć na Dropboxa. Nie masz? Załóż (2GB + 500MB), lub użyj jsFiddle
Avatar użytkownikaVadIT
Posty: 602
Dołączył(a): 13.12.2004
Lokalizacja: Warszawa/Łęczna

Post 20.09.2005, 12:31:13

no to gratuluje.
Mam przeglądarkę IE4 i ona tak dziła że ustawienie margin:auto nic nie powoduje a jak w pionie ustawię np.
margin:50% 0
dla jakiegoś elementu np.div
to zawsze robi dziurę na pół ekranu monitora i nie ważne że ten div najduje się wewnątrz jaiegoś elementu o konkretnej wysokosci to dziura musi być.
Żałuję ale ei nie zmienię bo tylko bym se bałaganu narobił a mozilla źle interpretuje(tzn inaczej) kody javascript co mnie wkurza więc muszę zostać prz tabelach.JUż opracowałem sposób idealny na tablech,niedługo tą stronkę walnę na serwer to sobie obejrzysz.
Takich osób jak ja jest wielu więc trzeba się z tym liczyć
floppoza
xx

Posty: 88
Dołączył(a): 27.08.2005
Lokalizacja: Rzeszów

Post 20.09.2005, 12:39:29

Mam przeglądarkę IE4

pewien webmaster w pewnym swoim artykule napisał
This doesn't work in IE4, but IE4 is a dead browser

Przestań się zajmować takimi gratami. Procent ludzi korzystających z IE4 ~= 0%. Jeszcze jestem w stanie zrozumieć jakieś podstawowe wsparcie dla IE5.5, ale dla starszych to już kompletna przesada. To może jeszcze będziemy wspierać NN4 i Mosaica?
Moje wsparcie dla starych przeglądarek polega na tym, że podaję im do wyświetlenia stronę bez arkusza stylów i odpowiednio piszę skrypty, żeby nie próbowały się wykonać na nieodpowiednich browserach, żeby nie wywalały błedów
Żałuję ale ei nie zmienię bo tylko bym se bałaganu narobił a mozilla źle interpretuje(tzn inaczej) kody javascript co mnie wkurza

wiesz, trzeba najpierw wiedzieć co się robi i wiedzieć, które rzeczy należą do standardu ECMA-Script i DOM. To, że Microsoft do swojej przeglądarki wprowadził tysiące rozszerzeń implementacji JS, nie znaczy, że inne muszą te same rozszerzenia koniecznie obsługiwać
Avatar użytkownikakuku
Rafał Kukawski


…

Posty: 17177
Dołączył(a): 14.04.2002
Lokalizacja: Berlin

Post 22.09.2005, 02:14:11

floppoza: z ciekawości właściwie - jak długo jeszcze zamierzasz wspierać IE4?
ffreak
Kamil Trebunia

salsero
salsero

Posty: 1502
Dołączył(a): 03.07.2004
Lokalizacja: Kraków || Dukla

Post 16.12.2005, 18:41:37

Co zrobić żeby ze stronki floppozy:
http://www.darmoland.pl/andriu/uklady_html.htm
te divy z inline działałały poprawnie również pod Firefoxem?
henq
Posty: 14
Dołączył(a): 21.09.2005


Powrót do Standardy sieciowe


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 4 gości

Subskrypcja

Mamy 43456 zarejestrowanych użytkowników.
Najnowszy użytkownik: monzo


Nasi użytkownicy napisali:

  • 909704 wiadomości
  • w 236497 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)