[HTML] Footer DIV - Softwareontwikkeling

dinsdag 7 februari 2006 14:58

Acties:

Verwijderd

Topicstarter

Hai,

Ben momenteel bezig een pagina te bouwen mbv. DIVjes. Deze pagina wil ik zonder frames opbouwen, dus de gehele pagina moet scrollen. Ik heb een main div die horizontaal gecentreerd is en deze heeft een achtergrond. Hierin zet ik andere divjes (die naar mijn idee relative moeten zijn omdat anders de background niet doorloopt als je gaat scrollen ??). Onderaan in de main div wil ik een soort "footer". Deze footer wil ik altijd onder mijn content hebben, maar als de content erg kort is wil ik hem gewoon onderaan mijn pagina hebben.

Ik heb een scherm gemaakt zoals ik hem wil hebben:

Afbeeldingslocatie: http://stud.hro.nl/0756798/scherm_thumb.jpg

Ik ben al een tijdje bezig geweest en momenteel heb ik de volgende code:
(werkt trouwens alleen nog maar in IExplorer)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheets/style_layout.css" media="screen">
    </head>
    <body >
        <div id="main">

            <div id="header"></div>

            <div id="menu">
                <br/><br/><br/><br/><br/>
            </div>

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

            <div id="credits"></div>            

        </div>
        
</html>

en de volgende css:

Cascading Stylesheet:

/*  MAIN    */
body
{
    padding: 0px;
    margin: 0px;
    background-color: #FBFBFB;
}

/*  DIV     */

#main
{
    position: absolute;

    top: 0px;
    left: 50%;

    width: 753px;
    height: 100%;

    margin-left: -386px;
    /*background-image: url('../images/main_background.gif');*/
    background-color: #999999;

    z-index: 1;
}

#header
{
    position: relative;
    
    margin-top: 8px;
    margin-left: 19px;

    width: 715px;
    height: 180px;

    background-color: #0000FF;

    z-index: 2;
}

#menu
{
    position: relative;

    width: 200px;

    margin-left: 10px;
    margin-top: 5px;

    float: left;

    background-color: #00FF00;

    z-index: 3;

    /*background-image: url('../images/menu_background.gif');*/
}

#content
{
    position: relative;
    float: right;
    
    width: 515px;

    margin-right: 9px;
    margin-top: 5px;

    padding: 10px;

    background-color: #FF0000;

    z-index: 4;
}

#credits
{
    position: relative;

    margin-left: 19px;

    width: 715px;
    height: 25px;

    background-color: #00F0F0;

    z-index: 5;
}

Als die footer niet in een andere div zou staan, had je de 'bottom' op 0 px kunnen zetten en dan staat ie automatisch onderaan de pagina. Helaas gaat dat niet op bij deze 'credits'-footer.
Ook wil ik die footer naar beneden 'laten drukken' als het content vak te lang wordt.

Iemand enig idee hoe ik dit oplos?

Bij voorbaat dank,
Martijn

dinsdag 7 februari 2006 15:03

Acties:

TeeDee

CQB 241

Boven je credits div iets van een <br style="clear:both;"> zetten?
M.a.w. je content moet je "clearen".

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 7 februari 2006 15:49

Acties:

JHS

Splitting the thaum.

Of (uit mijn hoofd, en werkt mogelijk niet in IE7 en IE 5.5):

Cascading Stylesheet:

#credits  {
  overflow: auto; /* clear the float */
  _height: 1%; /* ... for all browsers */
}

edit:

Ehm, volgens mij heb ik me vergist in het doel / je vraag , maar je kan het altijd nog even testen

.

[ Voor 26% gewijzigd door JHS op 07-02-2006 15:50 ]

DM!

dinsdag 7 februari 2006 15:49

Acties:

Verwijderd

Topicstarter

Ja en dan?

dinsdag 7 februari 2006 15:50

Acties:

André

Analytics dude

