Na bijna 2 dagen te hebben omgeprutst met deze XHTML / CSS pagina begint de wanhoop zijn tol te eisen en ben ik een aantal hoofdharen armer.
Het probleem dat mijn hart zo bezwaard omvat de volgende twee bestanden:
En de html:
Ik ben al op een aantal problemen gestuit die ik onder andere met faux collumns van A list apart heb weten op te lossen, echter schrijft deze faux collumn het hele verhaal over in Internet explorer waardoor de pagina verder onzichtbaar wordt. De footer kent z'n plaats ook duidelijk niet, deze blijft in dit concept half in de content steken of verplaatst gewoon een heel stuk van de pagina naar rechts (IE).
Hopelijk heeft iemand een verhelderende uitleg voor me inzake mijn fouten, ik ben namelijk heel erg benieuwd welke fouten ik hier maak en welke logica daar achter zou zitten.
Het probleem dat mijn hart zo bezwaard omvat de volgende twee bestanden:
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
| html, body {
background-color: #D4CBAE;
margin: 0;
}
#header {
width: 785px;
background-color: #4E5875;
background-image: url(../images/default/header_background.gif);
background-repeat: repeat-x;
height: 31px;
}
#logo {
float: left;
background-image: url(../images/default/header_logo.gif);
background-repeat: no-repeat;
width: 181px;
height: 31px;
}
#container {
position: absolute;
width: 785px;
background-color: #D4CBAE;
background-image: url(../images/default/content_faux.gif);
background-repeat: repeat-y;
}
#content_container {
position: relative;
}
#content_container .left_menu {
width: 200px;
background-color: #D4CBAE;
position: relative;
float: left;
height: 100%;
}
#content_container .left_menu .heading {
background-image: url(../images/default/left_menu_header.gif);
background-repeat: repeat-x;
background-color: #B3AD95;
width: 100%;
height: 17px;
font-size: 10px;
border-bottom: 1px solid #848072;
}
#content_container .left_menu .content {
background-color: #E1DECB;
}
#content_container #content {
width: 585px;
float: right;
height: 100%;
position: relative;
}
#footer {
background-image: url(../images/default/footer_center.gif);
background-repeat: repeat-x;
background-color: #454F6D;
float: left;
clear: both;
} |
En de html:
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
| <?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Frontpage</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="themes/stylesheets/default.css" />
<script type="text/javascript" src="themes/stylesheets/scripts.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"></div>
</div>
<div id="content_container">
<div class="left_menu">
<div class="heading">haalaa</div>
<div class="content">lalaa</div>
<div class="heading"></div>
</div>
<div id="content">
a <br />
aaaa <br />
</div>
</div>
<!--<div id="footer">Hallo, ik ben een footer</div>-->
</div>
</body>
</html> |
Ik ben al op een aantal problemen gestuit die ik onder andere met faux collumns van A list apart heb weten op te lossen, echter schrijft deze faux collumn het hele verhaal over in Internet explorer waardoor de pagina verder onzichtbaar wordt. De footer kent z'n plaats ook duidelijk niet, deze blijft in dit concept half in de content steken of verplaatst gewoon een heel stuk van de pagina naar rechts (IE).
Hopelijk heeft iemand een verhelderende uitleg voor me inzake mijn fouten, ik ben namelijk heel erg benieuwd welke fouten ik hier maak en welke logica daar achter zou zitten.