div in andere div

Status
Niet open voor verdere reacties.
J

jappertjeh

Gebruiker
Lid geworden
2 jan 2006
Berichten
432
Ik heb onderstaande code gemaakt (m.b.v. eerder gegeven html cursus) nu heb ik precies hetzelfde gedaan als in de cursus omschreven, maar toch komt er wat anders uit. Ik heb een soort van "moeder-div" die div id=container heet, en daar binnen een paar andere divs, zoals menu etc., en aan het eind de tag </div> van de container. nu staat mijn menu op float:left, en heb i kdaarna <div id="content"> aangemaakt. Deze wordt echter niet in mijn div container geplaatst maar er onder (er na dus). toch heb ik m binnen mijn container geplaatst. hoe zorg ik dat t wel goed staat? alvast bedankt!

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{background-color:#666;}

#container{width:700px;
margin-left:50px;
margin-top:20px;
}

#header{width:700px;
height:80px;
background-repeat:no-repeat;
background-image:url(afbeelding.jpg);
}

#menu{width:180px;
float:left;
background-color:#CCC;
margin:5px;
padding:0px;}

#menu ul{list-style:none;
margin:5px;
padding:0px;
font-family:Georgia;
padding-top:10px 0px 0px 0px;}

#menu ul a{
	display:block;
	height:25px;
border:none;
	padding-top:3px;
		padding-left:25px;
text-decoration:none;
color:#000;}

#menu ul a:hover{
	background-color:#666}
	
#content{
	width:510px;
	background-color:#666;
	float:left;
	padding-left:10px;
	padding-top:10px;
}

#welkom{
	width:490px;
	background-color:#fff;
	margin-right:10px;
	padding:left:10px;
	padding-top:10px;}

</style>
<title>Voorbeeldversie opzet website</title>
</head>

<body>
<div id="container">
<div id="header"></div>

<div id="menu">
<ul>
<li><a href="http://www.hallo.nl">nummer 1</a></li>
<li><a href="http://www.hallo.nl">nummer 2</a></li>
<li><a href="http://www.hallo.nl">nummer 3</a></li>
<li><a href="http://www.hallo.nl">nummer 4</a></li>
<li><a href="http://www.hallo.nl">nummer 5</a></li>
</ul></div>

<div id="content">
<div id="welkom"></div>
</div>

<div id="footer"></div>
</div>

</body>

</html>

mijn container div staat dus op regel 62 en de sluit-tag op 79..
 
Laatst bewerkt:
Als je eens je container een randje geeft:[JS]border: 1px dotted #f06;[/JS]zie je inderdaad dat het er onder staat. Dit komt door je floating divs erin. Als je je container deze css erbij geeft:[JS]overflow: hidden;[/JS]zit alles er weer netjes in.


:thumb:
 
Code: 
#container{width:700px;
overflow:hidden;
margin-left:50px;
margin-top:20px;
}

dit heb ik er van gemaakt maar mijn div content zit nog steeds niet in mijn div container..
 
Beetje mee gespeeld:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
<style type="text/css">
body
{
background-color:#666;
}
 
#container
{
width:700px;
margin-left:50px;
margin-top:20px;
border: solid 2px #ffff00;
}
 
#header
{
width:700px;
height:80px;
background-repeat:no-repeat;
background-image:url(afbeelding.jpg);
border: solid 2px #ff0000;
}
 
#menu
{
width:180px;
float:left;
background-color:#CCC;
margin:5px;
padding:0px;
border: solid 2px #ff0000;
}
 
#menu ul
{
list-style:none;
margin:5px;
padding:0px;
font-family:Georgia;
padding-top:10px 0px 0px 0px;
}
 
#menu ul a
{
    display:block;
    height:25px;
border:none;
    padding-top:3px;
        padding-left:25px;
text-decoration:none;
color:#000;
}
 
#menu ul a:hover
{
    background-color:#666
}
    
#content
{
    width:490px;
    background-color:#666;
    padding-left:10px;
    padding-top:10px;
border: solid 2px #ff0000;
clear: right;
}
 
#welkom
{
    width:490px;
    background-color:#fff;
    margin-right:10px;
    padding:left:10px;
    padding-top:10px;
border: solid 2px #ff0000;
}
#footer
{
border: solid 2px #6697cc;

}
.both{
clear both;
}
</style>
		<title>
			Voorbeeldversie opzet website
		</title>
	</head>
	 
	<body>
		<div id="container">
			<div id="header">header
			</div>
			 
			<div id="menu">
				<ul>
					<li>
					<a href="http://www.hallo.nl">nummer 1</a>
					</li>
					<li>
					<a href="http://www.hallo.nl">nummer 2</a>
					</li>
					<li>
					<a href="http://www.hallo.nl">nummer 3</a>
					</li>
					<li>
					<a href="http://www.hallo.nl">nummer 4</a>
					</li>
					<li>
					<a href="http://www.hallo.nl">nummer 5</a>
					</li>
				</ul>
			</div>
			 
			<div id="content">content
				<div id="welkom">welkom
				</div>content
<br>
content<br>
content<br>
<br>
<br>


			</div>
			 <div class="both"></div>
			<div id="footer">footer
			</div>
		</div>
		 
	</body>
	 
</html>

:cool:
 
bedankt voor de moeite, maar ik wou net gaan typen dat ik het zelf al op had gelost:)
namelijk heel eenvoudig: de div was te groot waardoor hij niet meer naast mijn menu div wilde gaan staan, maar er onder! 10px kleiner en hij stond er wel naast(kwam door de margins(A))
Maar allemaal bedankt voor de moeite!
 
De tip was je al gegeven om een border toe te passen, dan zie je hoe breed de betreffende div's zijn.

:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan