(CSS) DIVS naast elkaar ..
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)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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>
<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.
Gewijzigd op 01/01/1970 01:00:00 door Donster
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!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>
<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
Gewijzigd op 01/01/1970 01:00:00 door 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.
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 :-)
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!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>
<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!
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
bedankt voor jullie snelle en goede hulp!
Dan ga ik nu maar een slaapje doen en dromen over divjes... :-)
Prettige avond nog!
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.
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
Gewijzigd op 01/01/1970 01:00:00 door Mr.Moe
Dit onderwerp is trouwens opgelost .
Bedankt hiervoor.
Gewijzigd op 01/01/1970 01:00:00 door Donster