GoldenLine
Zaloguj się
Piotr Rorot

Piotr Rorot Projektant grafiki i
stron internetowych

Temat: layout z tabelka czy bez tabelki?

Oczywiście bez tabelki! Każdy z nas wie dlaczego.

Tylko czy aby na pewno da się stworzyć "elastyczny" layout z takimi możliwościami jakie dają tabelki? Przy czym otrzymać dokładnie ten sam wynik w normalnych przeglądarkach oraz IE6, albo przynajmniej IE7.
Przez elastyczny mam na myśli dostosowujący się do szerokości okna.

Dziś powrócił do mnie ten temat jak bumerang i bardzo długo próbowałem osiągnąć cel bez pożądanego skutku. O ile w normalnych przeglądarkach sukces był tuż za rogiem IE się buntował.

Przygotowałem przykładową stronkę z jedną tabelką:
http://crimsonorder.freepgs.com/tabelki.html
w nadziei, że ktoś wie jak osiągnąć identyczny efekt (także we wspomnianym IE), ale bez stosowania tabelki.

Jeśli możecie, pomóżcie.

Wybaczcie za inline css.
Link do wypowiedziLink

konto usunięte

Temat: layout z tabelka czy bez tabelki?

Piotr Rorot:

wybierz co potrzebujesz

http://www.code-sucks.com/css%20layouts/faux-css-layouts/
http://www.thenoodleincident.com/tutorials/box_lesson/...
http://www.cssplay.co.uk/layouts/three-column-layouts
http://www.pagecolumn.com/index.htm
http://www.maxdesign.com.au/articles/css-layouts/
http://www.cssplay.co.uk/layouts/
Link do wypowiedziLink

konto usunięte

Temat: layout z tabelka czy bez tabelki?

To co akurat chcesz stworzyc mocna bez tabelki...
Sam zwykle robie wszystko na CSSach, ale to nie znaczy ze tabelki sa fuj i sie ich nie uzywa. Jezeli masz dane, ktore trzeba przedstawic w formie tabelki - to wlasnie po to tabelka jest i sprawdzi sie lepiej niz pisanie tego samego na divach.
Link do wypowiedziLink
Dariusz Sikorski

Dariusz Sikorski Front-End Web
Developer, Ux/Ui
Designer

Temat: layout z tabelka czy bez tabelki?

Hej Piotrek
tak powinien wyglądać Twój layout po pocięciu w CSS'ie (IE7+):
http://www.dariuszsikorski.pl/hosting/published/fluid....

Z tabelkami jest dokładnie jak napisał Andrzej
- dla danych tabelarycznych w contencie nadal ich używamy i nie ma się czego wstydzić,
- do opisu samego layoutu wyłącznie DIV'y i CSS. Jeśli jesteś bardzo przywiązany do tabelek, poczytaj o Gridach CSS, myślę, że będziesz zadowolony :)
Link do wypowiedziLink

konto usunięte

Temat: layout z tabelka czy bez tabelki?

od wielu lat stosuje tabele, oczywiscie do rzeczy ktore tego wymagaja. i jak ktos napisal powyzej nie ma sie czego wstydzic lecz byc dumnym ze potrafi sie to w odpowiednim momencie/zadaniu rozroznic/wykorzystac. za pomoca css tabela moze byc "piekna". a jak ktos uparcie stosuje divus szmiwus do danych tabelarycznych , no cóż powodzenia :)
Link do wypowiedziLink
Piotr Rorot

Piotr Rorot Projektant grafiki i
stron internetowych

Temat: layout z tabelka czy bez tabelki?

Dzięki za rady,
Darek, świetny layout. Przede wszystkim dzięki za:
width:expression(document.body.clientWidth > 1200? "1200px": "auto" );
specjalnie dla IE nie czytającego max-width, min-width.

jednakże są róznice/problemy:
1. W normalnej przeglądarce: (to nie dobrze, że obrazek zostaje ucięty. To treść z prawej strony mogła by tracić na szerokości, w momencie gdy obrazek miałby zostać ucięty)

Obrazek


W IE7 trochę gorszy efekt
IE
Obrazek

W IE7 przy niektórych wartościach szerokości
IE-wide
Obrazek


2. Rozmieszczenie elementu na środku w pionie.
W tabelce vertical-align:middle; działa świetnie.
Jak nie mamy tabelki i wiemy, że wysokość elementu jest zawsze taka sama, wtedy można stosować marginesy 50%, a potem przenieść element o połowe jego wysokości w odpowiednim kierunku, ale jak wysokośc elementów w tym boksie jest różna, to już mamy problem.

Jeśli mamy do dyspozycji taką konstrukcje:
<div class="box">
<div class="box-inner">
<img />
</div>
</div>
Wtedy .box może być display:table;
a .box-inner display:table-cell; i wtedy vertical-align:middle; zadziała.
czasem nasuwa się pytanie dlaczego by od razu nie wystartować z tabelką zamiast symulować ją w cssie.

O gridach muszę jeszcze poczytać...
Link do wypowiedziLink
Dariusz Sikorski

Dariusz Sikorski Front-End Web
Developer, Ux/Ui
Designer

Temat: layout z tabelka czy bez tabelki?

hej, miło, że mogłem pomóc :)

Problem "ucinania" lewej kolumny przy zmniejszeniu szerokości poniżej 1024px (jak na powyższych screenach) można naprawić przez przypisanie "min-width" dla ".col-left", ale mówimy tutaj już o kompatybilności z rozdzielczoscią rzędu 800x600, która wyszła z użytku. Chyba, że tniesz design pod urządzenia mobilne o szerokości obrazu niższej niż 960px.

Na pionowe centrowanie jest kilka sposobów, można to zrobić również tak jak wspomniałeś, bądź przez pozycjonowanie relatywne, lub JavaScript. Ze swojej strony proponuję z niego po prostu zrezygnować i zmienić nieco design, nie ze względów technicznych lecz estetycznych.

Dlaczego używamy DIV'ów zamiast Tabelek, myślę, że to temat na osobny wątek, mocno zresztą przewałkowany kilka lat temu, więc chyba nie ma sensu do niego wracać.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

layout na jeden ekran




Wyślij zaproszenie do
Anuluj