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
