Div hoogte geven van 2 absolute div's
ik ben bezig met een site layout, alleen heb ik een probleempje IE/FF.
De layout zit zo in elkaar: header, menu, 2 kolommen (links en rechts), en een footer. Om de 2 kolommen heb ik een container met de achtergrond voor de 2 divjes. De layout ziet er goed uit in IE, alleen komt de achtergrond niet tot de onderkant van de kolommen in FF3b5. Weet iemand de oplossing hier voor?
Plaatjes van de layout tot nu toe:
IE7: http://img508.imageshack.us/img508/3695/sitelayiedy1.png
FF3b5: http://img138.imageshack.us/img138/6435/sitelayffbd5.png
Code:
:: HTML ::
(** is onbelangrijke code weggehaald, anders werd het te lang)
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
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
<!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="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<meta http-equiv="Content-Language" content="NL">
<title>Sven Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bg"></div>
<div id="header">
**
</div>
<div id="menubar">
**
</div>
<div id="content">
<div id="contentleft">
**
</div>
<div id="contentright">
**
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<meta http-equiv="Content-Language" content="NL">
<title>Sven Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bg"></div>
<div id="header">
**
</div>
<div id="menubar">
**
</div>
<div id="content">
<div id="contentleft">
**
</div>
<div id="contentright">
**
</div>
</div>
</body>
</html>
:: CSS ::
(Ook hier overbodig weggehaald)
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
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
html, body {
margin:0;
font: 13px Helvetica, Arial, sans-serif;
height:100%;
}
/* GLOBAL LAYOUT */
#bg {
position:absolute;
margin-top:153px;
background-image:url(images/content_bg.png);
width:100%;
height:200px;
z-index:-100;
}
#header {
width:100%;
height:100px;
background-image:url(images/header_bg.png);
}
#logo {
width:350px;
height:100px;
margin:auto;
}
#menubar {
width:100%;
height:52px;
background-image:url(images/menubar_bg.png);
text-align:center;
border-bottom:1px solid #3e3e3e;
}
#menubar img {
margin-left:8px;
margin-right:8px;
}
#content {
margin:auto;
margin-top:20px;
width:900px;
padding:5px;
background-color:white;
border:1px solid #ccc;
left:50%;
margin-left:-450px; /* - (width/2) */
position:relative;
border:1px solid red;
}
#contentleft {
width:625px;
margin-left:10px;
float:left;
border:1px solid red;
}
#contentright {
width:225px;
margin:0 10px;
border:1px solid red;
z-index:50;
float:right;
}
margin:0;
font: 13px Helvetica, Arial, sans-serif;
height:100%;
}
/* GLOBAL LAYOUT */
#bg {
position:absolute;
margin-top:153px;
background-image:url(images/content_bg.png);
width:100%;
height:200px;
z-index:-100;
}
#header {
width:100%;
height:100px;
background-image:url(images/header_bg.png);
}
#logo {
width:350px;
height:100px;
margin:auto;
}
#menubar {
width:100%;
height:52px;
background-image:url(images/menubar_bg.png);
text-align:center;
border-bottom:1px solid #3e3e3e;
}
#menubar img {
margin-left:8px;
margin-right:8px;
}
#content {
margin:auto;
margin-top:20px;
width:900px;
padding:5px;
background-color:white;
border:1px solid #ccc;
left:50%;
margin-left:-450px; /* - (width/2) */
position:relative;
border:1px solid red;
}
#contentleft {
width:625px;
margin-left:10px;
float:left;
border:1px solid red;
}
#contentright {
width:225px;
margin:0 10px;
border:1px solid red;
z-index:50;
float:right;
}
Gewijzigd op 01/01/1970 01:00:00 door Sven
Gewijzigd op 01/01/1970 01:00:00 door Stijn
Gewijzigd op 01/01/1970 01:00:00 door Erwin Nieuwenhuis