4 svar · 535 visningar · startad av Fia
Jag vill göra en vanlig div som ska föreställa en ruta med rundade hörn och lite skuggning. Det känns som en helt basic grej, men jag får fasiken inte till det utan massa fulhack. :bla
Ni som är duktiga på CSS, kan ni dela med er av er standardlösning på den här typen av divar? :)
senast jag gjorde en sån där så gjorde jag typ så här
<div class="ruta">
<div class="rutaTop"></div>
<div class="rutaContent">
Innehåll här
</div>
<div class="rutaBtm"></div>
</div>
sen slicar jag bilden som rutan skall bestå av i 3 bitar toppen, en "remsa i mitten" och botten.
Sen lägger jag "remsan som bakgrund i div.ruta
top slicen i div.rutaTop , botten slicen i div.rutaBtm
Den ser man till att sätta lite margins och width på Div.rutaContent så att innehållet hamnar inne i själva rutan och inte "smiter ut"
bra fråga
när jag tänker efter så har jag vid tillfällen där jag skall ha en rubrik i rutan ersatt top-diven med en <h3> som jag sedan satt en bakgrund på + lite text-indent
funkar rätt bra det med
sen skulle man ju kunna tänka sig att content ersätts av en <p> osv osv
;)
Hmm...
Vad som är vanligast beror förmodligen en hel del på vad du har för krav på rutan...
... ibland vill man göra det enkelt ur (X)HTML-synpunkt, ibland ur CSS-synpunkt, ibland skall det vara så snabbladdat som möjligt, ibland vill man ha flexibel bredd, ibland fast...
Standardlösning 1a (fixerad bredd) - http://www.456bereastreet.com/archive/200406/css_teaser_box/
Standardlösning 1a (flexibel bredd) - http://www.456bereastreet.com/archive/200406/css_teaser_box_revisited/
Variation - http://www.456bereastreet.com/lab/flexible_custom_corners_borders/
Finns också lösningar där man kör med "stegvis förbättring" (progressive enhancement) och "skjuter in" hörnen i en enda div med lite diskret ("unobtrusive") och fiffig Javascript - http://www.html.it/articoli/niftycube/index.html - och ibland är de inte fy skam de heller (beroende på hurpass mycket alternativt utseende man vill planera för för dem som inte har Javascript igång eller kör en begränsad webbläsare i t.ex. en nallefon)
Lycka till :bire
