lastig probleem met centering div's
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
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
<?
<html>
<head>
<style type="text/css">
body {
margin-left:25%;
margin-right:25%;
}
</style>
</head>
<body style="margin:0;padding:0;text-align:center;">
<div style="color:#00FF00;background:yellow;position:absolute;min-height:100%;height:auto !important;height:100%;width:100%;margin-top:0px;padding:0;">
<div style="background:#999999;width:100%;float:left;bottom:0;left:0;">
blaat<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="color:#FFFFFF;background:#00ff00;width:500px;float:left;">
<div style="background:black;width:350px;float:left;">
links<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="background:red;width:150px;float:right;">
rechts<br><br><br><br><br><br>
</div>
</div>
<div style="background:navy;width:100%;position:absolute;bottom:0;left:0;">
blaat
</div>
</div>
</body>
</html>
?>
<html>
<head>
<style type="text/css">
body {
margin-left:25%;
margin-right:25%;
}
</style>
</head>
<body style="margin:0;padding:0;text-align:center;">
<div style="color:#00FF00;background:yellow;position:absolute;min-height:100%;height:auto !important;height:100%;width:100%;margin-top:0px;padding:0;">
<div style="background:#999999;width:100%;float:left;bottom:0;left:0;">
blaat<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="color:#FFFFFF;background:#00ff00;width:500px;float:left;">
<div style="background:black;width:350px;float:left;">
links<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="background:red;width:150px;float:right;">
rechts<br><br><br><br><br><br>
</div>
</div>
<div style="background:navy;width:100%;position:absolute;bottom:0;left:0;">
blaat
</div>
</div>
</body>
</html>
?>
Hier is de code. Het handigste is om het zelf eens te proberen. Ik probeer de groene div met daarin de zwarte en rode te centreren.
De uiteindelijke bedoeling van het geheel is dat de blauwe div altijd onderaan het scherm blijft maar zodra de content groter wordt wel naar onder gaat.
Heb echt overal gezocht en de standaard dingen met text-align geprobeerd maar niets helpt. Ben beetje ten einde raad.
Ten tweede, text align?! Hoe kom je erbij? text align is niet bedoeld om een div te centreren! Je tekst (denk aan p of h1 of weet ik veel ) moet je hiermee centreren. Bovendien werkt het op de kinderen van waar je gestyled hebt.
Wat je moet doen is:
a: margin:0px auto;
b: een breedte mee geven ( stel: 80% ) en dan margin-left: 10%
of c: absoluut/relatief positioneren met een margin left
Je kunt het ook floaten, en een margin mee geven maar floats werken vaak niet helemaal optimaal in oudere browsers.
Merijn schreef op 11.02.2009 00:01:
Om te beginnen, je hoeft NOOIT <br> te gebruiken om ruimte te creeren. Daar heb je css voor.
Ten tweede, text align?! Hoe kom je erbij? text align is niet bedoeld om een div te centreren! Je tekst (denk aan p of h1 of weet ik veel ) moet je hiermee centreren. Bovendien werkt het op de kinderen van waar je gestyled hebt.
Wat je moet doen is:
a: margin:0px auto;
b: een breedte mee geven ( stel: 80% ) en dan margin-left: 10%
of c: absoluut/relatief positioneren met een margin left
Je kunt het ook floaten, en een margin mee geven maar floats werken vaak niet helemaal optimaal in oudere browsers.
Ten tweede, text align?! Hoe kom je erbij? text align is niet bedoeld om een div te centreren! Je tekst (denk aan p of h1 of weet ik veel ) moet je hiermee centreren. Bovendien werkt het op de kinderen van waar je gestyled hebt.
Wat je moet doen is:
a: margin:0px auto;
b: een breedte mee geven ( stel: 80% ) en dan margin-left: 10%
of c: absoluut/relatief positioneren met een margin left
Je kunt het ook floaten, en een margin mee geven maar floats werken vaak niet helemaal optimaal in oudere browsers.
De <br> zijn om te kijken of de footer wel op zijn plek blijft en niet om ruimte te creeren...
Dat margin auto heb ik al geprobeerd en werkt niet...
Om wat te tonen ik heb de div nu in het midden maar nu gaat de footer niet omlaag zodra de content in de zwarte div groter dan het scherm word!
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
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
<?
<html>
<head>
<style type="text/css">
body {
}
</style>
</head>
<body style="margin:0;padding:0;">
<div align=center style="background:#00ff00;width:500px;margin-left:auto;margin-right:auto;">
<div style="background:black;width:350px;float:left;position:relative;">
links<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="background:red;width:150px;float:right;">
rechts<br><br><br><br><br><br>
</div>
</div>
<div style="background:navy;width:100%;position:absolute;bottom:0;left:0;">
blaat
</div>
</body>
</html>
?>
<html>
<head>
<style type="text/css">
body {
}
</style>
</head>
<body style="margin:0;padding:0;">
<div align=center style="background:#00ff00;width:500px;margin-left:auto;margin-right:auto;">
<div style="background:black;width:350px;float:left;position:relative;">
links<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="background:red;width:150px;float:right;">
rechts<br><br><br><br><br><br>
</div>
</div>
<div style="background:navy;width:100%;position:absolute;bottom:0;left:0;">
blaat
</div>
</body>
</html>
?>
Gewijzigd op 01/01/1970 01:00:00 door arne
De footer heeft geen hoogte meegekregen, je gebruikt position absolute wat erg smerig is... en alleen bij uitzondering gebruikt wordt...
verder hoop ik dat je de CSS nog in een aparte sheet gooit.
Als je ff een screenshotje maakt, met hoe het er uiteindelijk echt uit moet komen te zien, dan zal ik het wel voor je bakken.
http://www.refix.nl/blaat.JPG
Zo moet het komen. Let op het probleem waar het allemaal mee begon was dat die stink footer niet naar onder wilde gaan zodra die zwarte of rode div groter wordt dan het scherm...
als het kleiner is moet hij beneden aan het scherm blijven.
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
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
<?
<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
}
.header {
width: 100%;
height: 100px;
background: #CCC;
}
.content_container
{
width: 700px;
margin: 0 auto;
}
.menu {
float: left;
width: 300px;
background: #DDD;
}
.content {
float: left;
width: 400px;
background: #EEE;
margin-bottom: 30px;
}
.footer {
height: 20px;
bottom: 0;
position: fixed;
width: 100%;
background: #BBB;
clear:both;
}
</style>
</head>
<body>
<div class="header">
header
</div>
<div class="content_container">
<div class="menu">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien eu mi. Aliquam nibh. Maecenas purus eros, euismod vel, semper in, mattis quis, pede. Ut congue sagittis pede. In et magna. Praesent fringilla erat ac pede. Nulla a est quis augue eleifend pellentesque. Ut iaculis enim id nunc. Proin ut enim. Integer eu est. Etiam ut velit vitae magna egestas consectetur. Vestibulum hendrerit sapien ac urna. Suspendisse vitae ligula. In hac habitasse platea dictumst. Morbi aliquam, est faucibus dapibus dapibus, velit velit varius leo, mattis placerat augue mi non nibh. Nunc vel dolor. Curabitur turpis libero, imperdiet eget, tincidunt sed, luctus laoreet, lectus. Sed quis tellus. Aenean vitae est sit amet risus hendrerit rutrum.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien eu mi. Aliquam nibh. Maecenas purus eros, euismod vel, semper in, mattis quis, pede. Ut congue sagittis pede. In et magna. Praesent fringilla erat ac pede. Nulla a est quis augue eleifend pellentesque. Ut iaculis enim id nunc. Proin ut enim. Integer eu est. Etiam ut velit vitae magna egestas consectetur. Vestibulum hendrerit sapien ac urna. Suspendisse vitae ligula. In hac habitasse platea dictumst. Morbi aliquam, est faucibus dapibus dapibus, velit velit varius leo, mattis placerat augue mi non nibh. Nunc vel dolor. Curabitur turpis libero, imperdiet eget, tincidunt sed, luctus laoreet, lectus. Sed quis tellus. Aenean vitae est sit amet risus hendrerit rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien eu mi. Aliquam nibh. Maecenas purus eros, euismod vel, semper in, mattis quis, pede. Ut congue sagittis pede. In et magna. Praesent fringilla erat ac pede. Nulla a est quis augue eleifend pellentesque. Ut iaculis enim id nunc. Proin ut enim. Integer eu est. Etiam ut velit vitae magna egestas consectetur. Vestibulum hendrerit sapien ac urna. Suspendisse vitae ligula. In hac habitasse platea dictumst. Morbi aliquam, est faucibus dapibus dapibus, velit velit varius leo, mattis placerat augue mi non nibh. Nunc vel dolor. Curabitur turpis libero, imperdiet eget, tincidunt sed, luctus laoreet, lectus. Sed quis tellus. Aenean vitae est sit amet risus hendrerit rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien eu mi. Aliquam nibh. Maecenas purus eros, euismod vel, semper in, mattis quis, pede. Ut congue sagittis pede. In et magna. Praesent fringilla erat ac pede. Nulla a est quis augue eleifend pellentesque. Ut iaculis enim id nunc. Proin ut enim. Integer eu est. Etiam ut velit vitae magna egestas consectetur. Vestibulum hendrerit sapien ac urna. Suspendisse vitae ligula. In hac habitasse platea dictumst. Morbi aliquam, est faucibus dapibus dapibus, velit velit varius leo, mattis placerat augue mi non nibh. Nunc vel dolor. Curabitur turpis libero, imperdiet eget, tincidunt sed, luctus laoreet, lectus. Sed quis tellus. Aenean vitae est sit amet risus hendrerit rutrum.
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
?>
<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
}
.header {
width: 100%;
height: 100px;
background: #CCC;
}
.content_container
{
width: 700px;
margin: 0 auto;
}
.menu {
float: left;
width: 300px;
background: #DDD;
}
.content {
float: left;
width: 400px;
background: #EEE;
margin-bottom: 30px;
}
.footer {
height: 20px;
bottom: 0;
position: fixed;
width: 100%;
background: #BBB;
clear:both;
}
</style>
</head>
<body>
<div class="header">
header
</div>
<div class="content_container">
<div class="menu">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien eu mi. Aliquam nibh. Maecenas purus eros, euismod vel, semper in, mattis quis, pede. Ut congue sagittis pede. In et magna. Praesent fringilla erat ac pede. Nulla a est quis augue eleifend pellentesque. Ut iaculis enim id nunc. Proin ut enim. Integer eu est. Etiam ut velit vitae magna egestas consectetur. Vestibulum hendrerit sapien ac urna. Suspendisse vitae ligula. In hac habitasse platea dictumst. Morbi aliquam, est faucibus dapibus dapibus, velit velit varius leo, mattis placerat augue mi non nibh. Nunc vel dolor. Curabitur turpis libero, imperdiet eget, tincidunt sed, luctus laoreet, lectus. Sed quis tellus. Aenean vitae est sit amet risus hendrerit rutrum.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien eu mi. Aliquam nibh. Maecenas purus eros, euismod vel, semper in, mattis quis, pede. Ut congue sagittis pede. In et magna. Praesent fringilla erat ac pede. Nulla a est quis augue eleifend pellentesque. Ut iaculis enim id nunc. Proin ut enim. Integer eu est. Etiam ut velit vitae magna egestas consectetur. Vestibulum hendrerit sapien ac urna. Suspendisse vitae ligula. In hac habitasse platea dictumst. Morbi aliquam, est faucibus dapibus dapibus, velit velit varius leo, mattis placerat augue mi non nibh. Nunc vel dolor. Curabitur turpis libero, imperdiet eget, tincidunt sed, luctus laoreet, lectus. Sed quis tellus. Aenean vitae est sit amet risus hendrerit rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien eu mi. Aliquam nibh. Maecenas purus eros, euismod vel, semper in, mattis quis, pede. Ut congue sagittis pede. In et magna. Praesent fringilla erat ac pede. Nulla a est quis augue eleifend pellentesque. Ut iaculis enim id nunc. Proin ut enim. Integer eu est. Etiam ut velit vitae magna egestas consectetur. Vestibulum hendrerit sapien ac urna. Suspendisse vitae ligula. In hac habitasse platea dictumst. Morbi aliquam, est faucibus dapibus dapibus, velit velit varius leo, mattis placerat augue mi non nibh. Nunc vel dolor. Curabitur turpis libero, imperdiet eget, tincidunt sed, luctus laoreet, lectus. Sed quis tellus. Aenean vitae est sit amet risus hendrerit rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus sapien eu mi. Aliquam nibh. Maecenas purus eros, euismod vel, semper in, mattis quis, pede. Ut congue sagittis pede. In et magna. Praesent fringilla erat ac pede. Nulla a est quis augue eleifend pellentesque. Ut iaculis enim id nunc. Proin ut enim. Integer eu est. Etiam ut velit vitae magna egestas consectetur. Vestibulum hendrerit sapien ac urna. Suspendisse vitae ligula. In hac habitasse platea dictumst. Morbi aliquam, est faucibus dapibus dapibus, velit velit varius leo, mattis placerat augue mi non nibh. Nunc vel dolor. Curabitur turpis libero, imperdiet eget, tincidunt sed, luctus laoreet, lectus. Sed quis tellus. Aenean vitae est sit amet risus hendrerit rutrum.
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
?>
Is een optie... kan er alleen niet zo 1,2,3 opkome dat ie inderdaad doet wat jij wil.
Ik heb nu dat die footer altijd onderaan staat (iig in FF)...
Verbeter me maar aub :P