[CSS XHTML] Footer probleem

[vakantieman]

Ik ben op dit moment bezig met het bouwen van een website. http://www.vroege.biz/test/. Hier kun je hem vinden. In tabelvorm heb ik hem aan de praat gekregen maar omdat tabellen daar niet voor behoren gebruikt te worden wil ik deze site omzetten naar CSS met div's.
Nu heb ik flink gezocht op dit forum. Op een gegeven moment zag ik door de bomen het bos niet maar. Ik ben toen maar de site gaan opzetten met behulp van test57.Nu zit ik alleen met een aantal grote problemen.

In Firefox ziet de website er nog het best uit .
-De Nav en Content div worden niet naar de footer doorgetrokken. In IE staat de content div helemaal ergens anders.
-In het Nav gedeelte begint de tekst buiten mijn div.

K heb geprobeerd de width te veranderen van mijn div's maar dit verhielp het probleem niet. Heeft iemand nog een idee wat dit probleem kan oplossen.

Website : http://www.vroege.biz/test/
CSS : http://www.vroege.biz/test/style/main.css

Alvast bedankt,

[DeFeCt]

Spannend, ik heb hetzelfde probleem gehad en ben er uiteindelijk niet uitgekomen. Heb het dus uit pure frustratie toch in tables opgelost. Ik ga je topic even volgen als je het niet erg vindt

[TeasingU]

Ik haal hem altijd eerst door de w3c validator:

http://validator.w3.org/c...Fwww.vroege.biz%2Ftest%2F
http://jigsaw.w3.org/css-...%2Ftest%2F&usermedium=all

Misschien kun je er wat mee.

[vakantieman]

Bedankt voor je suggestie.
Hij was inderdaad niet helemaal valid.
Nu wel en de problemen bestaan helaas nog steeds,

[marty]

Je header en footer hebben een vaste waarde, dus kun je wat daartussen zit absoluut tov de boven en onderkant positioneren, rekening houdend met hoeveel die header en footer innemen. Stel 50px, dan zoiets dus:

code:

position: absolute;
top: 50px;
bottom: 50px;

[ Voor 21% gewijzigd door marty op 22-08-2005 14:23 ]

[Pendaco]

Je moet gewoon nog een beetje met je css stoeien, hoe vaker je het gebruikt hoe sneller je eventuele fouten opmerkt en kunt verhelpen.

dit moet al een stuk helpen;
(vergelijk het met je oude code, zodat je ziet wat er is verandert )

code:

html, body, #holder { 
    min-height:         100%; 
    width:              100%;
    height:             100%;
}

html>body, html>body #holder { 
    height:             auto;
}

body { 
    margin:             0; 
    padding:            0;
    background-color:   #666699;
    font-family:        arial;
    color:              #000000;

}

#holder {
    width:              510px;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
}

#header {
    border:             none; 
    width:              505px;
    height:             151px;
    background:         #FFFFFF url(../images/test.jpg) no-repeat;
}

#nav {
    width:              121px; 
    float:              left; 
    padding-bottom:     30px; 
    height:             auto;
    background:         #CCCCCC url(../images/links.jpg) repeat-y;
}

#content {
    padding-bottom:     30px;
    height:             auto;
    background:         #FFFFCC url(../images/rechts.jpg) repeat-y;
    width:              384px;
    float: left;
}

#footer {
    height:             27px;
    bottom:             20px;
    left:               0;
    background:         #FFFFFF url(../images/footer.jpg) repeat-y;
    border:             none;
    width:              100%;
    clear: both;
}

#nav p, #content p {
    margin:             2px;
}

#nav ul {
}

en ik wist trouwens niet of die footer helemaal op de bodem moest staan of aan de rest vast moest zitten?

[vakantieman]

Bedankt Pendaco voor je reaktie. Ik heb je veranderingen doorgevoerd in mijn css. Er stonden idd wel een paar leuke foutjes is. Aldoende leer men denk ik dan maar.
Alleen mijn probleem is nog niet volledig verholpen zoals je kunt zien:
http:///www.vroege.biz/test/.

Ik heb nu nog de volgende problemen:
-De Footer staat nu niet meer onderaan de pagina. Standaard moet iederaan staan. Hij moet tevens meerekken met de content.
-Er gaat volgens mij nog wat verkeerd met de content div. Alleen ik kan niet vinden wat het is?

[marty]

nogmaals: je moet de boel absoluut positioneren volgens mij

[vakantieman]

Ik snap niet precies wat je bedoeld. Volgens mij kan mijn footer dan nooit meerekken met de tekst? of zie ik dat totaal verkeerd?

[disjfa]

