[XHTML, CSS] Footer & Overlay

Pagina: 1
Acties:

  • Sietse
  • Registratie: Januari 2004
  • Laatst online: 13-05 23:25
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:
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.

  • Woudloper
  • Registratie: November 2001
  • Niet online

Woudloper

« - _ - »

Heb je hier al eens gekeken? Daar staat een opsomming van diverse oplossing qua 3 columns layout en dat lijkt toch wel een beetje waar je naar op zoek bent...