WN - Egendefinerade hörn/kanter på en div

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Egendefinerade hörn/kanter på en div (https://www.wn.se/forum/showthread.php?t=11182)

Tja, ville helt enkelt se efter om någon annan här på forumet,
har någon bättre lösning än den jag själv använder.

Det finns ju självklart många lösningar på hur man definierar sina egna hörn på
en <div> genom att använda CSS och fyra gif-bilder.
Dock är jag ute efter att se vad som funkar bäst för er och/eller
vad ni tycker är den bästa lösningen ur relevanta synvinklar som: seo, kodstruktur, kompabilitet etc...

Här är mitt bidrag som funkat mycket bra i de flesta webbläsare:

Kod:

<div class"contentw"> 

 * *<div class"w"><div class"w"> 

 * *<div class"w"><div class"w"> 

 * *<content /> 

 * *</div></div> 

 * *</div></div> 

</div>

Kod:

.contentw {

        background-color: #fff;

        }



.contentw .w {

        background: url("img/corner_top_left.gif") top left no-repeat;

        }

.contentw .w .w{

        background: url("img/corner_bottom_left.gif") bottom left no-repeat;

        }

.contentw .w .w .w{

        background: url("img/corner_bottom_right.gif") bottom right no-repeat;

        }

.contentw .w .w .w .w{

        background: url("img/corner_top_right.gif") top right no-repeat;

        }

Citat:

Originally posted by digiArt@Dec 5 2005, 18:19
Du kan ju ta dig en titt på detta.

Hans boxar fungerar inte så bra enligt mig. :huh:

Citat:

Ursprungligen postat av Robert

Citat:

Ursprungligen postat av digiArt

Du kan ju http://www.456bereastreet.com/archiv...s_and_borders/.

Hans boxar fungerar inte så bra enligt mig.

På vilket sätt fungerar de inte bra? För mig fungerar de kanon.

Lite nyfiken på det också... tycker dom fungerar ypperligt.

Såsom jag förstod det så måste man veta hur bred/hög boxen maximalt ska vara och tillverka en aldeles för stor kantbild för detta. Om man tar hans exempelboxar och visar detta på en 1900px bred skärm så ser man att de pajjar. En box ska ha stretchade borders så de kan bli hur stora/små som helst och att de endast behöver en 1pixel bred (alt. hög) bild.

Sen använder han javascript för att byta ut taggar med. Känns ju inte skitskojj, jag har hellre en div för mycket än ett javascript extra (en extra point of failure).

sant iofs, men i regel har jag ett hum om hur max eller min stor jag vill att en box skall bli. Så för mej passar det mycket bra, särskilt om jag vill ha dropshadows, eller vill ha annorlunda ramar på något vis. Men du har en poäng.
Javascript? Ok, jag har nog missat nåt exempel där borta, men det skulle inte jag vilja använda för egna hörn på en box heller.

Min lösning

<div id="bg">
<div id="top-line"></div>

ditt content</p>
<div id="bottom-line"></div>
</div>

i bg kör man en repeterande 1px hög bakgrund
i bottom och top kör man botten och toppen...

jag har lite olika varianter på denna lösning iofs.. men i grund och botten funkar det nice..

Tack för bidragen och tja man har väl insett att där finns mer prestanda och utseendemässigt bättre lösningar än den man använde från början (varför är alltid grannen smartare än en själv?)

länken som digiArt bifogade är verkligen underbar, dock är jag lite rädd för att använda javascript i dagsläget än så länge.

A.L.A. hade en annan lösning som jag kommer tippa lite närmre på och även Björns :)

Tack ska ni ha grabbar :)