Kom ihåg mig?
Home Menu

Menu


Egendefinerade hörn/kanter på en div

Ämnesverktyg Visningsalternativ
Oläst 2005-12-05, 11:54 #1
Rinkles avatar
Rinkle Rinkle är inte uppkopplad
Medlem
 
Reg.datum: Jul 2003
Inlägg: 238
Rinkle Rinkle är inte uppkopplad
Medlem
Rinkles avatar
 
Reg.datum: Jul 2003
Inlägg: 238
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;
	}
Rinkle är inte uppkopplad   Svara med citatSvara med citat
Oläst 2005-12-05, 17:19 #2
digiArt digiArt är inte uppkopplad
Har WN som tidsfördriv
 
Reg.datum: Jan 2004
Inlägg: 1 429
digiArt digiArt är inte uppkopplad
Har WN som tidsfördriv
 
Reg.datum: Jan 2004
Inlägg: 1 429
Du kan ju ta dig en titt på detta.
digiArt är inte uppkopplad   Svara med citatSvara med citat
Oläst 2005-12-06, 09:08 #3
Roberts avatar
Robert Robert är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Jan 2004
Inlägg: 2 103
Robert Robert är inte uppkopplad
Klarade millennium-buggen
Roberts avatar
 
Reg.datum: Jan 2004
Inlägg: 2 103
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:
Robert är inte uppkopplad   Svara med citatSvara med citat
Oläst 2005-12-06, 09:28 #4
Patek Philippe Patek Philippe är inte uppkopplad
Medlem
 
Reg.datum: Oct 2004
Inlägg: 91
Patek Philippe Patek Philippe är inte uppkopplad
Medlem
 
Reg.datum: Oct 2004
Inlägg: 91
Citat:
Ursprungligen postat av Robert
Citat:
Ursprungligen postat av digiArt
Hans boxar fungerar inte så bra enligt mig.
På vilket sätt fungerar de inte bra? För mig fungerar de kanon.
Patek Philippe är inte uppkopplad   Svara med citatSvara med citat
Oläst 2005-12-06, 09:42 #5
Bjarne Bjarne är inte uppkopplad
Medlem
 
Reg.datum: Jun 2005
Inlägg: 103
Bjarne Bjarne är inte uppkopplad
Medlem
 
Reg.datum: Jun 2005
Inlägg: 103
Lite nyfiken på det också... tycker dom fungerar ypperligt.
Bjarne är inte uppkopplad   Svara med citatSvara med citat
Oläst 2005-12-06, 09:56 #6
Roberts avatar
Robert Robert är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Jan 2004
Inlägg: 2 103
Robert Robert är inte uppkopplad
Klarade millennium-buggen
Roberts avatar
 
Reg.datum: Jan 2004
Inlägg: 2 103
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).
Robert är inte uppkopplad   Svara med citatSvara med citat
Oläst 2005-12-06, 10:14 #7
Bjarne Bjarne är inte uppkopplad
Medlem
 
Reg.datum: Jun 2005
Inlägg: 103
Bjarne Bjarne är inte uppkopplad
Medlem
 
Reg.datum: Jun 2005
Inlägg: 103
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.
Bjarne är inte uppkopplad   Svara med citatSvara med citat
Oläst 2005-12-06, 10:30 #8
Björn Björn är inte uppkopplad
Har WN som tidsfördriv
 
Reg.datum: May 2004
Inlägg: 1 224
Björn Björn är inte uppkopplad
Har WN som tidsfördriv
 
Reg.datum: May 2004
Inlägg: 1 224
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..
Björn är inte uppkopplad   Svara med citatSvara med citat
Oläst 2005-12-08, 11:38 #9
Rinkles avatar
Rinkle Rinkle är inte uppkopplad
Medlem
 
Reg.datum: Jul 2003
Inlägg: 238
Rinkle Rinkle är inte uppkopplad
Medlem
Rinkles avatar
 
Reg.datum: Jul 2003
Inlägg: 238
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
Rinkle är inte uppkopplad   Svara med citatSvara med citat
Svara


Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)
 

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 03:12.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017