Hur får man en div att anpassa sig efter innehållet i en div som ligger i diven.
Förtydligar:
Detta bör ju fungera:
<div id='1'>
<div id='2'> Innehåll </div>
</div>
Den yttre diven anpassar sin storlek efter den inre, eller?
Om ovanstående är sant borde väl även nedanstående fungera.
Jag har en meny som ligger i endiv som ligger tillsammans med ett gäng
andra divar för att skapa en snygg ram runt menyn.
Så ser det ut nu: http://member.webforum.nu/9345/test.html
Men jag vill att ramen anpasser sig i x och y led beroende på innehållet i menyn.
KOD:
<head>
<title> Runda hörn meny. </title>
<link rel=stylesheet href="style.css" type="text/css"></link>
<script language="JavaScript" type="text/javascript">
<!-- skript för att få menyn att fungera
function appendClass(node) {
if(node.className != "flat"){
node.onclick = function() { closeNodes();
if (node.className == "") node.className = "over";
else node.className = "";
}}}
function closeNodes(){
var nodes = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<nodes.length; i++){
if(nodes[i].className != "flat"){ nodes[i].className = ""; }
}
}
function startList() {
var node = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<node.length; i++) { appendClass(node[i]); }
}
-->
</script>
</head>
<body onLoad="startList()">
<div id = "container">
<div id = "leftContainer"> <div id="tl"></div> <div id="ml"></div> <div id="bl"></div> </div>
<div id = "middleContainer"> <div id="tc"></div> <div id="mc">
<!-- Meny-->
<ul id="nav">
<li><a href="#"> meny1 </a>
<ul>
<li class="flat"><a href="#"> undermeny1 </a></li>
<li class="flat"><a href="#"> undermeny2 </a></li>
<li class="flat"><a href="#"> undermeny3 </a></li>
<li class="flat"><a href="#"> undermeny4 </a></li>
<li class="flat"><a href="#"> undermeny5 </a></li>
<li class="flat"><a href="#"> undermeny6 </a></li>
</ul></li>
<li><a href="#"> meny2 </a>
<ul>
<li class="flat"><a href="#"> undermeny1 </a></li>
</ul></li>
<li><a href="#"> meny3 </a>
<ul>
<li class="flat"><a href="#"> undermeny1 </a></li>
<li class="flat"><a href="#"> undermeny2 </a></li>
<li class="flat"><a href="#"> undermeny3 </a></li>
</ul></li>
<li><a href="#"> meny4 </a>
<ul>
<li class="flat"><a href="#"> undermeny1 </a></li>
</ul></li>
<li class="flat"><br></br><a href="#"> meny5 </a></li>
<li><a href="#"> meny6 </a>
<ul>
<li class="flat"><a href="#"> undermeny1 </a></li>
<li class="flat"><a href="#"> undermeny2 </a></li>
<li class="flat"><a href="#"> undermeny3 </a></li>
<li class="flat"><a href="#"> undermeny4 </a></li>
</ul></li>
</ul>
<!-- slut meny -->
</div> <div id="bc"></div> </div>
<div id = "rightContainer"> <div id="tr"></div> <div id="mr"></div> <div id="br"></div> </div>
</div>
</body> </html>
Tillsamans med lite CSS:
/* ram meny */
#leftcontainer, #middleContainer, #rightContainer{
float: left;
height: 100px;
}
#leftcontainer, #rightContainer{ width: 33px; }
#middleContainer { width: 150px; }
#tl, #tc, #tr {
height: 33px;
width: 100%;
}
#ml, #mc, #mr {
height: 100%;
width: 100%;
}
#bl, #bc, #br {
height: 33px;
width: 100%;
}
#tl { background-image : url("ram_top_left.gif"); background-position : top; background-repeat: no-repeat;}
#tc { background-image : url("horizontal_line.gif"); background-position : top; background-repeat: repeat-x; }
#tr { background-image : url("ram_top_right.gif"); background-position : top; background-repeat: no-repeat; }
#ml { background-image : url("vertical_line.gif"); background-position : left; background-repeat: repeat-y; }
#mc { }
#mr { background-image : url("vertical_line.gif"); background-position : right; background-repeat: repeat-y; }
#bl { background-image : url("ram_bottom_left.gif"); background-position : center; background-repeat: no-repeat; }
#bc { background-image : url("horizontal_line.gif"); background-position : bottom; background-repeat: repeat-x;}
#br { background-image : url("ram_bottom_right.gif"); background-position : top; background-repeat: no-repeat; }
/* meny */
#nav {
width: 120px;
padding: 0px;
margin: 0px;
list-style: none;
}
#nav li {
position: relative;
left: 10px;
}
/*Holly Hack >> \*/
*html #nav li { float: left; }
*html #nav li a { height: 1%; }
/*Holly Hack end*/
#nav li li a:hover{ background-color: pink; }
#nav li a {
display: block;
text-decoration: none;
font: 1em/1.2em 'Times New Roman', Times, Serif, Verdana, Arial;
color: red;
}
#nav ul {
position: relative;
width: 120px;
left: 10px;
top: 0px;
display: none;
margin: 0px;
padding: 0px;
list-style: none;
}
#nav li.over ul ul {
display: none;
}
#nav li.over ul,
#nav li li.over ul {
display: block;
}
Men det gör det inte.
Någon som har ett tips.