---
title: "DIV"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/119143-div"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Mika3l"
published: "2005-01-02T19:21:36.000Z"
updated: "2005-01-30T22:35:18.000Z"
replies: 24
views: 745
page: 1
pages: 2
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/119143-div"
---

# DIV

_Sida 1 av 2._

## #1 — Mika3l, 2005-01-02T19:21Z

Behöver lite hjälp att få ordning på divar.
Vill ha en sida uppdelad så här:

Meny (flash) - 610px bred och 215px hög
\----------------------------------------------------
Innehåll direkt under menyn, 610px bred, ingen bestämd höjd, #FAFAFA som bakgrund.
\----------------------------------------------------
Rundade hörn längst ner (bild-mellanrum-bild)

Hur ska jag göra för att få till det?

Har testat med följande kod (lyckades dock inte med något bra för dom runda hörnen):

```
<div id="menu" style="width: 610px; height: 215px; position: absolute; padding: 0px; left: 120px;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="610" height="215" id="menu">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="menu" value="false">
</object>
</div>

<div id="layer1" style="visibility:visible; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Hem</div>
<div id="layer2" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Om bilen</div>
<div id="layer3" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Bilder</div>
<div id="layer4" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Utställningar</div>
<div id="layer5" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Projekt</div>
<div id="layer6" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Gästbok</div>
<div id="layer7" style="visibility:hidden; position: absolute; width: 610px; padding: 8px; left: 120px; top: 215px; background: #FAFAFA;">Kontakta mig</div>
```

Sidan vill jag egentligen ha centrerad också men det lyckades jag inte heller luska ut.

Någon som kan hjälpa mig lite på traven här? :)

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

## #2 — zcorpan, 2005-01-02T21:06Z

1. Använd inte DW :P
2. Använd helst inte flash för navigering. Om du gör det så se till att ha ett alternativ för den som inte har flash installerat. <http://www.alistapart.com/articles/flashsatay/> (du behöver inte använda XHTML för det)
3. För att centrera ett block sätter du bredden för den samt margin-left och margin-right till auto. IE5 samt IE6 (i quirksmode) fattar inte det så man får använda en workaround, så det ser ut typ såhär: 

   ```
   body {
     text-align: center; /* för IE */
   }
   #myblock {
     width: 70%;
     margin-left: auto; margin-right: auto; /* det här är standarden */
     text-align: left; /* texten ska väl inte vara centrerad... */
   }
   ```

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

## #3 — Mika3l, 2005-01-02T21:34Z

1\. Har aldrig använt DW och kommer aldrig göra heller. ;)
2\. Jopp, blir Flash i det här fallet men jag ska kolla på en lösning utan Flash också i ett senare skede. Ska också titta vidare på optimering av koden.
3\. Här ska testas! Men #myblock, ska jag anropa det med class eller (\<div class="mybox"\>) eller blir det \<div id="mybox"\> eller hur? :)

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

## #4 — icaaq, 2005-01-02T21:42Z

\# = id
. = class

mv icaaq

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

## #5 — Mika3l, 2005-01-02T21:54Z

Ok. :)

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

## #6 — pakmannen, 2005-01-29T15:30Z

Varför skriva:
margin-left:auto; 
margin-right:auto;

Det funkar väl med:
margin:auto;

Eller? Så har jag alltid gjort i alla fall.

Edit - Vad är det för fel på DW förresten? Hur ska man kunna leva utan check-in och check-out?  :e

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

## #7 — zcorpan, 2005-01-29T16:12Z

```
margin: auto;
```

 är samma sak som 

```
margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto;
```

 Man kan förstås använda 

```
margin: 0 auto;
```

 om man vill att top och bottom ska vara noll... :)

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

## #8 — Mika3l, 2005-01-30T00:34Z

Asch, har fortfarande problem med den här sidan! :l
Lyckas inte få 3 lager att hamna under menylagret och innehållslagret. Vad ska jag göra?

```
<div id="myblock">

<div id="menu" style="width: 610px; height: 215px; position: absolute; padding: 0px;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 WIDTH="610" HEIGHT="215" id="menu" ALIGN="">
 <PARAM NAME=movie VALUE="menu.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="menu.swf" quality=high bgcolor=#FFFFFF  WIDTH="610" HEIGHT="215" NAME="menu" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
<!--
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="610" height="215" id="menu">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="menu" value="false">
</object>
-->
</div>

<div id="layer1" style="visibility:visible; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Hem</div>
<div id="layer2" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Om bilen</div>
<div id="layer3" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Bilder</div>
<div id="layer4" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Utställningar</div>
<div id="layer5" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Projekt</div>
<div id="layer6" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Gästbok</div>
<div id="layer7" style="visibility:hidden; position: absolute; width: 594px; padding: 8px; top: 215px; background: #FAFAFA;">Kontakta mig</div>

<div id="leftbottomcorner" style="position: absolute; width: 4px; height: 5px;"><img src="images/corner-left.gif" alt=" " style="width: 4px; height: 5px;"></div>
<div id="centerbottom" style="position: absolute; width: 602px; height: 5px; left: 4px; background: green;"></div>
<div id="rightbottomcorner" style="position: absolute; width: 4px; height: 5px;"><img src="images/corner-right.gif" alt=" " style="width: 4px; height: 5px;"></div>

</div>
```

