Witam.
Jak skonstruowac diva za pomoca styli, żeby uzyskac taką tabelke.
Ważne jest, żeby można było ją poszeżac na wysokosc i szerokosc.

Za pmoca tabelek mógłbynm zrobic coś takiego dosyc szybko, jednak wolalbym tego uniknąc.

Domyślam się, że każdy róg trzeba zapisac w osobnym pliku gif..


Proszę o podpowiedź.
Bede bardzo wdzięczny za wszelką pomoc.
Pozdr.

Najprościej, chociaż nie jestem pewien czy najpoprawniej to zrobić 3 divy, jeden na gorze drugi w środku i trzeci na dole, w górnym wstawiasz obrazek górnych rogów, w środkowym treść a w dolnym obrazek dolnych rogów... ;]


Edit:
Chociaż może lepiej było by na górze 3 divy, w środku 3 i na dole tez 3. Albo na gorze 3, w środku 1 i na dole 3.
Niech wypowie się ktoś bardziej doświadczony ;]

Kilka sposobów
Ja wstawiam obrazki w rogach. (metoda tutaj nazwana "stary dobry img").

Edit:
Tu masz nawet generator (na stronie), który tworzy kod i obrazki wg powyższej metody:
www.roundedcornr.com

kilka linków:
http://forum.php.pl/index.php?showtopic=53660&hl=
http://forum.php.pl/index.php?showtopic=53660&hl=
http://www.cssplay.co.uk/boxes/curves.html

zaokroglac narozniki mozna tez za pomoca ajaxa, tutaj przyklad przy uzyciu mintAjax:
http://mintajax.pl/Przewodnik/Efekty/

nie za pomoca AJAXa ale korzystajac z gotowych frameworkow ktore sa napisane w JS.

Dzięki Chłopaki za odpowiedzi.. bardzo sie przydało szczególnie http://art.webesteem.pl/16/wstd_rounded_corners.php

Jednak jest jeden problem robiw wg pierwszego sposobu "stary dobry img" .
Poytrzebuje jednak ustawic tez obramowanie tego div'a .. i w tym momencie obramowanie wskakuje na plik obrazka...


Próbowałem ustawic parametr z-index tak, aby obrazki img były nad div'em, jednak obramowanie i tak je przykrywa.

Można to jakoś to przeskoczyc?

Hmm... może obramowanie też zrób jako obrazki ;P

tak, tylko, że wtedy nie będe mógł zmieniac szerokosci, albowysokosci w locie..


narazie zrobilem kwadratowe, później pewnie na jakiś pomysł wpadne...

jeśli byś miał stałą szerokość to możesz zrobić tak: wstawiasz obrazek górne rogi + górne obramowanie, jako tło ustawiasz obrazek wysokości 1 px na ktorym jest tło + boczne obramowanie, i ustawiasz repeat tego obrazka na repeat-y. na dole znowu wstawiasz obrazek z dolnymi rogami i dolnym obramowaniem