[CSS] Rysunek jako obramowanie

Nie jestem zbyt dobry z css, więc mam pytanie. Chciałbym na swojej stronie zrobić coś podobnego jak tutaj: http://www.portal24h.pl/ Chodzi mi konkretnie o to obramowanie ‘logowania’ czy ‘recenzje gier’, na pewno jest to zrobione z użyciem obrazka, tylko jak?

Mnemonic , proszę bardzo: http://www.kurshtml.boo.pl/css/obramowanie.html

Wszystko bardzo dobrze wytłumaczone :wink:

Nie ma gotowej funkcji (?). Takie obramowanie jest złożone z kilku osobnych teł, ale tutaj wychodzi nam na przeciw CSS3, więcej tutaj:

http://www.css3.info/preview/border-image/

Rozwiązanie z CSS3 jest słabo zaimplementowane w silnikach renderujących :wink:

Mnemonic , wszystko zależy od tego, czy twój pojemnik z zawartością ma mieć szerokość ustawioną na sztywno („fixed”) czy też nie („fluid”). Zakładam, że wykorzystasz to pierwsze, ponieważ jest łatwiejsze do wykonania.

Tworzysz najpierw strukturę 3 pojemników (nazwy klas możesz zmienić w miarę potrzeb):

[/code] Teraz musisz przygotować trzy pliki graficzne: pierwszy będzie zawierał tło ze środka z krawędziami bocznymi (prawą i lewą) – box-bg.gif, drugi tylko krawędź dolną – box-helper-bottom-bg.gif, trzeci tylko krawędź górną – box-helper-top-bg.gif. Formaty plików oraz ich nazwy są oczywiście dowolne. Nastepnie musisz wykorzystać te obrazki jako tła dla poszczególnych pojemników:

[code].box { background: url(box-bg.gif) repeat-y; } .box-helper-bottom { background: url(box-helper-bottom-bg.gif) 0 100% no-repeat; } .box-helper-top { width: 280px; padding: 10px; background: url(box-helper-bottom-top.gif) no-repeat; }

Założyłem, że całkowita szerokość pojemnika powinna wynosić 300 pikseli, oraz powinien on mieć dopełnienie 10 pikseli z każdej strony (stąd właściwość width odpowiednio zmniejszona.

To tyle, w razie problemów – pytaj :wink:

Racja, CSS3 odpala np. Safari i inne egzotyczne browsery, ale trzeba czekać - CSS3 daje już na prawdę bardzo duże mozliwości, ale i tak brakuje mi atrybutu title przez CSS :).

pavobe , Opera świetnie radzi sobie z CSS3 (stary wpis, ale na temat). Poza tym specyfikacja CSS3 nie została jeszcze ukończona i funkcjonuje na zasadzie szkicu.

Selektor atrybutu – jeśli o niego ci chodziło – jest dostępny od CSS2, z tego co pamiętam. Obsługują go wszystkie nowoczesne przeglądarki oraz Interner Explorer od wersji 7.

element[atrybut] { … }

element[atrybut="wartość"] { … }

Oczywiście możliwości jest więcej, a w CSS3 jeszcze więcej :slight_smile:

Ale nie chodzi o stylowanie przez identyfikowanie znaczników z title, ale nadawanie title przez styl.

Przykład:

img < a {

title: "Kliknij, aby powiększyć";

}

Mogłem pomylić dzióbki, ale to tylko przykład :).

Pomyliłeś.

A dynamiczna zmiana atrybutów to domena JavaScript, nie CSS.

EoT, nie o tym jest temat.