FAQ |
Kalender |
2008-10-16, 11:12 | #11 | ||
|
|||
Medlem
|
Jag var också tvungen att göra ett försök. Finns ett litet problem i IE6 som jag inte hinner kika på nu. Men tror lösningen blev lite "renare" i alla fall. Jag använde mig lite mer av absolut positionering för att sätta saker på sin plats, vilket krävde färre divvar. Om man skiter helt i IE6 kan man även ta bort den inre content-divven och sätta paddingen på remoteboxen:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" * "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Blarf</title> <style type="text/css"> <!-- div.box1 { *width: 400px; } div.box2 { *width: 300px; } div.remoteBox { *background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 0 0 no-repeat; *position: relative; *font-size: 10px; *line-height: normal; } div.remoteBox div.content { *padding: 24px; } div.remoteBox div.rightSide { *background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 100% 0 no-repeat; *width: 24px; *height: 100%; *position: absolute; *top: 0; *right: 0; } div.remoteBox div.bottom { *background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 0 100% no-repeat; *width: 100%; *height: 12px; *position: absolute; *bottom: 0; *left: 0; } div.remoteBox div.bottomRightCorner { *background: url(http://www.bredbandsbolaget.se/wps/themes/html/B2_Black_v3/images/boxes/remote_box.gif) 100% 100% no-repeat; *width: 24px; *height: 12px; *position: absolute; *bottom:0; *right: 0; *z-index: 100; } --> </style> </head> <body> *<!--BOX 1--> *<div class="remoteBox box1"> * <div class="rightSide"></div> * <div class="content"> * *TEST!<br /> * *TEST!<br /> * *TEST!<br /> * *TEST!<br /> * *TEST!<br /> * *TEST!<br /> * *TEST!<br /> * *TEST!<br /> * </div> * <div class="bottomRightCorner"></div> * <div class="bottom"></div> *</div> *<!--BOX 2--> *<div class="remoteBox box2"> * <div class="rightSide"></div> * <div class="content"> * *EN HELT ANNAN BOX!<br /> * *TEST!<br /> * *TEST!<br /> * *TEST!<br /> * *TEST!<br /> * *<img src="image/portfolio/tff.jpg" /><br /> * *JAHA<br /> * </div> * <div class="bottomRightCorner"></div> * <div class="bottom"></div> *</div> </body> </html> |
||
Svara med citat |
2008-10-16, 15:25 | #12 | |||
|
||||
Flitig postare
|
Det är kan man bara använda om man vill ha runda hörn med css:en, det är en slags kant, och om man inte är så noga med att det ska funka i dem äldre å läsarna kan du prova..
-moz-border-radius: 4px; -webkit-border-radius: 4px; http://developer.mozilla.org/En/CSS:-moz-border-radius Förhoppnings så blir det standard med CSS3. |
|||
Svara med citat |
2008-10-16, 16:39 | #13 | |||
|
||||
Har WN som tidsfördriv
|
Jag föredrar runda hörn utan bilder
|
|||
Svara med citat |
2008-10-16, 17:12 | #14 | |||
|
||||
Mycket flitig postare
|
Citat:
|
|||
Svara med citat |
2008-10-16, 17:46 | #15 | |||
|
||||
Klarade millennium-buggen
|
Citat:
|
|||
Svara med citat |
2008-10-16, 17:51 | #16 | ||
|
|||
Medlem
|
Citat:
http://www.romancortes.com/blog/homer-css/ Men koden ser fortfarande förjävlig ut. Rundade hörn med så lite onödig markup-kod som möjligt är vad vi i alla fall jag vill åt. |
||
Svara med citat |
2008-10-16, 18:01 | #17 | |||
|
||||
Medlem
|
Citat:
Hellre två rader extra markup och få det perfekt visuellt än att ta genvägar. Visst, man ska sträva efter en ren HTML-markup men inte till varje pris. Det viktigaste är att det fungerar i alla webbläsare. |
|||
Svara med citat |
2008-10-16, 19:42 | #18 | ||
|
|||
Har WN som tidsfördriv
|
Kod:
.top .center, .bottom .center {float: left;} .top .left {float: left; width: 10px; height: 10px; background: url(top_left.png) top left no-repeat;} .top .right {float: right; width: 10px; height: 10px; background: url(top_right.png) top left no-repeat;} .bottom .left {float: left; width: 10px; height: 10px; background: url(bottom_left.png) top left no-repeat;} .bottom .right {float: right; width: 10px; height: 10px; background: url(bottom_right.png) top left no-repeat;} Kod:
<div> <div class="top"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="content"> Content </div> <div class="bottom"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </div> |
||
Svara med citat |
2008-10-16, 21:41 | #19 | |||
|
||||
Medlem
|
Citat:
Låt säga vi har en kolumn som är en lista.. (kan låta en wrapper div gå igenom här, allt ska ju ha betydelse till sidan och markupen formad där efter) Som sagt beror ju helt på hur designen är uppbyggd för att koda så optimalt som möjligt, men principen iaf. <div> <ul>[*] <h2></h2> </p>[*][/list]</div> Bam!! 5 block-level element behövs det något mer? (visst paragrafen kan vi räkna bort, men ändå.. 4 element = 4 bilder (4 olika positioneringar av samma bild syftar jag ju då på)) |
|||
Svara med citat |
2008-10-16, 21:47 | #20 | ||
|
|||
Mycket flitig postare
|
Håller med Hjalmarsson. Tänker man till lite behöver man inte alls många taggar. En <h2> eller <ul> funkar alldeles utmärkt att sätta en bakgrund på.
Massa onödiga <div> är lika osemantiskt som att köra med tabeller... |
||
Svara med citat |
Svara |
|
|