---
title: "Standardlösning på div-ruta?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/172014-standardlösning-på-div-ruta"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Fia"
published: "2008-06-07T12:04:28.000Z"
updated: "2008-06-07T22:18:45.000Z"
replies: 4
views: 541
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/172014-standardlösning-på-div-ruta"
---

# Standardlösning på div-ruta?

## #1 — Fia, 2008-06-07T12:04Z

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?   :)

Bilagor:

- [wf_felaktig_ruta.gif](https://www.webforum.nu/a/18306.gif)

Permalänk: https://www.webforum.nu/p/172014

## #2 — rhdf, 2008-06-07T12:12Z

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"

Permalänk: https://www.webforum.nu/p/2117093

## #3 — Fia, 2008-06-07T12:26Z

Tack rhdf.

Är det den vanligaste lösningen, fyra divar för en sånhär ruta?

Permalänk: https://www.webforum.nu/p/2117094

## #4 — rhdf, 2008-06-07T12:57Z

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

;)

Permalänk: https://www.webforum.nu/p/2117102

## #5 — jarvklo, 2008-06-07T22:18Z

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

Permalänk: https://www.webforum.nu/p/2117156

---

Tråden på webben: https://www.webforum.nu/amne/html-css/172014-standardlösning-på-div-ruta