Black Friday = Pricewatch Bekijk onze selectie van de beste Black Friday-deals en voorkom een miskoop.

[HTML] vaste footer + margin top probleem

Pagina: 1
Acties:

  • Sjoerd
  • Registratie: December 2003
  • Niet online
Ik heb een probleem met mijn website, namelijk dat ik graag een footer zou maken die zich altijd helemaal onderaan het scherm bevindt, wanneer de gebruiker zijn window echter resized naar boven, moet de footer mee schuiven maar mag niet over de content van de tekst. Nu is dat stuk gedeeltelijk gelukt met de volgende code (ik heb enkel het noodzakelijke in de code laten zitten:)

HTML:
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<style>
html,body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color:#CCCCCC;
    height: 100%;
}
/*holds: wrapper, push, footer*/
#container {
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
    width:700px;
    height:100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
#footer, push{
    height: 30px; /* .push must be the same height as .footer */
}
</style>
</head>

<body>
    <div id="container">
            <div id="wrapper">
                    <h1>Titel</h1>
                    <h3>subtitel</h3>
                  tekst<br /> tekst tekst tekst<br />
 tekst tekst tekst<br /> tekst tekst tekst
<br /> tekst tekst tekst
                <div id="push"></div>
            </div>
            
            <div id="footer">
                <div class="tinyHorzBar"></div>
<a href="http://validator.w3.org/check?uri=referer">

                        <img style="border:0;width:59px;height:20px" src="http://www.w3.org/Icons/valid-xhtml10-blue" 
alt="Valid XHTML 1.0 Transitional"/>
                    </a>
                   footertekst
                </div>
            </div>
        </div>
    </body>
</html>


Ik ondervind echter nog 2 problemen:
mijn pagina heeft van boven een marge die ik er niet uitkrijg
mijn venster heeft altijd een verticale scrollbalk

Beide problemen in zowel firefox als IE.
Iemand een idee waar het fout gaat?

Modelbouw - Alles over modelbouw, van RC tot diorama


  • PeterSelie
  • Registratie: December 2002
  • Laatst online: 29-10 16:10
Sjoerd schreef op zondag 05 oktober 2008 @ 20:30:
Ik ondervind echter nog 2 problemen:
mijn pagina heeft van boven een marge die ik er niet uitkrijg
mijn venster heeft altijd een verticale scrollbalk
Al geprobeerd de html,body een margin/padding van 0 mee te geven?

  • Sjoerd
  • Registratie: December 2003
  • Niet online
SoaDmaggot schreef op zondag 05 oktober 2008 @ 20:33:
[...]

Al geprobeerd de html,body een margin/padding van 0 mee te geven?
Heb ik gedaan maar maakte geen verschil uit helaas :)

oplossing gevonden: het was de h1, die veroorzaakte de ruimte bovenin de pagina, en op 1 of andere manier ook de altijd bestaande scrollbalk. :D

[ Voor 23% gewijzigd door Sjoerd op 05-10-2008 20:39 ]

Modelbouw - Alles over modelbouw, van RC tot diorama


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
Die margin komt van het H1 element ;)

March of the Eagles


  • Sjoerd
  • Registratie: December 2003
  • Niet online
Hacku schreef op zondag 05 oktober 2008 @ 20:39:
Die margin komt van het H1 element ;)
inderdaad, had hem niet eerder gevonden, omdat ik dacht dat hij enkel binnen de div zou tellen. Bedankt Hacku! (had net mijn post geedit ;) )

Modelbouw - Alles over modelbouw, van RC tot diorama


  • Sjoerd
  • Registratie: December 2003
  • Niet online
Toch nog een probleem, en dit in safari, van boven heb ik ruimte bij mijn pagina, dit terwijl alle marge en paddings nu op 0 staan.

Modelbouw - Alles over modelbouw, van RC tot diorama


  • Da Weef
  • Registratie: Januari 2004
  • Laatst online: 31-10 15:59
Bij ziet alles er prima uit met als ik de onderstaande code gebruik. Ook in Safari (windows)...

HTML:
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<style>
*{
    margin:0px;
    padding:0px;
    }

html,body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color:#CCCCCC;
    height: 100%;
}
/*holds: wrapper, push, footer*/
#container {
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
    width:700px;
    height:100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
#footer, push{
    height: 30px; /* .push must be the same height as .footer */
}
</style>
</head>

<body>
    <div id="container">
            <div id="wrapper">
                    <h1>Titel</h1>
                    <h3>subtitel</h3>
                  tekst<br /> tekst tekst tekst<br />
 tekst tekst tekst<br /> tekst tekst tekst
<br /> tekst tekst tekst
                <div id="push"></div>
            </div>
            
            <div id="footer">
                <div class="tinyHorzBar"></div>
<a href="http://validator.w3.org/check?uri=referer">

                        <img style="border:0;width:59px;height:20px" src="http://www.w3.org/Icons/valid-xhtml10-blue" 
alt="Valid XHTML 1.0 Transitional"/>
                    </a>
                   footertekst
                </div>
            </div>
        </div>
    </body>
</html>

.


  • XWB
  • Registratie: Januari 2002
  • Niet online

XWB

Devver
* lijkt me niet de ideale oplossing, nu zijn letterlijk alle margins en paddings weg.

March of the Eagles


  • Da Weef
  • Registratie: Januari 2004
  • Laatst online: 31-10 15:59
Inderdaad, maar het geeft wel aan dat als het probleem nog bestaat er nog steeds ergens een ongewenste marge of padding is gedefinieerd.

Daarnaast werk ik persoonlijk graag met een dergelijke harde reset en set ik liever de eigenschappen per element. Maar dat is een kwestie van voorkeur...

.

Pagina: 1