Kolorowa tabelka <table> czy <div> [html/css] Opcje

[Axadiw]

Witam,

Zarówno dziś, jak i wczoraj zawracałem głowę paru osobom na irc-u, jak przerobić jedną z moich ramek opartych na tabelach, na "ramkę na div-ach" (za chwilę przykład )

Otóż:
aktualnie tabelka wygląda tak:
http://mir3.9o.pl/katalog/table.php

połączona z 9 elementów, 1,3,7, i 9 to rogi ramki, a 2,4,6 i 8 to fragmenty rozciągające się wraz z przyrostem tekstu w samym środku(5 element w gwoli ścisłości)

Całość sprawuję się całkiem dobrze, poza wyjątkami gdy niektóre fragmenty są przycinane (ramka ta to część większego layoutu, więc jest podawana extremalnym próbom ściskania i rozciągania )

Poza tym wiem, ze strony oparte na tabelkach są gorzej indeksowane przez wyszukiwarki niż te oparte na div-ach

Tak więc zabrałem się do przerabiania ramek na divy (dla ułatwienia eksperymentuje jak widzicie tylko na jednej, oderwanej od reszty, stąd to tło poza brzegami).

Wyniki pracy tutaj: http://mir3.9o.pl/katalog/div.php

Dostałem parę rad od ludzi z irca, a także poradników parę (pare sam znalazłem):
http://kalsey.com/2003/07/rounded_corners_in_css/
http://tutorials.alsacreations.com/cadre/
http://www.sitepoint.com/article/css-round...rs-boxes-curves

lecz opierają się one na innej budowie ramki, niż moja wcześniejsza:
a to dlatego, że są to jednolite ramki, wypełnione kolorem, a ich budowa jest następująca:

4 rogi, w jednym divie, a reszta wypełniona kolorem(odnosząc się do tutoriala z kashley.com)
Co do górnej i dolnej części ramki dostałem podpowiedź, ze można by pociąć od nowa tą tabelkę, i stworzyć obrazek jednego z rogów o wymiarach np 1000x20, a następnie nakładając jeden na drugi, co stworzy jedną całość.

Po pierwsze: po co tworzyć niepotrzebnie (!) tak wielki obrazek(niepotrzebnie zajmuje zbyt dużo miejsca), po drugie, a co jak tabelka będzie miała tekstu na 1500px? to tylko pośrednie rozwiązanie.

Po drugie: jak skleić środkową część tabelki? (jak widzicie na http://mir3.9o.pl/katalog/div.php, udało mi sie połączyć prawy róg, ale co z lewym? jak dam tam <img> to tekst wskakuje akapit niżej, poza tym jak ustalić, aby ten <img> się rozszerzał?)

To jedno rozwiązanie, próbowałem także z właściwościami float i clear:
wszystkie elementy tablicy miały float:left (a po każdych 3 był <br>)
Wyniki tej pracy tutaj: http://mir3.9o.pl/katalog/div_float.php

Wszystko fajnie, ale po wpisaniu tekstu w środek ramka się rozjeżdża. Nie potrafię ustalić zależności między ilością tekstu w elemencie nr 5, a szerokością/wysokością elementów 2,4,6,8.

Jakby mi ktoś uświadomił jak zapisać w css-ie jak zrobić tą tabelkę, tak tak aby była widoczna pod FF/IE/Opera i żeby była dobrze indeksowana byłbym wdzięczny

[Kisiol_Ent]

Boże... lepiej napisz co chcesz osiagnac a nie jakies niewiadomo co.. nic nierozumiem.

Jak zrobic aby sie div rozszerzał w zaleznosci od tekstu w poziomie i pionie?
Tzn we dwie naraz? :/
W pionie to sie sam rozszera, nic niemusisz robic!

[Axadiw]

eh, myslalem, ze dosyć jasno napisałem...
chodzi o ot, ze by div-y 2 i 8 się w poziomie rozszerzały (razem z elementem nr 5), a 4 i 6 w pionie (tez z divem nr 5)

[Zajec]

http://zajec.net/test/axadiw

Trochę mnie tylko przyćmiło i... nie wiem co zrobić, żeby #tabelka miała szerokość wystarczającą do zmieszczenia tekstu, a nie maksymalną :-| Jak się to osiągało?

[Axadiw]

no fajnie, tylko że jak wstawisz teraz pare <br> -ów w miejsce tekstu to tabela nie rozszerzy się w pionie, tylko tekst wskoczy w miejsce krawędzi...

[Zajec]

No wiedziałem, że coś mi się pomotało i źle robię ;-) Już poprawiłem ten przykład.

[Axadiw]

nooo, teraz ślicznie

tylko jak zrobic, zeby sie rozszarzała w miare możliwości
(tzn jakbym wstawił do środka duży obrazek, to żeby się poszerzyła odpowiednio)

Ten post edytował Axadiw 13.02.2007, 18:46:33

[gekon]

http://www.alistapart.com/articles/customcorners/
http://www.alistapart.com/articles/customcorners2/

[Axadiw]

no nie wiem ze ten przykład jest w FAQ nawet, ale to nie jest rozszerzająca się tabela! ma z góry ustaloną wysokość i nie zmienia się w zależności od zawartości.

Wydaje mi sie ze nie obędize się tutaj bez <table>, moze niektorych rzeczy nie da sie osiągnąc samym css-em

[Zajec]

Już poprawiłem i rozmiar się dopasowuje.

Byłoby pięknie, gdyby twórcy Firefoksa poprawki bug brakującej obsługi inline-block wcześniej niż po 8 latach

Na chwilę obecną stosuję mały hack: Firefox bierze sobie display:table, pozostałem przeglądarki inline-block.