Zaokrąglone rogi

[Melixo]

Witam. Robię stronę i chciałbym, aby tło nagłówków h1 miało zaokrąglone rogi. Tło jest grafiką i pociąłem tak by lewe zaokrąglenie było razem ze środkiem, a druga grafika to prawe zaokrąglenie. Gdyby to był div to nie miałbym problemu, niestety w tym przypadku musi to być tło h1 i nie ma innego wyjścia. Widziałem jakieś poradniki o zaokrągleniach z border, ale są one po angielsku i nie wszystko jest dla mnie do końca zrozumiałe. Liczę na waszą pomoc. Pozdrawiam.

[lukasz323]

spróbuje strzelić na background .gif po prostu nie jest to ciężkie tylko może się źle duplikować zależy od teksty no chyba, że tło h1 może być jednej wielkość nie zależni od tekstu.

w innym przypadku jest więcej zabawy np. z małą kulką którą ustawiasz w rogach i robi ci zaokrąglenia no ale określ co ci potrzeba najpierw

[asd5]

zobacz
http://www.limeto.pl/pliki/Zaokraglenie w IE 6 ;D.zip ANG
http://www.webmastertalk.pl/okragly-div-w-ie-t-3936.html PL
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/ ANG
http://www.kminek.pl/okragle-rogi-tylko-za-pomoca-css/ PL

[Dhofca]

border-radius: xx px;
-moz-border-radius: xx px;
-webkit-border-radius: xx px;

[Melixo]

border-radius: xx px;
-moz-border-radius: xx px;
-webkit-border-radius: xx px;

One nie działają niestety pod IE6. I prosze nie piszcie nic typu daj sobie spokoj z ie6 itd... to po prostu musi tam także działać.

ale określ co ci potrzeba najpierw

Mam 2 pliki "zaokrąglenie-left.jpg" i "zaokraglenie-right.jpg" i teraz chciałbym użyć ich jako:
h1 {
background: url(...) left no-repeat;
background: url(...) right no-repeat;
}
Oczywiście wiem, że w ten sposób to jest niemożliwe to tylko dla przykładu. Powoli zdaję sobie sprawę, że z grafiką tego nie zrobię, więc jeśli znacie komende pod ie6 to bardzo bym o nią prosił. W ostateczności użyje javascript, i chętnie poczytam jakiś poradnik jak tego użyć Aha a co do grafiki, jest ona w 2 częściach, ponieważ nie ma mieć stałej szerokości, tylko dopasowywać się do tekstu.

[Pedro84]

One nie działają niestety pod IE6. I prosze nie piszcie nic typu daj sobie spokoj z ie6 itd... to po prostu musi tam także działać.

To użyj js... Używanie grafik do rogów mija się z jakimkolwiek celem...

Komenda pod IE6: Użyj js. Google.pl Cię naprowadzi.

[lukasz323]

dość przewrotny kod no ale można z tego coś wciągnąć
css:
h1{
background:url(prawy rog.jpg) no-repeat right top;
float:left;
margin:0;
text-align:left;
}
h1 span{
background:url(lewyrog.jpg) no-repeat right top;
width:20px;
height:20px;
margin:0;
padding:0;
display:block;
}
html:
<h1><span></span>123123</h1>

[Melixo]

dość przewrotny kod no ale można z tego coś wciągnąć
css:
h1{
background:url(prawy rog.jpg) no-repeat right top;
float:left;
margin:0;
text-align:left;
}
h1 span{
background:url(lewyrog.jpg) no-repeat right top;
width:20px;
height:20px;
margin:0;
padding:0;
display:block;
}
html:
<h1><span></span>123123</h1>

Myślałem nad tym rozwiązaniem, ale one także odpada. Robię strone dla firmy i zażyczyli sobie panel zarządzania treścią. Panel który stworzyłem ma opcje do nagłówków tylko h1,h2 ... bez żadnych span. Gdybym to ja zarządzał stroną to nie widziałbym żadnych problemów, ale tu jest inna sprawa z ludźmi którzy nie mają pojęcia nawet o html. No to najwidoczniej muszę użyć javascript :/ jak znacie fajne poradniki to dajcie linka, chyba, że już was wyprzedzę. I dzięki za chęć pomocy.

[lukasz323]

ale h1 stosuje się tylko i wyłącznie do nazwy artykułu więc możesz strzelić stały h1 z importem z bazy treści

[Pedro84]

ale h1 stosuje się tylko i wyłącznie do nazwy artykułu więc możesz strzelić stały h1 z importem z bazy treści

Nie tylko, ale powinien być użyty na stronei tylko raz.