En dan wat? Heb je het al geprobeerd?

dinsdag 7 februari 2006 15:52

Acties:

Verwijderd

Topicstarter

Uiteraard heb ik het geprobeerd.

Maar met de opzet die ik geef staat de footer nog helemaal niet onderaan en staat er ook geen code in die het 'probeert'. Ik neem aan dat 'clear: both' niet al mijn problemen oplost

dinsdag 7 februari 2006 16:57

Acties:

TeeDee

CQB 241

Wat wil je nou?
Een footer die altijd onderaan de viewport blijft staan? Want dan ben je er inderdaad nog niet.
Min-height 100%, height 100%.

Dan kom je namelijk al gauw op dit soort CSS grappen en grollen:

Cascading Stylesheet:

html, body {
    height:100%
}

html>body #container {
    height:auto;
}
#container {
    margin: 0 auto;
    width: 790px; 
    height:100%;
    min-height:100%;
    text-align: left;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    position:relative;
    background-color:#fff;
}
html>#container {
    height:auto
}   

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height: 40px;
    background-color: #f5f5f5;
    border-top: 1px solid #e9e9e9;
    _bottom:-1px; /* thanks Rickets, IE wil er nog wel eens een pixeltje naast zitten ivm afronden*/
    text-align:center;
}

Bovenstaande CSS komt uit een oud project, ik weet ook niet of dit nog wel helemaal correct is, maar dit werkte altijd voor mij.

_{nooit aannames doen}