CSS:

```
body {
	background: #E9E9E9;
	font-family: Georgia, Verdana, Arial;
	font-size: 12px;
	color: #101010;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
}
#myblock {
	width: 610px;
	margin-left: auto; margin-right: auto;
	text-align: left;
}
a {
	font-family: Georgia, Verdana, Arial;
	font-size: 12px;
	color: #FF0000;
	text-decoration: none;
}
a:hover {
	color: #FAFAFA;
	text-decoration: none;
}
tr, td {
	font-family: Georgia, Verdana, Arial;
	font-size: 12px;
	color: #101010;
	font-weight: normal;
}
```

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

## #9 — icaaq, 2005-01-30T09:03Z

Tjenare.
Lägg dina bilder i en bakgrundsbild istället då de inte tillför något innehållsmässigt (de är en del av sidans design).

mv icaaq

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

## #10 — Mika3l, 2005-01-30T12:04Z

Har ändrat det nu men det hjälper mig inte att få lagrena i rätt läge.

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

## #11 — zcorpan, 2005-01-30T13:14Z

Hur vill du att det ska se ut? Kan du ge en bild?

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

## #12 — Mika3l, 2005-01-30T18:56Z

Här är en bild på hur jag vill ha det. :)

Bilagor:

- [volvo copy.jpg](https://www.webforum.nu/a/5455.jpg)

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

## #13 — icaaq, 2005-01-30T20:23Z

Börja med att ta bort alla position, top och left i dina inlinecss-taggar.

Sen får vi se hur det ser ut. ;)

mv icaaq

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

## #14 — Mika3l, 2005-01-30T20:37Z

Blir ju inte rätt men det närmar sig ju iaf. :p
Skickar med en bild hur det ser ut i IE resp. Firefox.

```
<div id="myblock">

<div id="menu" style="width: 610px; height: 215px; padding: 0px;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 WIDTH="610" HEIGHT="215" id="menu" ALIGN="">
 <PARAM NAME=movie VALUE="menu.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="menu.swf" quality=high bgcolor=#FFFFFF  WIDTH="610" HEIGHT="215" NAME="menu" ALIGN=""
 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
<!--
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="610" height="215" id="menu">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="menu" value="false">
</object>
-->
</div>

<div id="layer1" style="visibility:visible; width: 594px; padding: 8px; background: #FAFAFA;">Hem</div>
<div id="layer2" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Om bilen</div>
<div id="layer3" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Bilder</div>
<div id="layer4" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Utställningar</div>
<div id="layer5" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Projekt</div>
<div id="layer6" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Gästbok</div>
<div id="layer7" style="visibility:hidden; width: 594px; padding: 8px; background: #FAFAFA;">Kontakta mig</div>

<div id="leftbottomcorner" style="width: 4px; height: 5px; background: url('images/corner-left.gif') no-repeat;"></div>
<div id="centerbottom" style="width: 602px; height: 5px; background: #FAFAFA;"></div>
<div id="rightbottomcorner" style="width: 4px; height: 5px; background: url('images/corner-right.gif') no-repeat;"></div>

</div>
```

Bilagor:

- [fel.jpg](https://www.webforum.nu/a/5459.jpg)

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

## #15 — icaaq, 2005-01-30T20:44Z

Bygg ihop din corner-left och corner-right till en bild som är 610px bred, lägg den som background-image i #myBlock med en background-position: 0% 100%;

mv icaaq

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

## #16 — Mika3l, 2005-01-30T20:53Z

Nu blir det på ett sätt rätt men även på ett sätt fel. :p
Jag har ju för tillfället 7 lager som alla ska ha samma position, men det har dom inte nu då jag inte kör med position: absolute. Gör jag det så försvinner bilden som ska vara under dom lagren. Hur blir det nu? :p

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

## #17 — icaaq, 2005-01-30T20:57Z

Om du lägger till position: relative i #myBlock så kan du använda position absolute på de lagren.

mv icaaq

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

## #18 — Mika3l, 2005-01-30T21:05Z

Fungerar inte. :l
Du kan ta en titt på <http://81.227.231.154/volvo> om du vill.

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

## #19 — icaaq, 2005-01-30T21:42Z

<http://member.webforum.nu/1029/mika3l.htm>

mv icaaq

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

## #20 — Mika3l, 2005-01-30T22:21Z

Tack så mycket icaaq men det fungerar fortfarande inte riktigt. :l Det fungerar perfekt i Firefox men i IE (6) så blir det ett mellanrum på uppskattningsvis ca 10px mellan innehållsdiven (arna) och bottom.gif.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/119143-div  
Nästa sida: https://www.webforum.nu/amne/html-css/119143-div/page2.md