Witam.

Mam oto i taki problem. Poniżej przedstawiam obiekt którym się zajmuję.



I teraz chcę tak go ostylować w css by:

• tło było rozciągane w zależności od ilości tesktu,
• był użyty aby atrybut a (<a href="#">Strona główna</a>).

Mam zrobione tak na tej stronie: Hassist lecz atrybut a jest wsadzony w sekcję <li></li> i tam ładnie można nimi pomanewrować. Zaś gdy pozostaje sam atrybut a to nic nie idzie z tym zrobić....

Z góry dziękuję

Na jednym znaczniku tego nie zrobisz. Musisz mieć "tło główne" czyli lewe zaokrąglenie + długi pasek tła środkowego oraz drugi plik z kończącym zaokrągleniem. Jeśli chcesz w kodzie mieć samo <a> to musisz poprzez JavaScript dodawać do tego elementu np. <span>. W <a> robisz tło główne, a w <span> wstawiasz tło kończące.

Da się zrobić, ale IE6 (IE7 chyba też) może mieć problemy.
Ustawiasz w stylach dla znacznika a display: block. Do tego dochodzi height i ewentualne line-height. Jako tło ustawiasz jednopikselowy obrazek, który sam się "rozciągnie". Zaokrąglenia uzyskujesz przy pomocy border-radius (dla IE z pomocą przychodzi Javascript - http://blog.wilgucki.pl/2010/09/rubensowsk...e-czyli-o.html).

@batman:
Zauważ, że boki przycisku to nie są zwykłe zaokrąglenia. Jest tam też lekka szara poświata (ciemniejsza w środku przycisku), więc border-radius nie załatwi sprawy.

~phpion
Masz na myśli ten gradient? Jeśli tak, to border radius poradzi sobie z nim bez najmniejszego problemu.

Tak, miałem na myśli tą "otoczkę". Jeśli faktycznie jest tak jak piszesz (a pewnie wiesz co piszesz) to przynajmniej dowiedziałem się czegoś nowego

Border radius dobrze radzi sobie z gradientami. Fx, Chrome i Opera poprawnie wyświetlają zaokrąglone rogi. Do IE trzeba użyć javascript. O ile dobrze pamiętam, to w IE6 może być problem z wylewaniem się tła poza zaokrąglone rogi.

Ok dzięki wszytskim za wypowiedzi. Niedługo pokażę jaki efekt powstanie z sposobu który napisał: batman

Poprawiony projekt

Zmiany możecie zauważyć pod CZYTAJ WIĘCEJ.

Grafika mogłaby nawet tak zostać

Tylko jak zniwelować by atrybut a nie osiągał szerokości 100% boxu w którym się znajduje....

Ustaw dla tego znacznika float: left i odpowiedni padding-right. Prawdopodobnie w IE6 będziesz musiał podać szerokość.

Ok gotowe Dzięki wielkie. A czy da się jeszcze te zaokrąglenia jakoś "podrasować"...

Poniżej kod tego elementu.

Niestety nie da się tego bardziej podrasować. Możesz jeszcze pokusić się o dodanie ramki (border) w kolorze zbliżonym do koloru tła i pokombinować z różnymi stylami ramki, np inset, outset, itp.

Gdybyś mógł olać stare przeglądarki, to mógłbyś jeszcze pobawić się z pseudoklasami :before i :after. Tam jako tło ustawiałbyś owe obrazki, a jako tło elementu wielokrotnie powtarzany w poziomie pasek. Miałbyś więc tylko w CSS:

[CSS] pobierz, plaintext 
a.klasa:before {
background: url(sciezka_do_lewego_zaokrąglenia) transparent 0 0 no-repeat;
}
a.klasa:after {
background: url(sciezka_do_prawego_zaokrąglenia) transparent 0 0 no-repeat;
}
a.klasa {
background: url(sciezka_do_paska_srodka) transparent repeat-x;
}
[CSS] pobierz, plaintext 

i drobne zmiany w atrybutach display, width, height, margin i padding, zależnie gdzie to miało by być na stronie i w jakiej konfiguracji użyte. Wywołanie zaś byłoby w postaci:
<a class="klasa" href="adres">Link</a>
czyli mniej więcej o co Ci chodzi. Niestety sam tego z racji niekompatybilności jeszcze nie używam. Stąd mogę mieć błędy pewne w tym co podałem. Na bank jednak w necie coś na ten temat powinno być szerzej opisane.

Ok lecz atrybuty :befor i after są mniej kompatybilne z przeglądarkami niż border radius I chciałem też uzyskać efekt znacznika "a" bez niepotrzebnych klas.

A czym szkodzi zamiast definicji i wpisania klasy podać jego umiejscowienie w hierarchii? Ja użyłem jedynie a.klasa by było uniwersalniejsze. Jeśli zrobiłbym tak jak Ty div.box a to też nie powinno być problemu. Co do zaś reszty, czyli interpretacji przez przeglądarki :after i :before to masz rację. Z tym, że pełna kompatybilność radiusa może być osiągnięta jedynie poprzez jednoczesne użycie własnych atrybutów CSS przeglądarek, a więc: border-radius, -moz-border-radius, -webkit-border-radius (dla starszych wersji webkita) - khtml-border-radius, -o-border-radius Z tym ostatnim są małe jaja, ponieważ Opera miała kiedyś obsługę zaokrągleń poprzez to co podałem, potem na kilka wersji ją usunęła całkowicie, a po jakimś czasie znów przywróciła w wersji border-radius (czyli już bez -o). Ogólnie trzeba uważać z tym jaką wersją jakiej przeglądarki oglądamy. Ogólnie zerknij sobie tu: http://csshover.pl/css/css-circles-czyli-r...-border-radius/