[ Voor 4% gewijzigd door TeeDee op 07-02-2006 16:58 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 7 februari 2006 18:03

Acties:

Verwijderd

Topicstarter

Een footer onderaan je pagina die altijd zichtbaar is lukt me wel, maar ik wil dat die footer onderaan de pagina zit (relative in de 'container' DIV) maar als het content vlak te groot word, moet die die footer naar beneden duwen. zodat je pagina gaat scrollen... Er zijn dus eigenlijk 2 situaties.

Het lukt me wel om dit met javascript op te lossen, maar dit wil ik niet.

dinsdag 7 februari 2006 18:05

Acties:

HyperioN

[search=html css footer div]

Dit is al heel erg vaak langsgeweest..en de oplossingen zijn helaas buitengewoon lastig.

dinsdag 7 februari 2006 18:08

Acties:

H@rry

Dit is iets wat mij nog niet is gelukt, omdat IE niet luistert.
Een manier om zoiets op te lossen kan wellicht met www.quirksmode.org maar ik kan er naast zitten.

Dit probleem stuit ik ook iedere keer op, ik zou gewoon lekker je footer onderaan laten zitten.

GoT a clue? Specs

dinsdag 7 februari 2006 18:11

Acties:

Verwijderd

Topicstarter

Ik heb idd gezocht en veel erover gelezen. Maar mijn geval is net ff anders dan de meeste topics hierzo. Bij de meesten gaat het over een fixed footer. oftewel, als de window geresized word, dat ie dan mee verplaatst. Dit wil ik dus niet.

Een tweede verschil is, is dat bij mij de footer relative moet zijn, want ik wil voorkomen dat ik de container later met javascript moet gaan resizen omdat de achtergrond niet doorloopt.

Dus helaas zijn al die topics niet echt van toepassing op mijn probleem. Vandaar dat ik het hier vraag.

Iig bedankt.

dinsdag 7 februari 2006 18:14

Acties:

H@rry

ik snap precies wat je bedoel.

Als je site korter is dan het beeld, zet hem onderaan je scherm.
Is je site langer dan je scherm, zet hem onderaan je content.

Dit is alleen bijna onmogelijk.

Kijk eens naar de begin pagina van funda.nl, die heb het volgens mij.

GoT a clue? Specs

dinsdag 7 februari 2006 18:37

Acties:

Verwijderd

Topicstarter

hèhè eindelijk iemand die precies weet wat ik bedoel

Die site van funda is inderdaad hetgeen dat ik zoek. Niet helemaal, want eigenlijk als ik de pagina ga resizen, moet die footer eigenlijk gewoon blijven staan en direct een scrollbar komen.

Iemand anders nog geniale ideeen?

edit:
OOPS, Funda is helemaal niet wat ik zoek

Het is namelijk gebouwd in een table! BAH!!

[ Voor 18% gewijzigd door Verwijderd op 07-02-2006 18:38 ]

dinsdag 7 februari 2006 19:30

Acties:

cyberstalker

Eersteklas beunhaas

Dit is toch heel simpel op te lossen?

Als je je main div een min-height van 100% geeft, en credits absoluut positioneert met een bottom: 0px;

Daarna hoef je alleen nog maar een padding-bottom op de main div te zetten zodat de credits niet door de tekst heenloopt, en klaar ben je.

Ik ontken het bestaan van IE.

dinsdag 7 februari 2006 19:47

Acties:

Verwijderd

Topicstarter

mmm... of ik doe iets verkeerd, of je snapt mijn probleem niet helemaal, maar als ik het doe zoals jij zegt en mijn content word heel lang, dan blijft die footer gewoon staan waar die in het allerbegin staat, en niet helemaal onder mijn content. Dat is toch zo??

[ Voor 4% gewijzigd door Verwijderd op 07-02-2006 19:48 ]

dinsdag 7 februari 2006 20:12

Acties:

cyberstalker

Eersteklas beunhaas

Dan doe je iets fout.

De hoogte van de main-div zou met min-height minimaal 100% moeten zijn, maar rekt mee indien nodig. De credits staan onderaan in deze div.

Iets dergelijks als CSS bijvoorbeeld:

Cascading Stylesheet:

/*    MAIN    */
body
{
    padding: 0px;
    margin: 0px;
    background-color: #FBFBFB;
}

/*    DIV        */

#main
{
    position: absolute;

    top: 0px;
    left: 50%;

    width: 753px;
    min-height: 100%;

    margin-left: -386px;
    /*background-image: url('../images/main_background.gif');*/
    background-color: #999999;

    z-index: 1;
}

#header
{
    position: relative;
    
    margin-top: 8px;
    margin-left: 19px;

    width: 715px;
    height: 180px;

    background-color: #0000FF;

    z-index: 2;
}

#menu
{
    position: relative;

    width: 200px;

    margin-left: 10px;
    margin-top: 5px;

    float: left;

    background-color: #00FF00;

    z-index: 3;

    /*background-image: url('../images/menu_background.gif');*/
}

#content
{
    position: relative;
    float: right;
    
    width: 515px;

    margin-right: 9px;
    margin-top: 5px;

    padding: 10px;

    background-color: #FF0000;

    z-index: 4;
}

#credits
{
    position: absolute;
    bottom: 0px;

    margin-left: 19px;

    width: 715px;
    height: 25px;

    background-color: #00F0F0;

    z-index: 5;
}

Net getest in Firefox, en werkt op het eerste gezicht prima.

Ik ontken het bestaan van IE.

dinsdag 7 februari 2006 20:21

Acties:

Verwijderd

Topicstarter

Damn, I suck.... Bij jouw CSS heb ik de volgende HTML:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheets/style_layout.css" media="screen">
    </head>
    <body>
        <div id="main">

            <div id="header">
                                
            </div>

            <div id="menu">
                
            </div>

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

            <div id="credits">
            </div>          

        </div>
        
</html>

Oftewel, de credits div staat in de main div.
Als ik het zo doe, zie ik heel de credits div niet in internetexplorer. geen flauw idee waar die blijft.

In Mozilla zie ik hem echter wel, maar daar staan de menu en de content div niet naast elkaar, maar dat is dan een ander probleem.

dinsdag 7 februari 2006 20:54

Acties:

Sappie

De Parasitaire Capaciteit!

Ik los het probleem van zo'n footer altijd op onderstaande manier op; vind het zelf fijn werken en ook nog eens mooi cleane markup. Werkt verder ok in alle moderne browsers.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style type="text/css">      
        html {
            margin: 0; 
            height: 100%; 
            background: white;
        } 
        
        body {
            position: relative; 
            min-height: 100%; 
            width: 580px;
            border-left: 1px solid black;
            border-right: 1px solid black;
            margin: 0 auto;
            background: #eeeeee;  
        }
        
        #container {
            width: 580px; 
            padding: 0px 0 25px 0;
        }
        
        div#footer {
            position: absolute; 
            bottom: 0;
            left: 0;
            border-top: 1px solid black;
            width: 580px;
            padding: 5px 0px 0px 0px;
            height: 15px;
            background: yellow;
            text-align: center;
        }        
  </style>
  <!--[if lt IE 7]>
      <style type="text/css">
          div#footer { bottom: expression((document.body.clientHeight % 2) ? "-1px" : "0" ); }
          body { height: 100%; }
      </style>
    <![endif]-->
