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

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

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:

<div class="naglowek_zaokraglony">Tytuł</div>

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ą

do góry

On Mon, 09 Aug 2010 20:39:05 +0100, WebCM <w...@g...com> wrote:

> 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:
>
> <div class="naglowek_zaokraglony">Tytuł</div>
>
> Jest to w ogóle możliwe?

W kIEpskich przeglądarkach -- nie. Musisz dorzucić więcej elementów (ew.
skrypt, który je doda).

> CSS 3 raczej odpada, bo nie wszystkie
> przeglądarki wspierają.

W tej chwili wszystkie z wyjątkiem jednej (która w nadchodzącej wersji już
będzie obsługiwać).

--
http://pornel.net
this.author = new Geek("porneL");

do góry

On 2010-08-09 21:39, WebCM wrote:
> 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ą

http://taat.pl/typografia/optymalna_interlinia_wiers
z.html


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

Czyli których własności CSS 3 użyć? Firefox wciąż ma border-radius w
wersji eksperymentalnej. Czy da się tak, by za pomocą CSS wykorzystać
zaokrąglenia z pliku graficznego? Wiem o istnieniu :before i :after,
ale nie ma lepszego wyjścia?

do góry

W dniu 2010-08-10 00:47, WebCM pisze:
> Czyli których własności CSS 3 użyć? Firefox wciąż ma border-radius w
> wersji eksperymentalnej. Czy da się tak, by za pomocą CSS wykorzystać
> zaokrąglenia z pliku graficznego? Wiem o istnieniu :before i :after,
> ale nie ma lepszego wyjścia?

A po co z pliku graficznego? W tej chwili zaokrąglone rogi otrzymasz co
najmniej na Firefoksie, Chrome, Safari i Operze (10.60). Bez kombinacji.
Natomiast jeśli już tak bardzo musisz je mieć, np. w IE, to pozostaje Ci
grafika + nadmiarowe elementy html.

--
Peter

do góry

On 2010-08-10 00:57, Peter May wrote:
> A po co z pliku graficznego? W tej chwili zaokrąglone rogi otrzymasz co
> najmniej na Firefoksie, Chrome, Safari i Operze (10.60). Bez kombinacji.
> Natomiast jeśli już tak bardzo musisz je mieć, np. w IE, to pozostaje Ci
> grafika + nadmiarowe elementy html.

Dla IE są skrypty do robienia zaokrąglonych rogów.


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

W dniu 2010-08-10 18:58, Paweł Piskorz pisze:
> On 2010-08-10 00:57, Peter May wrote:
>> A po co z pliku graficznego? W tej chwili zaokrąglone rogi otrzymasz co
>> najmniej na Firefoksie, Chrome, Safari i Operze (10.60). Bez kombinacji.
>> Natomiast jeśli już tak bardzo musisz je mieć, np. w IE, to pozostaje Ci
>> grafika + nadmiarowe elementy html.
>
> Dla IE są skrypty do robienia zaokrąglonych rogów.

Ale one nic nie dają tylko potrafią "rozwalić" layout. To po prostu parę
div-ów pododawanych i nic więcej.

--
Peter

do góry

IE wraca do łask. Mam nadzieję, że IE 9 w końcu zacznie wyświetlać
strony tak, jak standardy przykazują.

Firefox nadal nie interpretuje border-radius, tylko -moz-border-
radius. Mam śmiecić w kodzie CSS tylko po to, aby W.Cz. Ognisty Lis
zechciał zaokrąglić rogi?

Zostają mi w tej chwili 2 rozwiązania:

1) Strona o stałej szerokości (tylko dla jakiej rozdzielczości?), zaś
nagłówek można opisać za pomocą tagu <h1>, np.

<h1>Jakiś nagłówek</h1>

Plik z tłem dla nagłówka ma już określoną szerokość.

2) Strona o zmiennej szerokości, ale trzeba uwzględnić w kodzie HTML
zaokrąglenia nagłówków, np.

<h1>
<span class="lewy"></span>
Jakiś nagłówek
<span class="prawy"></span>
</h1>

A jeśli nie, to jakie rozwiązanie najlepsze?

do góry

On Tue, 10 Aug 2010 22:13:22 +0100, WebCM <w...@g...com> wrote:

> IE wraca do łask. Mam nadzieję, że IE 9 w końcu zacznie wyświetlać
> strony tak, jak standardy przykazują.
>
> Firefox nadal nie interpretuje border-radius, tylko -moz-border-
> radius. Mam śmiecić w kodzie CSS tylko po to, aby W.Cz. Ognisty Lis
> zechciał zaokrąglić rogi?

Specyfikacja zezwala na "vendor prefix" i dokładnie opisuje jak
przeglądarki mają interpretować eksperymentalne właściwości.

Dwie dodatkowe linijki w CSS (druga dla WebKit) wydają mi się mniejszym
śmieceniem, niż dorzucanie prezentacyjnych elementów i dodatkowych
obrazków.

BTW: to nie jest ognisty list, tylko panda mała.

--
http://pornel.net
this.author = new Geek("porneL");

do góry

Sprawdziłem border-radius. W Firefoksie wyglądają prawie tak samo jak
zaokrąglone narożniki w pliku graficznym. Wydaje mi się, że Mozilla i
Apple/Google powinni udostępnić zaokrąglanie tak jak Opera, a nie pod
prefiksami. Chyba jest już wystarczająco przetestowane.

Zalety:
+ elastyczne zaokrąglenia, które łatwo zmodyfikować w CSS
+ nie ma potrzeby tworzyć plików graficznych z zaokrągleniami
+ stosujemy nowe możliwości przeglądarek
+ brak nadmiarowego kodu HTML

Wady:
- funkcja wciąż eksperymentalna w Firefoksie i Chrome
- nadmiarowy kod w CSS (ze względu na prefiksy)
- starsze przeglądarki nie wyświetlą zaokrągleń (nawet IE 8)

Biorąc pod uwagę zalety, na 80% zdecyduję się się na CSS3.

do góry