Uitrekbare content, met een plakkerige footer

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dennis

Dennis

28/04/2009 19:52:00
Quote Anchor link
Ik heb een siteje gemaakt op http://www.goblinwar.nl/test/.
Dan zie je dat de footer niet onder de content/menu komt, wat heel jammer is.
Als je nu naar faq zou gaan zie je dat de pagina nu een heel stuk langer is, ook daar zou de footer dan onder de uitgerekte content moeten komen.

Ik had de content/menu/header al in 1 container gezet om dan die uit te laten rekken en dat dan daar de footer onder kon.
Helaas was dat niet gelukt.

Het is niet de bedoeling dat de footer aan de onderkant van de browser blijft plakken.(wat ik alleen maar heb gevonden op de zoektocht
naar de oplossing van mijn probleem, maar dat de footer ten alle tijden onder de container div wordt geplakt

Indien je niet weet wat ik precies wil, kijk dan nog even hier: http://goblinwar.nl/layoutschets.jpg voor een schets ervan

Code van index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="container">
        <div id='bovenrand'>
        </div>
        
        <div id="header">
        </div>
      
        <div id="menu">

        </div>
        
        <div id="content">

        </div>

    </div>
  
    <div id="footer">
    </div>


Css code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
  html
{
    height: 100%;
}

* html #container
{
    height: 100%;
}
/*
*
{
    margin: 0px;
    padding: 0px;
}*/

/*Begin eigen code */
body
{
    height: 100%;    
    background-color:#c9ddc2;
    font-size:14px;
    font-family:calibri;
    color:#d4af37;
}

/* Begin indeling van het middenstuk(scherm)*/
#bovenrand
{
    top:0px;
    height:5px;
    width:800px;
    background-color:#c9ddc2;
}

#header
{
    position:absolute;
    padding:0px;
    margin-right:150px;
    top: 5px;
    text-align:center;
    height: 200px;
    width:800px;
    background-color:#c9ddc2;
    background-image:url(../img/header.jpg);
    background-repeat:no-repeat;
}

#gsbalk
{
    position:absolute;
    top:170px;
    height:30px;
    min-width:200px;
    margin-left:300px;
    /*background-color:#054109;*/
}

#lijnonderheader
{
    position:absolute;
    height:22px;
    width:800px;
    top:195px;
    visibility:visible;
}

#menu
{
    position:absolute;
    background-color:#054109;
    top:213px;
    width:200px;
    min-height:392px;
}

#content
{
    position:absolute;
    top:205px;
    margin-left:200px;
    background-color:#054109;/*#0d5507;*/
    width:565px;
    min-height:400px;
    padding-left:35px;
}

#container
{
    position:relative;
    width:800px;
    padding-bottom:60px;
    min-height: 100%;
    min-height:600px;
    background-color:#054109;
}

#footer
{
    /*position:relative;*/
    width:800px;
    height:60px;    
    background-image:url(../img/footer.jpg);
    background-repeat:no-repeat;    
    
}
Gewijzigd op 01/01/1970 01:00:00 door Dennis
 
PHP hulp

PHP hulp

23/12/2024 01:44:49
 
Timen kut

Timen kut

28/04/2009 20:40:00
Quote Anchor link
$pagina = $p.'.php'; ???Een huge switch voor niks.

Die footer komt door de position die je gebruikt. Door een container omheen te zetten en daar de elementen met een float in te zetten is t ook gefixed.
 
Dennis

Dennis

29/04/2009 11:24:00
Quote Anchor link
Sorry kan je iets specifieker zijn?
De container moet dus absolute worden?
Daarin moet ik de header content enz inzetten die relative moeten zijn?

Welke waardes moet ik dan aan de footer meegeven?

Verder wil ik de switch nog uitbreiden met een aparte titel voor elke pagina.
En het gebruik van een switch is toch veel veiliger? anders kan je een hele andere webpagina als $p opgeven
 
Dennis

Dennis

01/05/2009 15:32:00
Quote Anchor link
Boing, iemand een idee?
 
Steven Hack

Steven Hack

01/05/2009 16:46:00
Quote Anchor link
Ik gebruik dit zelf ook op een van mijn sites, en daar heb ik het zo gedaan:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div id="header"></div>
<div id="content"></div>
<div style="clear: both; height: 30px">&nbsp;</div>
<div id="footer"></div>


de css van de footer ziet er als volgt uit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
#footer {
    clear: both;
    height: 30px;
    padding: 10px 0;
    background: #FFEA6F;
    border-top: 3px solid #E8AD35;
    font-size: smaller;
    color: #E8AD35;
}


Het belangrijkste is om die clear both DIV er tussen te doen. Hopelijk snap je het zo.
 
Dennis

Dennis

01/05/2009 16:52:00
Quote Anchor link
Ok hartstikke bedankt! Ik ga het zo uitproberen.

Helaas werkt het nog niet...
ZOu je misschien ook de rest van de css van de andere divs kunnen posten?
Dat helpt misschien?
En gebruik jij dan ook min-height?
Gewijzigd op 01/01/1970 01:00:00 door Dennis
 
Dennis

Dennis

02/05/2009 19:50:00
Quote Anchor link
Bump, probleem nog niet opgelost, want die code werkt niet.
Iemand anders een idee?
 
Willem Jan Z

Willem Jan Z

02/05/2009 19:57:00
Quote Anchor link
Position absolute van je #container afhalen. Je wilt heb toch niet absolute hebben? Je wilt hem juist mee laten rekken.

@aapjuh, onzin die extra div. Je footer moet clearen, niet de div ertussen.
Gewijzigd op 01/01/1970 01:00:00 door Willem Jan Z
 
Dennis

Dennis

02/05/2009 20:03:00
Quote Anchor link
Ohja heel logisch en hoe krijg ik dan die footer ten alle tijden precies onder me container div?
 
Willem Jan Z

Willem Jan Z

02/05/2009 20:10:00
Quote Anchor link
Bij mij stond hij dat net (met Firebug beetje lopen kloten). Had die extra div weggehaald. De position:absolute; weggehaald, en de margin-top van je footer weggehaald. Misschien nog meer, maar dat weet ik niet meer.

edit: Haal AL je postition:absolute weg. Waarom staan ze er :/
Gewijzigd op 01/01/1970 01:00:00 door Willem Jan Z
 
Dennis

Dennis

02/05/2009 20:14:00
Quote Anchor link
Ok en willemjan, ik heb nu de wijzigingen ingevoerd, heb volgens mij nu de posities wel goed staan. De content en footer staan goed op de pagina's bijv home, maar niet op de pagina faq, ik weet niet of jij daar ook had gekeken?

Oh ik zal ze even weghalen die absolute's

Superbedankt, door die absolutes was de layout dus gek geworden:S, nu komt de tekst door een soort paddingtop helemaal onderaan, maar nu kan ik dit misschien wel fixen. bednakt voor het stapje in de goede richting!
Gewijzigd op 01/01/1970 01:00:00 door Dennis
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.