Cascading Stylesheet:

  body{
    background:#666699;
    height:100%;
    margin:0;
    padding:0;
    text-align:center;
  }
  #container{
    width:505px;
    background-image:url(http://www.vroege.biz/test/images/footer.jpg);
    background-position:bottom;
    background-color:#FFF;
    background-repeat:no-repeat;
    height:100%;
    margin:0 auto;
    text-align:left;
  }
  h5{
    background-image:url(http://www.vroege.biz/test/images/test.jpg);
    height:151px;
  }

en met een html kwa

HTML:

  <div id="container">
    <h5>
      
    </h5>
    bla
  </div>

Een simpele opzet bijvoorbeeld. Je moet niet te ingewikkeld denken

[vakantieman]

disjfa schreef op maandag 22 augustus 2005 @ 15:08:

Cascading Stylesheet:

  body{
    background:#666699;
    height:100%;
    margin:0;
    padding:0;
    text-align:center;
  }
  #container{
    width:505px;
    background-image:url(http://www.vroege.biz/test/images/footer.jpg);
    background-position:bottom;
    background-color:#FFF;
    background-repeat:no-repeat;
    height:100%;
    margin:0 auto;
    text-align:left;
  }
  h5{
    background-image:url(http://www.vroege.biz/test/images/test.jpg);
    height:151px;
  }

en met een html kwa

HTML:

  <div id="container">
    <h5>
      
    </h5>
    bla
  </div>

Een simpele opzet bijvoorbeeld. Je moet niet te ingewikkeld denken

Volgens mij doet mijn CSS precies hetzelfde en dat is niet genoeg. Ik heb nog steeds hetzelfde vage probleem.

[Pendaco]

marty schreef op maandag 22 augustus 2005 @ 14:56:
nogmaals: je moet de boel absoluut positioneren volgens mij

yep, marty heeft gelijk.

ik heb die footer hieronder voor je opgelost;

code:

#footer {
    height:             27px;
    position:           absolute;
    background:         url(../images/footer.jpg) repeat-y;
    border:             none;
    width:              505px;
    clear: both;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    bottom: 0px;
}

het is miss niet de mooiste methode qua css, maar hij werkt wel voor zowel ie als firefox.
Een 100% breedte geeft in firefox een uitgerekte footer vandaar de vaste breedte

[vakantieman]

Bedankt voor jullie snelle hulp.
Ik heb de footer veranderd.
Tevens heb ik nu 2 pagina's aangemaakt 1 met weinig tekst en 1 met veel tekst.
Als je deze pagina's bekijkt zie je 2 dingen(http://www.vroege.biz/test/ :

- Bij de pagina met weinig tekst rekt het menu en de content div niet mee tot aan de footer.
- Bij de pagina met veel tekst rekt het menu niet mee en de footer rekt niet mee met de tekst.

Wat kan ik hier aan doen?

[ Voor 10% gewijzigd door vakantieman op 22-08-2005 16:55 ]

[Helmet]

vakantieman schreef op maandag 22 augustus 2005 @ 16:55:
Bedankt voor jullie snelle hulp.
Ik heb de footer veranderd.
Tevens heb ik nu 2 pagina's aangemaakt 1 met weinig tekst en 1 met veel tekst.
Als je deze pagina's bekijkt zie je 2 dingen(http://www.vroege.biz/test/ :

- Bij de pagina met weinig tekst rekt het menu en de content div niet mee tot aan de footer.
- Bij de pagina met veel tekst rekt het menu niet mee en de footer rekt niet mee met de tekst.

Wat kan ik hier aan doen?

Hier is een trucje voor dat faux columns heet, kijk ook eens hier

[disjfa]

vakantieman schreef op maandag 22 augustus 2005 @ 16:55:
Wat kan ik hier aan doen?

Dat ik niet voldeed aan een vaste hoogte dat is één, Maar heb je gezien wat mijn voorbeeld wel deed. De meneer boven mij geeft nog een ander antwoord wat uiteindelijk hetzelfde resultaat.

Je moet trouwens zorgen dat als je veel text hebt je footer wel blijft staan...

[ Voor 12% gewijzigd door disjfa op 22-08-2005 17:11 ]

[vakantieman]

Sorry voor mijn botte reaktie op je bericht. Ik wordt onderhand gek van dit probleem. Ik heb nog even verder gezocht en de footer werkt nu perfect. Blijft er alleen nog 1 probleem over. De content en de menu div passen zich niet aan. Ook al staat daar ingevuld heighy="auto". Vul ik hier bij beide 100% in. Dan gat het in IE redelijk. Hij geeft dan een goede pagina maar veel te lang en Firefox doet niets.

Ik heb een aantal instellingen weer teruggezet, dit omdat ik dit van een werkende site af heb.
Ik hoop dat jullie nog een idee hebben?

[marty]

met de min-height (minimum hoogte) property misschien? (en bijhorende hack voor IE)

Cascading Stylesheet:

#divje {
  min-height: 100px;
  _height: 100px; /* voor IE */
}

[ Voor 6% gewijzigd door marty op 23-08-2005 08:06 ]

