Avrundade kanter

Tråden skapades och har fått 2 svar. Det senaste inlägget skrevs .
1

Hej! (jag är nybörjare)

Men jag gjorde en div på dreamveaver, sen la jag till en ny css rule. Och gjorde en vit box på 750 pix bred. Men nu vill jag ha de skarpa kanterna avrundade. Hur går jag till väga? Går det att göra?

MvH
Oskar svärd

Hej Oskar.

Dreamweaver, eller dagens webbstandard, har ingen färdig lösning på rundade kanter.

Den enklaste varianten är att skapa en grafik med rundade kanter och lägga som bakgrund i en 'div'. Men det är inte så praktiskt om du vill kunna fylla diven med olika mängd text, dvs om du vill att diven skall skala med innehållet.

Det vanligaste lösningen idag är en div-hirarki där varje div får dra sitt strå till stacken. Titta på följande struktur:

<div id="tl"><div id="tr"><div id="bl"><div id="br"></div id="br"></div id="bl"></div id="tr"></div id="tl">

Här kan du tilldela varje id en egen bakgrund och på så vis skapa alla hörn.

Lite beroende på om du vill att diven skall stretcha på båda hållen, eller bara vertikalt kan det se lite olika ut.

Googla "CSS rounded corners" så hittar du nog mer än du nånsin orkar läsa... Mitt exempel ovan är bara för att illustrera konceptet i sig.

  • Medlem
  • Borlänge
  • 2008-04-06 15:09

Om du är sugen på att läsa om det på svenska:

http://www.webdesignskolan.se/css-effekter/css-effekter.htm#roundcorners

1
Bevaka tråden