(CSS) DIVS naast elkaar ..

Door Donster op 23-11-2009 21:34

3.243 views

Hallo , Allemaal

Ik heb een plaatje als achtergrond (in het midden) en het is de bedoeling dat de divs mooi gelijk staan met dat plaatje ( wat nu dus zo is)

Nu zit ik echter met het probleem dat ik 2 divs naast elkaar wil hebben , ik heb ze voor het gemak even #links en #rechts genoemd.

Als ik een float gebruik dan komen de divs helemaal links en recht van de pagina , maar ik wil ze gewoon naast elkaar hebben staan in het midden stuk.

Hier de code (als je dit kopieerd en html pagina bekijkt snap je wel wat ik bedoel .. ik wil gewoon de linker en rechter naast elkaar .. ( nu zie je ze wel naast elkaar , maar allebei aan beide zeiden van de "hele" pagina)


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
body {
	background:#f8f7e5 url(achtergrond.jpg) no-repeat center top;
	color:#333;
	margin:0;
	padding:0;
}
#content {
	width:860px;
	background:#fff;
	border:solid 0 #ccc;
	margin:0 auto;
	padding:20px;
}
h1 {
	margin:0;
	padding:0;
}
#header {
	width:100%;
	background:#000;
	border:solid 0 #ccc;
	margin:0 auto;
	padding:50px;
}
#bovenste {
	width:860px;
	background:#345;
	border:solid 0 #ccc;
	margin:15px auto 0;
	padding:20px;
}
#zoekbalk {
	width:860px;
	background:#531;
	border:solid 0 #ccc;
	margin:0 auto;
	padding:20px;
}
#rechts {
	width:430px;
	float:right;
	background:#731;
	border:solid 0 #ccc;
	margin:0 auto;
	padding:20px;
}
#links {
	width:430px;
	float:left;
	background:#221;
	border:solid 0 #ccc;
	margin:0 auto;
	padding:20px;
}
</style>
</head>
<body>
</div>
<div id="header">Header</div>
<div id="bovenste">bovenste</div>
<div id="zoekbalk">zoekbalk</div>
<div id="rechts">rechts</div>
<div id="links">links</div>
<div id="content">
  <p style="padding-bottom: 800px"> </p>
</div>
</body>
</html>

iemand enig idee?
Bij voorbaat dank !

ps, de achtergrond is even denkbeeldig voor jullie .. maar zolang de recht en links gelijk staan aan de andere div's is het goed.

Jan Koehoorn

23-11-2009 21:40

Zet je divs "bovenste", "zoekbalk" en "rechts" en "links" gewoon in een container div die je de juiste breedte meegeeft (900px).

D Donster

23-11-2009 21:43

Heb het nu zo (na je advies):


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
body {
    background:#f8f7e5 url(achtergrond.jpg) no-repeat center top;
    color:#333;
    margin:0;
    padding:0;
}
#content {
    width:860px;
    background:#fff;
    border:solid 0 #ccc;
    margin:0 auto;
    padding:20px;
}
h1 {
    margin:0;
    padding:0;
}
#header {
    width:100%;
    background:#000;
    border:solid 0 #ccc;
    margin:0 auto;
    padding:50px;
}
#bovenste {
    width:860px;
    background:#345;
    border:solid 0 #ccc;
    margin:15px auto 0;
    padding:20px;
}
#zoekbalk {
    width:860px;
    background:#531;
    border:solid 0 #ccc;
    margin:0 auto;
    padding:20px;
}
#rechts {
    width:400px;
    float:right;
    background:#731;
    border:solid 0 #ccc;
    margin:0 auto;
    padding:20px;
}
#links {
    width:420px;
    float:left;
    background:#221;
    border:solid 0 #ccc;
    margin:0 auto;
    padding:20px;
}
#container {
width: 900px; background: #333;
margin: 0 auto 0 auto;
/* margin zet de hele container in het midden */
}
</style>
</head>
<body>
<div id="header">Header</div>
</div>
<div id="container">
<div id="bovenste">bovenste</div>
<div id="zoekbalk">zoekbalk</div>

<div id="rechts">rechts</div>
<div id="links">links</div>
</div>
</body>
</html>

Opeens zijn de divs wel groter dan de achtergrond (langer aan beide kanten) , terwijl die grote niet veranderd is hoe kan dat? haha

R Robert Deiman

23-11-2009 21:57

@Donster
Je hebt meteen na je body een sluittag van een div staan, die mag weg.

Om de div:links en div:rechts zet je een div (alleen om die beide divjes heen) met als id: container. Dat is de container div waar Jan het over heeft.

Die container div kan je een width meegeven van 900px en net als die andere divs (margin:0px auto) in het midden plaatsen. Omdat "links" en "rechts" daarbinnen staan, worden die ook gecentreerd.

D Donster

23-11-2009 22:00

Net code ge-update zie vorige bericht ..

Is dit een goede manier zo , of kan ik dan problemen verwachten met andere browsers mbt de achtegrond?

Uitleg: De achtergrond is een strook die door het midden loopt en de divs zijn precies even groot (lang) als de achtergrond .. althans , nu moet ik de lengte wat aanpassen :-)

Jan Koehoorn

23-11-2009 22:07

Je hebt op je divs rechts en links een float en een margin. In IE6 geeft dat problemen. Om dat te fixen geef je ze een display: inline.

D Donster

23-11-2009 22:24

Nog 1 ding dat ik niet begrijp .

Ik heb alles (ook mijn container 860px)
Nu heb ik #links en #rechts allebei 430px , dat maakt samen ook 860 lijkt me .. echter zijn de divs dan te lang om naast elkaar te staan .. ( ik heb ook geen tussen marge ofzo..)

Begrijp ik het DIV principe verkeerd? ;-)

Laatste code na jullie suggesties:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css">
body {
	background:#f8f7e5 url(achtergrond.jpg) no-repeat center top;
	color:#333;
	margin:0;
	padding:0;
}
h1 {
	margin:0;
	padding:0;
}
#header {
	width:100%;
	background:#000;
	border:solid 0 #ccc;
	margin:0 auto;
	padding:50px;
}
#container {
	width: 860px;
	background: #333;
	margin: 0 auto 0 auto;/* margin zet de hele container in het midden */
}
#bovenste {
	width:860px;
	background:#345;
	border:solid 0 #ccc;
	margin:15px auto 0;
	padding:20px;
}
#zoekbalk {
	width:860px;
	background:#531;
	border:solid 0 #ccc;
	margin:0 auto;
	padding:20px;
}
#rechts {
	width:430px;
	display:inline;
	float:right;
	background:#731;
	border:solid 0 #ccc;
	margin:0 auto;
	padding:20px;
}
#links {
	width:430px;
	display:inline;
	float:left;
	background:#221;
	border:solid 0 #ccc;
	margin:0 auto;
	padding:20px;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="container">
  <div id="bovenste">bovenste</div>
  <div id="zoekbalk">zoekbalk</div>
  <div id="rechts">rechts</div>
  <div id="links">links</div>
</div>
</body>
</html>

Zoviezo heel erg bedankt voor jullie hulp tot nu toe!

Jan Koehoorn

23-11-2009 22:29

Je moet padding bij de width optellen, zowel links als rechts. Als je dus padding: 20px; hebt, moet je er 40px bij optellen. Vandaar dat ik 900px noemde in een vorige post ;-)

D Donster

23-11-2009 22:31

Ik begrijp het helemaal.

bedankt voor jullie snelle en goede hulp!
Dan ga ik nu maar een slaapje doen en dromen over divjes... :-)

Prettige avond nog!

M Mr.Moe

24-11-2009 10:59

Jan Koehoorn schreef op 23.11.2009 22:29
Je moet padding bij de width optellen, zowel links als rechts. Als je dus padding: 20px; hebt, moet je er 40px bij optellen. Vandaar dat ik 900px noemde in een vorige post ;-)

Volgens mij is dat bij margin Jan. Padding is binnen je DIV zelf.

Joakim Broden

24-11-2009 11:09

Mr.Moe,

Nee padding moet je er juist bij optellen.. Als ik een div heb van 300px breed met een padding van 20px word het: 300px+20px+20px

Reageren

Inloggen om te reageren