[Verwijderd]

Het kan volgens mij niet met alleen css. Deze oplossing werkt heel mooi:
http://www.alistapart.com/articles/footers

Hoop dat je er wat aan hebt.

[Verwijderd]

Het kan volgens mij niet met alleen css.

Kan wel. Zoals hierboven beschreven was dat het probleem ook niet meer.

Iemand zei het al, je wilt http://www.alistapart.com/articles/fauxcolumns/ voor je "hoogte" probleem.

[ Voor 9% gewijzigd door Verwijderd op 23-08-2005 08:39 ]

[vakantieman]

Bedankt, voor je tip. Ik denk inderdaad dat mijn probleem in die fauxcolums zit. Ik krijg het alleen niet opgelost. Ik heb de regel toegevoegd die zij daar zeggen. Maar het helpt voor mij niets. Misschien voeg ik die regel verkeerd in. Weet iemand precies waar ik die regel moet invoeren? Ik het voorbeeld zeggen ze dat ik hem in de body moet neerzetten. Is dat in mijn geval ook zo? Dat betekent dat de gehele pagina uit een image gaat bestaan. Dit gaat ten koste van de snelheid van de website? heeft iemand hier ervaringen mee?

[Verwijderd]

Ik heb de regel toegevoegd die zij daar zeggen. Maar het helpt voor mij niets.

Lees het is helemaal door. Bekijk de voorbeelden, et cetera.

Dat betekent dat de gehele pagina uit een image gaat bestaan. Dit gaat ten koste van de snelheid van de website?

Huh?! Alleen maar de achtergrondafbeelding. De tekst hoeft niet in het plaatje .

heeft iemand hier ervaringen mee?

De techniek die daar beschreven wordt, wordt gebruikt door heel veel sites.

[vakantieman]

Verwijderd schreef op dinsdag 23 augustus 2005 @ 09:53:
[...]
Lees het is helemaal door. Bekijk de voorbeelden, et cetera.

Ik heb de voorbeelden bekeken en ik heb nu een tijdje zitten proberen. Ik heb hem nu in de body neergezet zie http://www.vroege.biz/style/main.css. Dit helpt niets. Het witte gedeelte van de content en de nav div zijn ook achtergrond plaatjes, maar deze willen ook niet rekken naar beneden. Ik snap er niets van waarom in het voorbeeld het wel werkt en bij mij niet?

Huh?! Alleen maar de achtergrondafbeelding. De tekst hoeft niet in het plaatje .

Okee, inderdaad verkeerde gedachte. Het maakt mij ook niet uit als ik tegen mijn bedrijf maar kan zeggen dat ik het werkend heb.

Kun je me misschien een beetje opweg helpen?

[Zoefff]

Volgens mij heb je in essentie precies hetzelfde probleem als dat miekd voor zijn site had, waar ik een voorbeeldje voor heb gemaakt. Het enige verschil is dat jij op de "content" plek nog een extra kolom wilt hebben, maar dat lijkt me niet al te lastig frutselen.

Het voorbeeld dat ik gemaakt heb staat op http://zoefff.gotdns.com/got/miekd.htm . Het bestaat uit een header bovenaan, een footer die altijd onderaan de pagina staat, en de content daartussenin. Verder heeft de container een achtergrondplaatje meegekregen, en is 100% van de pagina, wat betekent dat 'ie altijd meerekt tot het einde van de pagina.

HTML:

<div id='container'>
    <div id='header'>
        
    </div>
    <div id='content'>
        <div>
            <h1>Blaat</h1>
            <p>Lorem ipsum..</p>
        </div>
        <div>
            <h1>Blaat</h1>
            <p>Lorem ipsum..</p>
        </div>
    </div>
    <div id='footer'>
    
    </div>
</div>

Cascading Stylesheet:

body, html {
    height:100%;
    margin:0px;
    padding:0px;
}
body {
    background-color:#F4F4F4;
}
#container {
    padding:0px;
    margin:0px auto 0px auto;
    width:416px;
    background-image:url(http://www.miekd.nl/photography/img/page_content.jpg);
    background-repeat:repeat-y;
    position: relative;
    min-height: 100%;
    height: 100%;
}
#header {
    background-image:url(http://www.miekd.nl/photography/img/page_top.jpg);
    height:96px;
}
#content {
    padding:0px 20px 96px 20px;
}
#footer {
    position:absolute;
    bottom:0;
    padding:0px;
    background-image:url(http://www.miekd.nl/photography/img/page_bottom.jpg);
    height:96px;
    width:416px;
}
p:first-child {
    margin-top:0px;
}

Kijk er eens naar, en als het nuttig is, gebruik de code

[vakantieman]

Bedankt mensen. Mijn probleem is verholpen en alles werkt nu perfect. Ik zal vanavond het op het internet zetten. Bedankt