Css DIV positie vraag! ( met voorbeeld)
Zie plaatje : ( kan overigens 18+ banners hebben deze image host site!)
http://www.imagefap.com/image.php?id=307917750
Ik wil dat blauwe vak links naast het groene div vak hebben .. idem voor rechterkant..
Hier de code:
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
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
<!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=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
width: 770px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.header {
background-color: #CCCCCC;
height: 150px;
width: 770px;
}
.center {
width: 570px;
height: 150px;
background-color: #99FF66;
}
.right {
width: 100px;
float: right;
background-color: #00CCCC;
height: 130px;
}
.left {
width: 100px;
float: left;
background-color: #006699;
height: 150px;
}
-->
</style>
</head>
<body>
<div class = "header">Header</div>
<div class = "center">center</div>
<div class = "right">right</div>
<div class = "left">left</div>
</body>
</html>
Nu kwam ik zelf op zoiets als hieronder , maar dan krijg je het probleem dat 'zodra het content in het middelste stuk groter word 'zowel de rechter als de linker kant naar beneden schuiven .. dus er een wit stuk tussen valt)
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
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
<!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=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
width: 770px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.header {
background-color: #CCCCCC;
height: 150px;
width: 770px;
}
.center {
width: 570px;
height: 150px;
background-color: #99FF66;
margin-left: 100px;
margin-right: 100px;
}
.right {
width: 100px;
float: right;
background-color: #00CCCC;
position: relative;
top: -150px;
height: 150px;
}
.left {
width: 100px;
float: left;
background-color: #006699;
height: 150px;
position: relative;
top: -150px;
}
-->
</style>
</head>
<body>
<div class = "header">Header</div>
<div class = "center">center</div>
<div class = "right">right</div>
<div class = "left">left</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
width: 770px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.header {
background-color: #CCCCCC;
height: 150px;
width: 770px;
}
.center {
width: 570px;
height: 150px;
background-color: #99FF66;
margin-left: 100px;
margin-right: 100px;
}
.right {
width: 100px;
float: right;
background-color: #00CCCC;
position: relative;
top: -150px;
height: 150px;
}
.left {
width: 100px;
float: left;
background-color: #006699;
height: 150px;
position: relative;
top: -150px;
}
-->
</style>
</head>
<body>
<div class = "header">Header</div>
<div class = "center">center</div>
<div class = "right">right</div>
<div class = "left">left</div>
</body>
</html>
Hoe doe ik zoiets op een correcte manier?
Gewijzigd op 01/01/1970 01:00:00 door Donster
Dit is de goede code:
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
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
<!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=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
width: 770px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.header {
background-color: #CCCCCC;
height: 150px;
width: 770px;
}
.center {
width: 570px;
height: 150px;
background-color: #99FF66;
float: left;
}
.right {
width: 100px;
float: left;
background-color: #00CCCC;
height: 130px;
}
.left {
width: 100px;
float: left;
background-color: #006699;
height: 150px;
}
-->
</style>
</head>
<body>
<div class = "header">Header</div>
<div class = "left">left</div>
<div class = "center">center</div>
<div class = "right">right</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
width: 770px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.header {
background-color: #CCCCCC;
height: 150px;
width: 770px;
}
.center {
width: 570px;
height: 150px;
background-color: #99FF66;
float: left;
}
.right {
width: 100px;
float: left;
background-color: #00CCCC;
height: 130px;
}
.left {
width: 100px;
float: left;
background-color: #006699;
height: 150px;
}
-->
</style>
</head>
<body>
<div class = "header">Header</div>
<div class = "left">left</div>
<div class = "center">center</div>
<div class = "right">right</div>
</body>
</html>
ps. right heeft in bovenstaande code ook geen absolute positie, maar dat is geen probleem zolang je left maar wel een absolute positie geeft...
Gewijzigd op 01/01/1970 01:00:00 door Joren de Wit
Als je nu veel in het groene vlak zet , dan word het groen vlak langer dan het linker en rechtervlak .
Kun je er eigenlijk ook voor zorgen dat rechts en links helemaal meerekken met het groene 'center' vlak?
Je kan er dus niet een heel layout omheen bouwen , en alles laten meerekken ..
Iets om rekening mee te houden..
Vandaar dat ik er ook een beetje mee aan het oefen ben , normaal deed ik alles met tabellen namelijk :D
Bedankt voor je hulp nogmaals!!!
Gewijzigd op 01/01/1970 01:00:00 door Donster
Het is even wennen als je overstapt van tabellen naar css, je moet namelijk op een andere manier gaan denken...
Kijk eens wat rond op internet naar voorbeelden van css layouts, daar kun je heel veel van leren.