[xhtml] jak skonstruowac zaokrąglone rogi div'a ?, jak pociąc grafike, aby pozwalała na późniejsze poszerzenie tego diva? Opcje

[kukix]

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..
(IMG:http://www.sotech.home.pl/div.gif)

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

Ten post edytował kukix 25.03.2008, 18:51:56

[krzywy36]

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 ;]

Ten post edytował krzywy36 25.03.2008, 19:00:18

[Fantazyn]

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

Ten post edytował Fantazyn 25.03.2008, 19:05:10

[Lejto]

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

[ebnott]

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

Ten post edytował ebnott 25.03.2008, 19:09:34

[AxZx]

zaokroglac narozniki mozna tez za pomoca ajaxa, tutaj przyklad przy uzyciu mintAjax:

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

[kukix]

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?

Ten post edytował kukix 25.03.2008, 22:38:33

[krzywy36]

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

[kukix]

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

tak, tylko, że wtedy nie będe mógł zmieniac szerokosci, albowysokosci w locie.. (IMG:http://forum.php.pl/style_emoticons/default/sciana.gif)


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

[krzywy36]

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)