---
title: "Topmarginal på divar."
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/142339-topmarginal-på-divar"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "MickeA.com"
published: "2006-02-12T09:50:56.000Z"
updated: "2006-02-12T14:42:11.000Z"
replies: 4
views: 583
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/142339-topmarginal-på-divar"
---

# Topmarginal på divar.

## #1 — MickeA.com, 2006-02-12T09:50Z

Tjena
Har gjort en meny som bygger på massa divar, i vilken man ska kunna ha sublänkar som ska visas / döljas (Expand / Collapse).
Nu är det så att jag får för myckte mellanrum mellan dessa divar som heter "menuTop".
Som standard är ju alla subkategorier "minimerade" och då ska ju dessa huvudkategorier ligger rakt under varandra, fast med kanske 10px mellanrum.

Som det är nu får jag subDivens höjd på 10px i marginal vilket ser bedrövligt ut.
Jag har testat massor med saker, men får inget alls att minska marginalen.
Det här uppdagar sig i både IE och MOZ.

Koden s er ut som följer:

```
<%

%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="generator" content="Editplus">
<meta name="author" content="Micke Andersson 2005">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>SS04</title>
<style type="text/css">
html, body
	{
	background-color:			#f4f4f4;
	margin: 0px;
	}
div#container
	{
	margin:						5px 5px 5px 5px;
	padding:					3px 3px 3px 3px;
/*	border:						1px #000 solid;		*/
	}
div#logoHolder
	{
	text-align:					center;
	}
div#menuHolder br
	{
	line-height:				10px;
	}
div.menuTop
	{
	height:						19px;
	padding:					2px 2px 2px 2px;
	border:						2px #666688 solid;
	background-image:			url('pics/menu/menuTop.png');
	background-repeat:			repeat-x;
	}
div.menuTop span.menuIco
	{
	float:						left;
	margin:						1px 0px 2px 2px;
	}
span.menuLnk
	{
	margin:						2px 0px 2px 5px;
	float:						left;
	}
span.menuLnk a:link, span.menuLnk a:visited, span.menuLnk a:active
	{
	text-align:					right;
	font:						bold 12px arial, helvetica, sans-serif;
	color:						#32335E;
	text-decoration:			none;
	}
div.menuSub
	{
	border:						2px #666688 solid;
	border-top:					0px;
	}
div.menuSub a:link, div.menuSub a:visited, div.menuSub a:active
	{
	font:						10px arial, helvetica;
	color:						#404040;
	text-decoration:			none;
	height:						15px;
	padding:					1px 2px 0px 4px;
	margin:						0px;
	display:					block;
	background-color:			#DEDEDE;
	border-bottom:				1px #000 solid;
	}
div.menuSub a:hover
	{
	color:						#C3161C;
	text-decoration:			none;
	padding:					1px 2px 0px 4px;
	margin:						0px;
	background-color:			#C5C5C5;
	border-bottom:				1px #000 solid;
	}

img
	{
	border:						0px;
	}
div, span
	{
	border:						1px #000 solid;
	margin:						0px;
	}
</style>
</head>
<body>
<div id="container">
	<div id="logoHolder"><img src="pics/adm_logga.gif" alt="SS04 Logotype"></div>
	<div id="menuHolder">
		<div class="menuTop" id="divTop0">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA0"></span>
			<span class="menuLnk"><a href="#" onclick="menu(0); return false">Nyheter</a></span>
		</div>
		<div class="menuSub" id="divSub0">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div><br>
		<div class="menuTop" id="divTop1">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA1"></span>
			<span class="menuLnk"><a href="#" onclick="menu(1); return false">Kalender</a></span>
		</div>
		<div class="menuSub" id="divSub1">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div><br>
		<div class="menuTop" id="divTop2">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA2"></span>
			<span class="menuLnk"><a href="#" onclick="menu(2); return false">Texter</a></span>
		</div>
		<div class="menuSub" id="divSub2">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div>
		<br>
		<div class="menuTop" id="divTop3">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA3"></span>
			<span class="menuLnk"><a href="#" onclick="menu(3); return false">Personal</a></span>
		</div>
		<div class="menuSub" id="divSub3">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div><br>
		<div class="menuTop" id="divTop4">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA4"></span>
			<span class="menuLnk"><a href="#" onclick="menu(4); return false">Länkar</a></span>
		</div>
		<div class="menuSub" id="divSub4">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div><br>
		<div class="menuTop" id="divTop5">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA5"></span>
			<span class="menuLnk"><a href="#" onclick="menu(5); return false">Verksamhet</a></span>
		</div>
		<div class="menuSub" id="divSub5">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div><br>
		<div class="menuTop" id="divTop6">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA6"></span>
			<span class="menuLnk"><a href="#" onclick="menu(6); return false">Tävlingsgrupper</a></span>
		</div>
		<div class="menuSub" id="divSub6">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div>
		<br>
		<div class="menuTop" id="divTop7">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA7"></span>
			<span class="menuLnk"><a href="#" onclick="menu(7); return false">Tävlingar</a></span>
		</div>
		<div class="menuSub" id="divSub7">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div><br>
		<div class="menuTop" id="divTop8">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA8"></span>
			<span class="menuLnk"><a href="#" onclick="menu(8); return false">Fotogalleri</a></span>
		</div>
		<div class="menuSub" id="divSub8">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div><br>
		<div class="menuTop" id="divTop9">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA9"></span>
			<span class="menuLnk"><a href="#" onclick="menu(9); return false">Sponsorer</a></span>
		</div>
		<div class="menuSub" id="divSub9">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div><br>
		<div class="menuTop" id="divTop10">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA10"></span>
			<span class="menuLnk"><a href="#" onclick="menu(10); return false">Användare</a></span>
		</div>
		<div class="menuSub" id="divSub10">
			<a href="#">Lägg till</a>
			<a href="#" style="border: 0px;">Översikt</a>
		</div>
		<br>
		<div class="menuTop" id="divTop11">
			<span class="menuIco"><img src="pics/menu/expand.png" alt="Pil Ner" id="imgA11"></span>
			<span class="menuLnk"><a href="#">Logga Ut</a></span>
		</div>
	</div>
</div>
</body>
</html>
```

Tack på förhand!

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

## #2 — tanten, 2006-02-12T12:56Z

Måste bara fråga om varför du har \<br\> före varje topdiv, för det är väl den som skapar mellanrummet som jag ser det. Måste den finnas för submenyns skull? Eller? Hinner inte kolla...

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

## #3 — MickeA.com, 2006-02-12T13:34Z

Har tagit bort \<br\> nu, blir ingen skillnad.
Testade att sätta *margin-top: -30px;* på menuTop, då åker dom ihop så som jag vill ha det, fast när man expanderar en kategori så flyttas resten inte ner, vilket är lite fel.

Fler tips välkomnas!

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

## #4 — tanten, 2006-02-12T14:29Z

Konstigt för nu när jag testade så försvann mellanrummet i både IE och FF bara genom att radera \<br\>. Hur det ser ut med oexpanderad text vet jag inte.

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

## #5 — MickeA.com, 2006-02-12T14:42Z

Nu har jag gjort om lite, så det nästan funkar.
Nu är problemet att jag inte får mer än 2px mellanrum mellan varje huvudrubrik.
Har provat det mesta, \<br\>, \<div style="height: 15px"\>\</div mm. men inget gör så att det blir mer mellanrum.

Fler förslag?

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/142339-topmarginal-på-divar