</head>
<body>
    <div id="container">lorem ipsum..</div>
    <div id="footer">lorem ipsum...</div>
</body>
</html>

edit:

ff iets voor je in elkaar geknutseld waar je wel mee vooruit kan denk ik:

http://tienstra4.flatnet....~tom/rein-got/mdekuijper/

edit2: klein foutje uit bovenstaande url gehaald; Opera rekent namelijk een standaard padding voor de body. Deze heb ik dus ff op 0 gezet.

edit:
url weer ff valid gemaakt

[ Voor 48% gewijzigd door Sappie op 06-03-2006 20:43 ]

Specs | Audioscrobbler

dinsdag 7 februari 2006 21:43

Acties:

Verwijderd

Topicstarter

He onwijs bedankt!! Dit werkt idd super! Ik weet niet of het een nette manier is (ga er vanuit van wel, want er komt geen javascript of iets bij kijken), maar het werkt heel goed.

Bedankt voor je moeite!

dinsdag 7 februari 2006 21:52

Acties:

Rhapsody

In Metal We Trust

Ik heb nog een vraagje naar aanleiding van dit topic.

Hoe kun je er nou voor zorgen dat de sidebar een hoogte heeft van 100%? (dus alles tussen header en footer opvult)

🇪🇺 pro Europa!

dinsdag 7 februari 2006 23:24

Acties:

Sappie

De Parasitaire Capaciteit!

Rhapsody schreef op dinsdag 07 februari 2006 @ 21:52:
Ik heb nog een vraagje naar aanleiding van dit topic.

Hoe kun je er nou voor zorgen dat de sidebar een hoogte heeft van 100%? (dus alles tussen header en footer opvult)

In het voorbeeld dat ik gaf is dit gedaan door middel van het toepassen van een achtergrond op de body. Dit wordt ook wel faux columns genoemd. Je wekt daarmee de illusie dat de sidebar over de hele hoogte doorloopt. Verder is dat een gangbare manier om zoiets te bewerkstelligen.

[ Voor 3% gewijzigd door Sappie op 07-02-2006 23:30 ]

Specs | Audioscrobbler

woensdag 8 februari 2006 07:07

Acties:

Boelie-Boelie

Het probleem van TS is wel degelijk vaker voorgekomen, ik heb op dit forum wel vaker verwezen naar www.themaninblue.com/writing/perspective/2005/08/29/ (zoals bijv. hier en hier).
Hierbij wordt geen gebruik gemaakt van een expression.

Het is overigens bijna nooit nodig om met z-index te werken, probeer het eens op te lossen zonder. Zie voor een voorbeeld van jouw layout www.456bereastreet.com/la...tandards/csslayout/2-col/

Cogito ergo dubito

woensdag 8 februari 2006 09:01

Acties:

Sappie

