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!