firefox center fixed div
Ik heb een vraagje.
Ik heb een layout gemaakt voor IE6, 7 en Firefox en deze bevat een aantal divs onderelkaar waarvan de bovenste twee fixed (header en menu).
Nu wil ik de divs gecentreerd weergeven op de pagina, maar firefox lijkt problemen te hebben, want die laat ze gewoon linksboven in mijn scherm zien.
In IE6 en 7 werkt het wel prima.
Heb van alles geprobeerd, maar niets lijkt te helpen.
Ik heb margin: 0px auto; geprobeerd en left: 50%; margin-left: -(width/2)px;, maar niets lijkt te werken voor Firefox.
Ik snap er niks meer van, heeft iemand een idee?
Dit is de bron van het bestand:
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> CSS Div testing </title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
border: 0;
height: 100%;
overflow-y: auto;
}
#header {
border: 1px solid #000;
margin: 0px auto;
width: 700px;
height: 60px;
position: fixed;
top: 0px;
}
#menu {
border: 1px solid #000;
margin: 0px auto;
width: 700px;
height: 20px;
position: fixed;
top: 0px;
}
#page {
border: 1px solid #000;
margin: 0px auto;
margin-top: 0px;
width: 700px;
}
#footer {
border: 1px solid #000;
margin: 0px auto;
margin-top: 0px;
width: 700px;
height: 30px;
}
* html #header {
position: absolute;
}
* html #menu {
position: absolute;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div id="header">
Header
</div>
<div id="menu">
Menu
</div>
<div id="page">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
</p>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</p>
<p>
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> CSS Div testing </title>
<style type="text/css">
body {
margin: 0 auto;
padding: 0;
border: 0;
height: 100%;
overflow-y: auto;
}
#header {
border: 1px solid #000;
margin: 0px auto;
width: 700px;
height: 60px;
position: fixed;
top: 0px;
}
#menu {
border: 1px solid #000;
margin: 0px auto;
width: 700px;
height: 20px;
position: fixed;
top: 0px;
}
#page {
border: 1px solid #000;
margin: 0px auto;
margin-top: 0px;
width: 700px;
}
#footer {
border: 1px solid #000;
margin: 0px auto;
margin-top: 0px;
width: 700px;
height: 30px;
}
* html #header {
position: absolute;
}
* html #menu {
position: absolute;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div id="header">
Header
</div>
<div id="menu">
Menu
</div>
<div id="page">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
</p>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</p>
<p>
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Ik dank u allen alvast voor de moeite.
#header, #menu {
position: relative;
}
groet,
Twan
Waarom die position:fixed en position:absolute? Die heb je waarschijnlijk helemaal niet nodig en zijn hoogstwaarschijnlijk de oorzaak van je probleem. Sloop die er dus eens uit...
Maar #header en #menu op position: relative; zetten zorgt ervoor dat hij het ook centreert in FF, alleen dan zijn ze niet meer sticky in IE7 en FF en ik wil de header en het menu divje wel sticky hebben.
Blanche schreef op 23.03.2008 23:22:
Waarom die position:fixed en position:absolute? Die heb je waarschijnlijk helemaal niet nodig en zijn hoogstwaarschijnlijk de oorzaak van je probleem. Sloop die er dus eens uit...
Die absolute is voor IE6 om de header sticky te maken, want die begrijpt fixed niet.
Gewijzigd op 01/01/1970 01:00:00 door Jeffrey
Wat bedoel je met 'sticky'?
#menu, #header {
position: relative;
//position: absolute;
}
IE leest alsnog de laatste position aankondiging en overschrijft dus RELATIVE, IE schrapt alle " vreemde " karakters die je ervoor zet ( kutbrowser is het ook BLEGH )
Zou moeten werken, maar Blanche heeft wel een punt. Zit een hoop wazige / nutteloze crap in je code, zoek de betekenissen van de eigenschappen die je opgeeft even op, ( in plaats van telkens op de gok F5'en )
( EDIT: Je zou ook trouwens je top gewoon absoluut kunnen maken en 1 content wrapper div overlfow: auto mee kunnen geven , maar ik weet niet precies wat je wilt bereiken )
Gewijzigd op 01/01/1970 01:00:00 door Toine vd P
Met sticky bedoel ik dat de content er onderdoor scrolled.
Dus dat hij altijd aan de bovenkant van de pagina blijft plakken.
We gaan het nog even proberen.
Misschien is sommige css wazig, vind ik namelijk ook, maar het één en ander is nodig om in IE6 de header altijd bovenaan de pagina te laten plakken.
Bijv de * html #header met position: absolute.
Gewijzigd op 01/01/1970 01:00:00 door Jeffrey
Leuke pagina is dat trouwens, heb er al een tijd doorgebracht om wat layouts te bekijken.
Om de hele boel te centreren, zet je alles in een container div met de volgende CSS:
div#container {margin: 0 auto; width: 700px;}
Edit:
Voorbeeld: non-scrolling header en menu
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Je voorbeeld is zoals ik het wil! Top.
Zal me toch eens wat meer gaan verdiepen in de div wereld.
Ik werkte voornamelijk met tables omdat ik met data uit databases werkte, maar voor de layout van je site zijn divs stukken prettiger.
Quote:
Dat je met een database werkt is nog geen reden om tabellen voor je layout te gebruiken. Een database icm divs en CSS werkt net zo makkelijk, zo niet makkelijker ;-)Ik werkte voornamelijk met tables omdat ik met data uit databases werkte
Inmiddels weet ik wel beter en besef ik dat divs de bom zijn. ;-)