[HTML] vaste footer + margin top probleem - Softwareontwikkeling

zondag 5 oktober 2008 20:30

Acties:

Topicstarter

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:

<!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

zondag 5 oktober 2008 20:33

Acties:

PeterSelie

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?

zondag 5 oktober 2008 20:36

Acties:

Sjoerd

Topicstarter

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.

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

Modelbouw - Alles over modelbouw, van RC tot diorama

zondag 5 oktober 2008 20:39

Acties:

XWB

Devver

Die margin komt van het H1 element

March of the Eagles

zondag 5 oktober 2008 20:40

Acties:

Sjoerd

Topicstarter

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

maandag 6 oktober 2008 07:16

Acties:

Sjoerd

Topicstarter

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

maandag 6 oktober 2008 09:53

Acties:

Da Weef

Bij ziet alles er prima uit met als ik de onderstaande code gebruik. Ook in Safari (windows)...

HTML:

<!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>

.

maandag 6 oktober 2008 09:58

Acties:

XWB

Devver

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

March of the Eagles

maandag 6 oktober 2008 10:12

Acties:

Da Weef

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...

.