[HTML][CSS] Zaokrąglenie rogów, a procentowe rozciągnięcie obiektów <div> Opcje

[WebCM]

Niektóre elementy <div> (np. kontener na newsy, menu) mają zaokrąglone rogi. Popatrzmy na przykład:

[HTML] pobierz, plaintext 
<div class="naglowek">
  <span class="lewy_naroznik"></span>
  Jakiś tam tytuł
  <span class="prawy_naroznik"></span>
</div>
 
<div class="wlasciwa_czesc_divu">
  <p>Jakiś tam bardzo długi tekst - news, artykuł lub cokolwiek</p>
</div>
 
<div class="zakonczenie_boksu"></div>
[HTML] pobierz, plaintext 

W powyższym przykładzie nagłówek składa się z 3 części: lewego narożnika, środka i prawego narożnika. Takie rozwiązanie pozwala na zastosowanie długości procentowej - można dowolnie rozciągnąć nagłówek. Niestety, kod HTML zajmuje więcej miejsca i nie jest uniwersalny.

Popatrzmy jeszcze na stopkę - zakończenie boksu. W przykładzie może ona mieć tylko stałą szerokość. Ustalenie procentowej zawartości spowoduje deformację, bo 1 plik graficzny zawiera już narożniki.

Poszukuję takiego rozwiązania, aby dało się dowolnie rozszerzać nagłówek i stopkę, ale nie wymagało to nadmiaru kodu. Najlepiej, by wystarczył jeden wpis:

[HTML] pobierz, plaintext 
<div class="naglowek_zaokraglony">Tytuł</div>
[HTML] pobierz, plaintext 

Jest to w ogóle możliwe? CSS 3 raczej odpada, bo nie wszystkie przeglądarki wspierają.

Co jest lepsze dla użytkownika?

1) Szerokość dostosowana do szerokości przeglądarki
2) Stała szerokość - ale trzeba wybrać 1024x768 albo wyższą

Ten post edytował WebCM 9.08.2010, 20:00:56

[kufalo]

3. IE i tak powiedziało, że nie wprowadzi CSS3 do swojej przeglądarki ... wiadomo dlaczego .

Nie prawda. Nie to zebym byl zwolennikiem IE, ale zainstaluj sobie IE9 Preview 4. Niebawem inne przegladarki beda mialy problemy z utrzymaniem "wladzy".

http://samples.msdn.microsoft.com/ietestcenter/
To co tu podaja to wszystko prawda.
Dodatkowo 95 punktow w ACID3 (w wersji finalnej bedzie zapewne 100) oraz IE szybszy od FF w Sunspider (prawie tyle co Chrome).

--------

Jezeli chodzi o zaokraglanie rogow to wystarczy:
border-radius oraz -moz-border-radius
i we wszystkich przegladarkach w najnowszych wersjach (konqueror, safari, chrome, opera, firefox) oraz niebawem w IE9 dziala.

- funkcja wciąż eksperymentalna w Firefoksie i Chrome (tzn. trzeba stosować prefiksy)

W Chrome 5, Safari 5 juz nie jest eksperymentalna.

Ten post edytował kufalo 12.08.2010, 10:29:50