De Parasitaire Capaciteit!

Boelie-Boelie schreef op woensdag 08 februari 2006 @ 07:07:
Het probleem van TS is wel degelijk vaker voorgekomen, ik heb op dit forum wel vaker verwezen naar www.themaninblue.com/writing/perspective/2005/08/29/ (zoals bijv. hier en hier).
Hierbij wordt geen gebruik gemaakt van een expression.

Daarbij wordt gebruik gemaakt van een browser hack om IE6 de pagina goed te laten renderen.. das nog ff smeriger. Het gebruik van conditional comments om andere CSS voor IE < versie 7 te serveren is netjes en met expressions is ook niets mis. Liever gebruik je ze niet uiteraard (hoewel het mi wellicht handig zou kunnen zijn als ook andere browsers iets soortgelijks zouden implementeren (expressions)), maar IE6 heeft zo z'n nukken en met het oog op IE7 en andere eventuele toekomstige browsers gebruik je liever geen hacks.

[ Voor 8% gewijzigd door Sappie op 08-02-2006 09:06 ]

Specs | Audioscrobbler

woensdag 8 februari 2006 10:24

Acties:

Sonic

Jaa ik ben al 4 dagen bezig hiermee...
je kan indd je main: 100% maken enzo.. maar in Firefox ziet hij 100% waar de tekst van je content op houdt!! Dus staat hij nog niet onderaan de pagina...
Dit is echt zo'n gekloot ik heb ook hier nog geen oplossing voor ik houd dit topic in de gaten

woensdag 8 februari 2006 11:12

Acties:

Verwijderd

Topicstarter

mmm ... weet niet precies wat je bedoeld, maar ik heb mijn probleem opgelost.
Heb een testje online gezet:

http://www.martijndekuijper.nl/nieuw

Mischien heb je er wat aan...

edit:
Dit werkt overigens zowel in IE als in FireFox en is HTML STRICT valid

[ Voor 20% gewijzigd door Verwijderd op 08-02-2006 11:14 ]

woensdag 8 februari 2006 11:20

Acties:

ZeilDude

Is dit niet wat je wilt: [rml][ CSS] minimale hoogte child doorgeven aan parent[/rml] ? Je moet er dan alleen nog even een footer onder bedenken, maar dat is een kwestie vn een divje eronder.

@mdekuijper (hierboven): je flashdingetje wordt in FF niet weergegeven.

[ Voor 15% gewijzigd door ZeilDude op 08-02-2006 11:41 ]

woensdag 8 februari 2006 11:30

Acties:

Boelie-Boelie

Sappie schreef op woensdag 08 februari 2006 @ 09:01:Daarbij wordt gebruik gemaakt van een browser hack om IE6 de pagina goed te laten renderen.. das nog ff smeriger. Het gebruik van conditional comments om andere CSS voor IE < versie 7 te serveren is netjes [..]

Ja, dat klopt helemaal. Maar dan zet je die hack toch in de conditional comment, net als jouw expression?

Cogito ergo dubito

woensdag 8 februari 2006 11:50

Acties:

Sappie

De Parasitaire Capaciteit!

Boelie-Boelie schreef op woensdag 08 februari 2006 @ 11:30:
Ja, dat klopt helemaal. Maar dan zet je die hack toch in de conditional comment, net als jouw expression?

dat kan idd. In jouw post kwam het echter op me over dat het gebruik van een expression niet iets wenselijks is _{oftewel ik was een ietsiepietsie klein beetje op mn teentjes getrapt}. Daarom gaf ik aan dat de oplossing in de door jou aangereikte link ook de schoonheidsprijs niet verdiend. In beide gevallen worden er hacks / workarounds gebruikt om het een en ander goed door IE te laten renderen en daar kan je in veel gevallen (helaas) niet omheen. Welke van de 2 oplossingen beter is durf ik verder niet te zeggen.

Specs | Audioscrobbler