Divs langs elkaar plaatsen

Status
Niet open voor verdere reacties.
S

Sennec

Gebruiker
Lid geworden
17 jan 2009
Berichten
77
Ik wil dus bovenaan de site mijn logo en de knoppenbalk in 2 verschillende divs zetten, en liefst langs elkaar. Ik heb al wat gezocht op het internet en verschillende zaken uitgeprobeerd en dit blijkt niet te lukken. Kan iemand mij hiermee helpen ?

css:

Code: 
#container
{
	
	margin: auto;
	width: 1000px;
	border:1px solid #FF0000;
}

#Logo{
	border:1px solid ;
	width:240px;
	height:90px;
	margin: 0px;
	float: left;
	text-align: center;
}

#knoppen{
	
	width:350px;
	height:50px;
	margin: 0px;
	border:1px solid #000000;
	top: 1px;
	text-align: center;
	background-color: #707070;
	float: left;

}

html:

Code: 
<div id="container">
			
			
	<div id="logo">
	<img src='images/logo.bmp'>
	</div>
			
			
			
	<div id="knoppen">
"hier komt de knoppenbalk in een tabel"			
	</div>
			
			
			
	<div id="content">
		de tekst	
	</div>
			
			
</div>
 
kun je misschien iets duidelijker zijn met de vraag? het is n.l niet helemaal duidelijk wat je precies bedoeld. (langs elkaar zetten ?) voeg anders ff een img toe hoe je t wil heben
 
Laatst bewerkt:
Zo is het nu:

websitevoor.jpg



En zo wil ik het hebben:

websitena.jpg


dus de twee bovenste div's moeten langs elkaar komen, en momenteel blijven ze automatisch onder elkaar.
 
de html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<link href="stijl.css" rel="stylesheet" media="screen" />
</head>
<body>

<div id="container">

<div id="header">

<img src='images/vb.jpg'/>

<div id="menu">
<ul id="main_menu">
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
<li><a href="">link 4</a></li>
<li><a href="">link 5</a></li>
<li><a href="">link 6</a></li>
<li><a href="">link 7</a></li>
</ul>
</div>

</div><!-- einde header -->

<div id="content">
<h1>Onderwerp 1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scra</p>
<h1>Onderwerp 2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scra</p>
</div>

</div><!-- einde container -->

</body>
</html>

de css

/* CSS Document */

body{
margin:0;
padding:0;
}

#container{
width:1004px;
margin:0 auto;
border:1px solid #000;
}

#header{
width:1004px;
height:90px;
}

#header img{
float:left;
width:254px;
height:90px;
}

#menu{
float:left;
margin-top:20px;
width:700px;
height:40px;
}

ul#main_menu{
margin:0;
padding:0;
}

ul#main_menu li{
margin:0;
padding:0;
display:inline;
}

ul#main_menu li a{
float:left;
display:block;
width:100px;
height:40px;
background-color:red;
font:bold 12px/40px 'Arial';
color:#FFF;
text-align:center;
text-decoration:none;
}

ul#main_menu li a:hover{
background-color:green;
}

#content{
clear:both;
width:960px;
padding:22px;
background-color:#e9e9e9;
}

geloof dat dit ongeveer de bedoeling was :) verwijzing logo en stylesheet moet je nog wel ff aanpassen.
 
Laatst bewerkt:
heel fel bedankt! makkelijker kon ik het niet hebben denk ik.
Ik ga nu nog wat sleutelen aan de opmaak die ik wou.
Misschien nog 1 vraag:

de knoppen en de afbeelding plekken nu tegen elkaar, als ik daar ruimte tussen wil hebben is dat met een padding ?
 
margin is een div aan de buitenkant een waarde meegeven, padding aan de binnenkant.
geeft m een margin-left:50px; en hij zou het moeten doen
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan