CSS, footer gaat niet automatisch mee

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jeroen van Rooij

Jeroen van Rooij

31/08/2009 09:29:00
Quote Anchor link
Hey, ik weet het, dit is de zoveelste die het vraagt. Maar ik heb hier op phphulp al naar topics gezocht en daar de oplossingen geprobeerd te gebruiken, maar ook die hebben niet gewerkt.

Verder heb ik via google een groot aantal sites bekeken, maar ik kom er maar niet uit en wil nu toch hier vragen wat ik er aan kan doen.

Hier mijn CSS:
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
* {
    padding: 0;
    margin: 0;
}
html, body {
    margin: 0 auto;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    height: 100%;
}
#wrapper {
    margin: 0 auto;
    width: 951px;
    overflow:hidden;
}
#faux {
    margin-bottom: 0px;
    overflow: auto;
    width: 100%;
    padding-bottom: 150px;
}
#bg{
    border: 0px solid black;
    background: url('images/bg.png') no-repeat;
    width: 949px;
    height: 403px;
    position: absolute;
}
#header {
    color: #333;
    width: 931px;
    padding: 10px;
    height: 106px;
    margin: -1px 0px 0px -1px;
    background: url('images/header.png');
}
#head_links {
    color: #333;
    width: 280px;
    padding: 0px;
    height: 22px;
    margin-top: 50px;
    margin-left: 650px;
    float: left;
    position: absolute;
}
#collegegroep {
    font-weight: bold;
    padding-top: 3px;
    padding-left: 29px;
    height: 19px;
    width: 103px;
    background: url('images/college_groep_knop.png');
    float: left;
}
#contact {
    font-weight: bold;
    padding-top: 3px;
    padding-left: 25px;
    height: 19px;
    width: 112px;
    background: url('images/contact_knop.png');
    float: right;
}
#menu {
    color: #333;
    width: 951px;
    padding: 0px;
    height: 64px;
    margin: 0px 0px 0px 0px;
}
#menu_low{
    color: #333;
    width: 951px;
    padding: 0px;
    height: 28px;
    margin: 0px 0px 0px 0px;
    background: url('images/menu_low.png') no-repeat;
}
#pag_weergave{
    color: #fff;
    width: 550px;
    padding-right: 10px;
    height: 27px;
    margin: 0px 0px 0px 0px;
    text-align: right;
    line-height: 23px;
    font-size: 11px;
    float: left;
}
#login{
    margin-top: 2px;
    border: 0px solid black;
    color: #fff;
    width: 377px;
    padding-left: 10px;
    height: 26px;
    text-align: left;
    line-height: 23px;
    font-size: 11px;
    float: right;
}
#rightcolumn {
    display: inline;
    margin: 0px;
    padding: 10px;
    width: 368px;
    float: right;
}
#leftcolumn {
    float: left;
    margin: 0px;
    padding: 10px;
    width: 540px;
    display: inline;
}
#footer {
    height: 10px;
    clear:both;
    width: 908px;
    background: #ABBEBE;
    padding: 10px;
    bottom: 0;
}
.clear {
    clear: both;
    background: none;
}
.username{
    padding-top: 4px;
    padding-right: 10px;
    padding-bottom: 4px;
    padding-left: 24px;
    border: 0px solid #fff;
    width: 124px;
    background: transparent url("images/username.png") no-repeat;
    position: absolute;
    display: block;
}

/* MENU start */
.menu{margin:0 auto; padding:0; height:64px; width:100%; display:block; background:url('images/repeat.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px tahoma, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{padding-top: 15px; line-height:15px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:white; background:url('images/repeat2.png'); height:64px;}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px tahoma, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}
/* MENU eind */


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
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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Webshop @ College Groep Nederland</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
   <div id="wrapper">
        <div id="header">    
            <div id="head_links">
                <div id="collegegroep"><a href="http://www.collegegroep.nl/">Collegegroep.nl</a></div><div id="contact">Contactgegevens</div>
            </div>
        </div>
        <div id="menu">
            <?php include 'menu.php' ?>
        </div>
        <div id="menu_low">
            <div id="pag_weergave">
            U bevindt zich hier: Home
            </div>
            <div id="login">
                <form>
                    <input type="text" class="username" value="Gebruikersnaam">
                </form>    
            </div>
        </div>
        <div id="faux">
            <div id="bg">
            <div id="leftcolumn">

hhkfgkdfhg
              
               <div class="clear"></div>
              
               </div>
               <div id="rightcolumn">
                    gahagaha<br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    
                    gahagaha<br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    
                    gahagaha<br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    <br>hg    
                    
                  <div class="clear"></div>
                  
               </div>
               </div>
            </div>      
        <div id="footer"> </div>
    </div>
</body>
</html>


Als iemand behoefte heeft om het resultaat te zien, dan moet je het even melden, dan zet ik hem online.

Alvast bedankt voor de hulp!
Gewijzigd op 01/01/1970 01:00:00 door Jeroen van Rooij
 
PHP hulp

PHP hulp

30/11/2024 12:02:16
 
Mitchell

Mitchell

31/08/2009 10:55:00
Quote Anchor link
Online voorbeeldje is een stuk makkelijker om het mee op te lossen.
 
Jeroen van Rooij

Jeroen van Rooij

31/08/2009 11:33:00
Quote Anchor link
Hierbij het voorbeeld
Klikje

Let maar niet op het design enz. ben er nog mee bezig.

Momenteel is de footer niet eens meer in beeld te zien. :S
 
Mitchell

Mitchell

31/08/2009 11:58:00
Quote Anchor link
Als je Firebug had gebruikt zag je dat de footer ergens in het midden van het scherm staat.

Verander eens je overflow: auto naar overflow: hidden op je #faux div.
 
Jeroen van Rooij

Jeroen van Rooij

31/08/2009 12:15:00
Quote Anchor link
Zo ik heb meteen die firebug addon geïnstalleerd! Dat is echt een handige add-on, dankje om dat even te melden !

Nu even ontopic..

Ik heb overflow naar hidden aangepast, maar er is geen verschil.. :(
 
Yoram

Yoram

31/08/2009 13:48:00
Quote Anchor link
Jeroen,

gooi bij #bg die position: absolute er uit.. bij mij doet hij het daarna wel gewoon alleen helemaal onderaan het scherm.
 
Jeroen van Rooij

Jeroen van Rooij

31/08/2009 13:51:00
Quote Anchor link
Yoram schreef op 31.08.2009 13:48:
Jeroen,

gooi bij #bg die position: absolute er uit.. bij mij doet hij het daarna wel gewoon alleen helemaal onderaan het scherm.


omg, zo simpel -_- Waarom zag ik dat nou niet haha!

Anyway, hartstikke bedankt voor het oplossen van mijn probleem!
 
Jeroen van Rooij

Jeroen van Rooij

03/09/2009 16:35:00
Quote Anchor link
Oke, ik dacht dat het was opgelost, maar zojuist kom ik erachter dat hij in firefox werkt zoals het hoort, echter werkt hij in IE(8) niet.

Iemand die weet hoe dit kan ?
 
Rene Sn

Rene Sn

03/09/2009 19:13:00
Quote Anchor link
Jeroen schreef op 03.09.2009 16:35:
Oke, ik dacht dat het was opgelost, maar zojuist kom ik erachter dat hij in firefox werkt zoals het hoort, echter werkt hij in IE(8) niet.

Iemand die weet hoe dit kan ?


Hoi Jeroen.
CSS / DIV's is altijd een CRIME volgensmij :)

Maar is dit wat je wilt?

http://swf2.sq4.nl/jeroen/


Groetjes,
René
 
Jan Koehoorn

Jan Koehoorn

03/09/2009 21:28:00
Quote Anchor link
Deze kwam ik laatst tegen: footer onderaan houden

Edit:

Offtopic:

En deze is ook wel grappig:
http://shouldiusetablesforlayout.com/
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
 
Rene Sn

Rene Sn

03/09/2009 23:09:00
Quote Anchor link
Jan Koehoorn schreef op 03.09.2009 21:28:
Deze kwam ik laatst tegen: footer onderaan houden


Die is ook goed, en lekker duidelijk :-)

Zo zijn er 1001 voorbeelden, maar toch heeft de 1 weer problemen met iets anders dan de ander.

Soms kun je dingen beter en sneller in een <TABLE> zetten dan als je met die DIV's in de knup komt :)


Jan Koehoorn schreef op 03.09.2009 21:28:
Offtopic:
En deze is ook wel grappig: http://shouldiusetablesforlayout.com/

WHahahah LoL :)
Gewijzigd op 01/01/1970 01:00:00 door Rene Sn
 
Jeroen van Rooij

Jeroen van Rooij

07/09/2009 09:09:00
Quote Anchor link
Jan Koehoorn schreef op 03.09.2009 21:28:
Deze kwam ik laatst tegen: footer onderaan houden

Edit:

Offtopic:

En deze is ook wel grappig:
http://shouldiusetablesforlayout.com/


Bedankt voor je reactie, maar ook die werkt niet :( FF werkt prima, maar IE niet..
 
Jeroen van Rooij

Jeroen van Rooij

08/09/2009 10:01:00
Quote Anchor link
bump..
 
Mitchell

Mitchell

08/09/2009 11:05:00
Quote Anchor link
Ik zie geen verschil in IE 7 en FF 3.5..
 
Jeroen van Rooij

Jeroen van Rooij

08/09/2009 11:11:00
Quote Anchor link
Ik gebruik IE8 en FF3.5, maar in IE8 staat hij netjes onderaan, maar als de pagina te lang wordt, gaat hij niet mee naar beneden, maar de tekst gaat er gewoon achterlangs..

En bij FF3.5 gaat de footer wel mee naar beneden, maar is de ruimte tussen tekst en footer ook weer extreem groot.

EDIT: Met de 'compatibiliteit view' ziet het er wel goed uit, maar helaas is mijn site gemaakt voor laten we zeggen 'dummies'. Dus die zouden dat niet begrijpen.
Gewijzigd op 01/01/1970 01:00:00 door Jeroen van Rooij
 
Mitchell

Mitchell

08/09/2009 11:13:00
Quote Anchor link
Een footer onderaan de pagina die constant mee gaat is nooit echt een exacte oplossing voor geweest die perfect werkt.

Als je ook aan zoiets gaat werken, moet je eerst zeker weten of je een goede oplossing er voor hebt.

Welke fix heb je er momenteel voor (link)?
 
Jeroen van Rooij

Jeroen van Rooij

08/09/2009 11:31:00
Quote Anchor link
Ik gebruik momenteel geen fix, mijn css die betrekking heeft tot de layout is momenteel als volgt:
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
* {
    padding: 0;
    margin: 0;
}
html, body {
    margin: 0 auto;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    height: 100%;
}
#wrapper {
    margin: 0 auto;
    width: 951px;
    overflow:hidden;
    min-height: 100%;
    position:relative;

}
#faux {
    margin-bottom: 0px;
    overflow: hidden;
    width: 100%;
    padding-bottom: 150px;
}
#bg{
    border: 0px solid black;
    background: url('../images/bg.png') no-repeat;
    width: 949px;
    height: 403px;
}
#header {
    color: #333;
    width: 931px;
    padding: 10px;
    height: 106px;
    margin: -1px 0px 0px -1px;
    background: url('../images/header.png');
}
#head_links {
    color: #333;
    width: 280px;
    padding: 0px;
    height: 22px;
    margin-top: 50px;
    margin-left: 650px;
    float: left;
    position: absolute;
}
#collegegroep {
    font-weight: bold;
    padding-top: 3px;
    padding-left: 29px;
    height: 19px;
    width: 103px;
    background: url('../images/college_groep_knop.png');
    float: left;
}
#contact {
    font-weight: bold;
    padding-top: 3px;
    padding-left: 25px;
    height: 19px;
    width: 112px;
    background: url('../images/contact_knop.png');
    float: right;
}
#menu {
    color: #333;
    width: 951px;
    padding: 0px;
    height: 64px;
    margin: 0px 0px 0px 0px;
}
#menu_low{
    color: #333;
    width: 951px;
    padding: 0px;
    height: 28px;
    margin: 0px 0px 0px 0px;
    background: url('../images/menu_low.png') no-repeat;
}
#pag_weergave{
    color: #fff;
    width: 550px;
    padding-right: 10px;
    padding-top: 2px;
    height: 25px;
    margin: 0px 0px 0px 0px;
    text-align: right;
    line-height: 23px;
    font-size: 11px;
    float: left;
}
#pag_weergave A:link {
color: white;
text-decoration: underline;
}

#pag_weergave A:visited {
color: white;
text-decoration: underline;
}

#pag_weergave A:active {
color: white;
text-decoration: underline;
}

#pag_weergave A:hover {
color: white;
text-decoration: none;
}
#login{
    margin-top: 2px;
    border: 0px solid black;
    color: #fff;
    width: 377px;
    padding-left: 0px;
    height: 26px;
    text-align: left;
    line-height: 23px;
    font-size: 11px;
    float: right;
    margin-left: 10px;
}
#rightcolumn {
    display: inline;
    margin: 0px;
    padding: 10px;
    width: 368px;
    float: right;
}
#leftcolumn {
    float: left;
    margin: 0px;
    padding: 10px;
    width: 540px;
    display: inline;
    padding-bottom:85px;
}
#start_text{
    background: url('../images/start_text.png');
    height: 15px;
    padding-left: 10px;
    padding-top: 5px;
}
#middle_text{
    background: url('../images/middle_text.png') repeat-y;
    padding-left: 10px;
    padding-right: 10px;
}
#end_text{
    background: url('../images/end_text.png');
    height: 15px;
    padding-left: 10px;
    padding-bottom: 5px;
}
#footer {
    margin-left: auto;
    margin-right: auto;
    margin-top: -85px;
    padding-left: 10px;
    padding-top: 5px;
    height: 85px;
    width: 951px;
    color: #FFF;
    font-size: 11px;
    background: url('../images/footer.png');
    position: absolute;

}
 
Emmanuel Delay

Emmanuel Delay

08/09/2009 11:35:00
Quote Anchor link
Hier heb ik een voorbeeld van een pagina met footer.
Als je hier iets mee kan doen, ...

Let niet op de links; ze werken niet.
http://www.manutechnica.com/tutorials/css/footer2/
De css vind je in body.css
 
Jeroen van Rooij

Jeroen van Rooij

08/09/2009 11:42:00
Quote Anchor link
Emmanuel Delay schreef op 08.09.2009 11:35:
Hier heb ik een voorbeeld van een pagina met footer.
Als je hier iets mee kan doen, ...

Let niet op de links; ze werken niet.
http://www.manutechnica.com/tutorials/css/footer2/
De css vind je in body.css


Ben ik misschien niet helemaal duidelijk geweest. Want dit voorbeeld heeft de footer altijd onderaan, maar die van mij moet onderaan, maar ook echt onderaan de tekst, niet standaard onder in beeld.

Hoe zeg je zoiets in normaal nederlands, lol. Ik hoop dat je het begrijpt.

EDIT: Zo te zien lag het dus JUIST aan de compatibility view van IE8, want het werkt gewoon, tenzij die view aan staat, ik had me daarin vergist.

Het werkt nu dus volgens mij, hartstikke bedankt voor alle hulp..

En net lag phphulp eruit? :|
Gewijzigd op 01/01/1970 01:00:00 door Jeroen van Rooij
 
Mitchell

Mitchell

08/09/2009 12:37:00
Quote Anchor link
Ja, php heeft wel vaker kuren.

Dit is trouwens een antwoord op je vraag. Deze staat altijd onder de text en wanneer de tekst te kort is, staat hij gewoon onderin beeld.
 



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.