Css DIV positie vraag! ( met voorbeeld)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Donster

Donster

11/08/2006 19:01:00
Quote Anchor link
Ik ben een beetje aan het oefenen met Css Divs , en wil het volgende graag weten.

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)
PHP script in nieuw venster Selecteer het PHP script
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

<!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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


Hoe doe ik zoiets op een correcte manier?
Gewijzigd op 01/01/1970 01:00:00 door Donster
 
PHP hulp

PHP hulp

28/03/2024 16:49:32
 
Joren de Wit

Joren de Wit

11/08/2006 19:28:00
Quote Anchor link
Je zult left en right een absolute positie moeten geven en center laten floaten. Tevens ook de volgorde van je divs in je html code aanpassen.

Dit is de goede code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


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
 
Donster

Donster

11/08/2006 19:36:00
Quote Anchor link
Bedankt ik snap het , maar nog een vraagje:

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?
 
Joren de Wit

Joren de Wit

11/08/2006 19:43:00
Quote Anchor link
Volgens mij lukt dat niet op de manier zoals je je pagina nu opgebouwd hebt. En volgens mij is het ook niet zomaar mogelijk om de hoogte van verschillende divs aan elkaar te koppelen (correct me if i'm wrong)...
 
Donster

Donster

11/08/2006 20:08:00
Quote Anchor link
MMM is echter wel een nadeel ten opzichte van tabellen..
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
 
Joren de Wit

Joren de Wit

11/08/2006 20:24:00
Quote Anchor link
Het kán wel, alleen zul je je website dan anders op moeten bouwen ;)

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.