DIV HEL***E!! — webForum

merlockMedlem sedan sep. 20056 inlägg

Frågan16 sep. 2005 14:45#1

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.

PalleMedlem sedan apr. 20003 174 inlägg

16 sep. 2005 14:50#2

Mitt tips är att du inte frigjort float ordentligt, så texten flyter ut över din div.

Testat att köra följande efter din avslutande </ul>:

<br style="clear:both" />

merlockMedlem sedan sep. 20056 inlägg

16 sep. 2005 15:09#3

Tänkte på det tidigare men det gjorde tyvärr ingen skillnad.
En fullösning skulle ju vara att ange höjd och bredd i diven i 'em', det löser problemet med olika stora teckensnitt.
Men det är märkligt.

zcorpanMedlem sedan dec. 20042 245 inlägg

16 sep. 2005 15:19#4

När du anger float för ett element så tas det ut ur dokumentflödet och därför anpassas inte höjden på dess förälder. Om du vill att föräldern ska omsluta alla flytande boxar kan du tex ange overflow:hidden eller overflow:auto, eller använda clear:both som Palle föreslog.

Frågan är dock om du behöver använda float över huvud taget?

merlockMedlem sedan sep. 20056 inlägg

17 sep. 2005 07:30#5

tack, tack