Footer

Status
Niet open voor verdere reacties.
P

pasmaskas

Gebruiker
Lid geworden
2 sep 2011
Berichten
75
Beste helpmij leden,

Via deze link http://www.pmkmedia.nl/cms zien jullie een website waar ik mee bezig ben. Nu is het probleem dat ik de footer divjes #footer en #footer2 niet onder aan krijg ze staan vast als ik de top: regel weg haal en bottom:0px; neerzet gaan ze naar boven in plaats van naar beneden.

Kan iemand mij hier mee helpen? Ze moeten allebei onderaan komen te staan en mee rekken als er meer content bij komt.

ik hoop dat iemand mij kan helpen

Gr pascal
 
Ik denk alle twee: bij een korte pagina onderaan het scherm, en bij aan lange pagina onderaan de content (zodat de footer niet zoals nu in z'n buik prikt).
Right?
Met vriendelijke groet,
CSShunter
 
Dat klopt inderdaad csshunter bedankt voor jullie reacties ik zal morgen kijken of het lukt.

Als het lukt horen jullie het.

gr pascal
 
Ik heb ze allebei geprobeert maar helaas zonder resultaat. Ze schieten allemaal naar de header toe :(. http://www.goodbytes.be/index.php/blog/article/css_footer_onderaan_scherm_klevend/ die werkte wel maar centerde het sponsor gedeelte schoof helemaal naar links:

Dit de de html code van de pagina:

<!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" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>

<body>
<div id="header">
<img id="header" src="images1/header.png" width="987" height="233" alt="" />
</div>
<div id="menu">
</div>
<div id="topmain" valign="middle" style="font-size:14px; color:#FFF;">
<b>{title}</b>
</div>
<div id="topsponsors" style="font-size:14px; color:#FFF;"><b>SPONSOREN</b>
</div>
<div id="main" align="left" valign="top">{content}</div>
<div id="sponsors">{global_content name='sponsoren'}</div>
<div id="footer" style="font-size:10px; color:#FFF;">
<b>footer 1 tekst</b>
</div>
<div id="footer2" style="font-size:10px; color:#000;">
<b>footer 22 tekst</b>
</div>
</body>
</html>


en dit de css:

body,td,th {
position: relative;
width: 987px;
margin: 0 auto;
background:url(images1/back.jpg);
background-repeat: no-repeat;
background-position: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
h1 {
font-size: 14px;
color: #039;
}
h2 {
font-size: 14px;
color: #000;
}

#menu {
position:absolute;
left:0px;
top:249px;
width:164px;
}

#topmain{
text-align: left;
vertical-align: top;
padding: 5px 0px 0px 5px;
position:absolute;
background-image:url(images1/balk.png);
left:184px;
top:249px;
width:580px;
height:22px;
}

#topsponsors {
text-align: left;
vertical-align: top;
padding: 5px 0px 0px 5px;
position:absolute;
background-image:url(images1/balk.png);
left:787px;
top:249px;
width:195px;
height:22px;
}

#main {
position:absolute;
background-image:url(images1/contentback.png);
padding: 0px 12px 12px 12px;
left:184px;
top:276px;
width:561px;
}

#sponsors {
position:absolute;
padding: 12px 0px 0px 0px;
left:787px;
top:276px;
width:200px;
}

#footer {
text-align: center;
position:relative;
padding: 10px 0px 0px 0px;
background-image:url(images1/balkfooter.png);
left:0px;
top:1078px;
width:987px;
height:23px;

}

#footer2{
text-align: center;
position:relative;
padding: 10px 0px 0px 0px;
left:0px;
top:1111px;
width:987px;
height:20px;

}


Ik hoop dat jullie mij verder kunnen helpen
 
Laatst bewerkt:
Hoi pasmaskas,
Nu hebben we vergelijkingsmateriaal! :)
  • En een vergelijking levert op: in jouw code wordt geen van beide modellen gevolgd.
  • Jouw opzet van de pagina heeft een ander type structuur en css-code.
  • Binnen jouw structuur kan niet één van de twee footer-modellen geïmporteerd worden.
  • Wat wel kan: één van de twee modellen als uitgangspunt nemen, en daarin stukjes van jouw pagina-opbouw in importeren. Anders kan het nooit werken!
Toelichting:
  • Jouw code heeft bv. niet een hoogte van 100% opgegeven voor de <html>, wat voor beide modellen een voorwaarde is om het te kunnen doen.
  • Beide modellen hebben een "contentwrapper" waar alles in moet zitten behalve de footer, en verder als enige nog een footer -div.
  • De verschillende content-div's zitten bij jou niet in een "contentwrapper", en de footer bestaat uit twee losse delen (zonder "footerwrapper" eromheen).
  • De css van je <div>'s torpedeert die van beide modellen! Alle <div>'s bij jou die geen footer zijn, hebben een {position: absolute;}.
  • En dat is absoluut onbruikbaar in dit verband!
Wat er moet gebeuren:
  1. Beginnen met de html-structuur van één van beide modellen, en de bijpassende css overnemen.
  2. Daarbinnen je pagina gaan vormgeven met nieuwe <div>s'.
  3. Niets een absolute positie geven, maar werken met "floats" (drijvende containers) die kolommen naast elkaar kunnen maken.
  4. Daarbij de volgorde aanhouden: telkens van links naar rechts en dan van boven naar beneden.
  5. Dus binnen de contentwrapper is de eerste horizontale rij: de header.
  6. Dan de tweede rij: van links naar rechts zijn dat 3 kolommen (menu, midden, rechterkolom). Daar maak je eerst containers voor. Vervolgens kunnen die elk van boven naar beneden opgevuld worden met verse containers (kop van het midden, inhoud van het middendeel; kop rechterkolom, inhoud rechterkolom).
  7. De twee footers moeten dus ook ingepakt worden: in een footerwrapper, zodat ze gezamenlijk als kleef-footer onderaan blijven staan.
Zo krijg je bv.: footertest-3.htm voor een korte pagina, en footertest-4.htm voor een lange.

Met vriendelijke groet,
CSShunter
 
Mooi! Voor de finishing touch kan je nog footer2 {background: white;} toevoegen, om bij korte pagina's de achtergrond-afbeelding onzichtbaar te maken in die footer.
En:
Code: 
html {
    height: 100%;
    padding-bottom: 1px;
}
om het pagina-midden bij Firefox en Chrome niet te laten verspringen als gewisseld wordt tussen een lange en een korte pagina.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan