Atrybut "a" i jego background Opcje

[pietrov8]

Witam.

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

(IMG:http://img130.imageshack.us/img130/9579/26013177.jpg)

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ę

[phpion]

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.

[batman]

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

[phpion]

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

[batman]

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

[phpion]

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 (IMG:style_emoticons/default/smile.gif)

[batman]

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.

[pietrov8]

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ć (IMG:style_emoticons/default/winksmiley.gif)

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

[batman]

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

[pietrov8]

Ok gotowe (IMG:style_emoticons/default/winksmiley.gif) Dzięki wielkie. A czy da się jeszcze te zaokrąglenia jakoś "podrasować"...

Poniżej kod tego elementu.

Kod

                div.box a{
                    float:left;
                    padding-right:13px;
                    display:block;
                    color:#5d91b5;
                    font-family:Verdana, Geneva, sans-serif;
                    text-transform:uppercase;
                    font-size:12px;
                    height:29px;
                    line-height:29px;
                    text-decoration:none;
                    padding-left:10px;}
                    div.box a:hover{
                        -moz-border-radius: 30px;
                        border-radius: 30px;
                        color:#FFF;
                        background:url(images/bg_a_03.png) repeat-x;}

Ten post edytował pietrov8 6.12.2010, 12:58:16

[batman]

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.

[thek]

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.

[pietrov8]

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

[thek]

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 (IMG:style_emoticons/default/smile.gif) 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/