Moje pytanie dotyczy sytuacji, kiedy chcemy aby jakiś element strony (np.
menu, czy sidebar) miał obrazkową ramkę - przykładem niech będzie kwadrat z
cieniem na wszystkich bokach, czy kwadrat z "podartymi" brzegami.

Rozwiązanie, jakie do tej pory stosowałem to div "nagłówkowy" z górnym
brzegiem jako tło, następnie div "główny" z tłem (repeat-y) i zawartością
strony, a na koniec div "stopkowy" podobny do "nagłówkowego".

Zastanawiam się, czy nie dałoby się tego rozwiązać jakoś z poziomu CSS, bez
wstawiania do HTML tych dwóch dodatkowych div-ów?
--
Michal "Wooyek" Lalik // wooyek na gmail.com // www.wooyek.pl //

do góry

listopad roku pamiętnego 2009, prawdopodobnie 15. Wielka mądrość na
czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Wooyek:

> Moje pytanie dotyczy sytuacji, kiedy chcemy aby jakiś element strony
> (np. menu, czy sidebar) miał obrazkową ramkę - przykładem niech
> będzie kwadrat z cieniem na wszystkich bokach, czy kwadrat z
> "podartymi" brzegami.
>
> Rozwiązanie, jakie do tej pory stosowałem to div "nagłówkowy" z
> górnym brzegiem jako tło, następnie div "główny" z tłem (repeat-y) i
> zawartością strony, a na koniec div "stopkowy" podobny do
> "nagłówkowego".
>
> Zastanawiam się, czy nie dałoby się tego rozwiązać jakoś z poziomu
> CSS, bez wstawiania do HTML tych dwóch dodatkowych div-ów?

Pseudoelementy ::before i ::after.
Można w ten sposób zrobić też zaokraglone rogi dla elementu:
http://virtuelvis.com/gallery/css/rounded/

Tylko jeśli chcesz zachować kompatybilność z pewnymi starymi
przeglądarkami, to w sumie i tak nic nie zrobisz (niby można przez
expressions dodawać kolejne elementy do stylowania, ale prostsze wydaje
mi się stworzenie niesemantycznego HTML-a).
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

do góry

On Sun, 15 Nov 2009 21:39:38 -0000, Wooyek epf.pl> <wooyek> wrote:

> Moje pytanie dotyczy sytuacji, kiedy chcemy aby jakiś element strony
> (np. menu, czy sidebar) miał obrazkową ramkę - przykładem niech będzie
> kwadrat z cieniem na wszystkich bokach, czy kwadrat z "podartymi"
> brzegami.
>
> Rozwiązanie, jakie do tej pory stosowałem to div "nagłówkowy" z górnym
> brzegiem jako tło, następnie div "główny" z tłem (repeat-y) i
> zawartością strony, a na koniec div "stopkowy" podobny do "nagłówkowego".
>
> Zastanawiam się, czy nie dałoby się tego rozwiązać jakoś z poziomu CSS,
> bez wstawiania do HTML tych dwóch dodatkowych div-ów?

Tak, za pomocą border-image, ale to zadziała tylko w Firefoksie 3.1,
Safari 4, Operze 11 i IE 14.

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

do góry