Toon posts:

[CSS] Krijg div niet gecentreerd

Pagina: 1
Acties:

vrijdag 11 februari 2005 22:27

Acties:

Verwijderd

Topicstarter
Ik gebruik een aantal divs om mijn oude tables pagina te gaan veranderen. Momenteel is het natuurlijk nog een prototype, maar ik heb helaas al een probleem waar ik niet voorbij raak. De onderste div, hoewel deze gebruik maakt van dezelfde margin als de div die wel werkt, wil niet centreren...

Doe ik iets fout? Ik ben namelijk nog niet lang met CSS bezig en dit zou misschien best op een eenvoudige manier op te lossen zijn, dus in plaats van nog meer tijd te verspillen met door tutorials te spitten dacht ik het gewoon eens te vragen.

code:
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
html { 
    padding: 0;
    margin: 0;
    height: 100%;
}

body {
    background-color: #e1ddd9;
    font-size: 12px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    color:#564b47;  
    padding: 0;
    margin: 0;
    height: 100%;
}

#geheel {
    width: 800px;
    margin: auto;
    border-left: 2px solid #564b47;
    border-right: 2px solid #564b47;
    padding: 0;
    background-color: #000;  
    height: 100%;  
}
#top {
    margin: 0;
    padding: 0;
    border: 0;
    background: #666;
    width: 800px;
    height: 100px;
}
#center {
    width: 496px;
    margin: 0;
    border-left: 2px solid #564b47;
    border-right: 2px solid #564b47;
    padding: 0;
    background-color: #ffffff;  
    float:left;
}
#left {
    position: relative;
    left: 0;
    width: 150px;
    color: #564b47;
    margin: 0px; 
    padding: 0;
    float:left;
    background-color:#0000CC;
}
#right {
    position: relative;
    right: 0;
    width: 150px;
    color: #564b47;
    margin: 0; 
    padding: 0;
    float:left;
    background-color:#0000CC;
}
#bottom {
    position: absolute;
    bottom: 0;
    margin: auto;
    overflow: visible;
    padding: 0;
    border: 0;
    background: yellow;
    width: 800px;
    height: 29px;
    z-index: 5;
}
-->
</style>
</head>

<body>
<div id="geheel">
<div id="top">top</div>
<div id="left">left</div>
<div id="center">center</div>
<div id="right">rechts</div>
</div>
<div id="bottom">bottom</div>
</body>
</html>


Het is allemaal heel lelijk, maar dit is gewoon om de divs goed te herkennen (natuurlijk) :)

vrijdag 11 februari 2005 22:29

Acties:
  • HyperioN
  • Registratie: April 2003
  • Laatst online: 25-04 09:11

HyperioN

position: absolute; en
margin: auto;
gaan niet echt lekker samen :) in je #bottom that is.

waarom zet je #bottom ook niet gewoon in #geheel?

[ Voor 37% gewijzigd door HyperioN op 11-02-2005 22:32 ]

vrijdag 11 februari 2005 22:31

Acties:
  • Thijsmans
  • Registratie: Juli 2001
  • Laatst online: 22:23

Thijsmans

⭐⭐⭐⭐⭐ (5/5)

Dat komt natuurlijk doordat je position->absolute hebt opgegeven :) Overigens heeft A List Apart een artikel geschreven over het dynamisch plaatsen van footers dmv javascript. Als je pagina nl. langer is dan het scherm, blijft div#bottom nl. aan de onderkant van de browser plakken, en niet aan de onderkant van de pagina :)

Privacy-adepten vinden op AVGtekst.nl de Nederlandse AVG-tekst voorzien van uitspraken en besluiten.

vrijdag 11 februari 2005 22:34

Acties:

Verwijderd

Als je #geheel eens de property position: relative; opgeeft, dan gebeurt er als het goed is niet zo gek veel, behalve dat alle absoluut gepositioneerde elementen uitgaan van de linkerbovenkant van dat element. Dus ook die #bottom.

zaterdag 12 februari 2005 17:15

Acties:

Verwijderd

Topicstarter
Kan ik hem in het geheel helemaal vanonder zetten maar ook gecentreerd? Ik dacht dat daarvoor absolute positioning nodig zou zijn...

In ieder geval is dit nu de code, en ziet het er goed uit, behalve dan dat de gele band zichtbaar zou moeten zijn zonder te scrollen:

code:
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
html { 
    padding: 0;
    margin: 0;
    height: 100%;
}

body {
    background-color: #e1ddd9;
    font-size: 12px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    color:#564b47;  
    padding: 0;
    margin: 0;
    height: 100%;
}

#geheel {
    position: relative;
    width: 800px;
    margin: auto;
    border-left: 2px solid #564b47;
    border-right: 2px solid #564b47;
    padding: 0;
    background-color: #000;  
    height: 100%;  
}
#top {
    margin: 0;
    padding: 0;
    border: 0;
    background: #666;
    width: 800px;
    height: 100px;
}
#center {
    width: 496px;
    margin: 0;
    border-left: 2px solid #564b47;
    border-right: 2px solid #564b47;
    padding: 0;
    background-color: #ffffff;  
    float:left;
}
#left {
    position: relative;
    left: 0;
    width: 150px;
    color: #564b47;
    margin: 0px; 
    padding: 0;
    float:left;
    background-color:#0000CC;
}
#right {
    position: relative;
    right: 0;
    width: 150px;
    color: #564b47;
    margin: 0; 
    padding: 0;
    float:left;
    background-color:#0000CC;
}
#bottom {
    position: relative;
    bottom: 0;
    margin: auto;
    overflow: visible;
    padding: 0;
    border: 0;
    background: yellow;
    width: 800px;
    height: 29px;
    z-index: 5;
}
-->
</style>
</head>

<body>
<div id="geheel">
<div id="top">top</div>
<div id="left">left</div>
<div id="center">center</div>
<div id="right">rechts</div>
</div>
<div id="bottom">bottom</div>
</body>
</html>

[ Voor 88% gewijzigd door Verwijderd op 12-02-2005 17:18 ]

zondag 13 februari 2005 02:17

Acties:

Verwijderd

Topicstarter
Prammenhanger schreef op vrijdag 11 februari 2005 @ 22:31:
Dat komt natuurlijk doordat je position->absolute hebt opgegeven :) Overigens heeft A List Apart een artikel geschreven over het dynamisch plaatsen van footers dmv javascript. Als je pagina nl. langer is dan het scherm, blijft div#bottom nl. aan de onderkant van de browser plakken, en niet aan de onderkant van de pagina :)
Btw, dit script werkt niet omdat mijn #geheel al 100% hoog moet zijn, en dan zal de footer altijd onder de viewport komen te staan... :/
Pagina: 1
Reageer