[OPGELOST] footer naar beneden

culdoc · Post by **culdoc** » Mon Mar 30, 2009 3:27 pm

Op de website http://www.dorpsraadkruiningen.nl/index.php heb ik een footer geplaatst.
Helaas komt hij niet onderaan te staan. Tevens krijg ik het niet voor elkaar om de rechterbalk ook tot aan onderen te laten lopen.

Wat doe ik fout?

Hieronder het sjabloon:

Code: Select all

 <!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="container">
	<div id="header"></div>
	<div id="column_left">
		<div id="menu">{menu template="dorpsraadkruiningen" collapse="1"}</div>
	</div>

<div id="content"><h1>{title}</h1>{content}<br/></div> 
<div id="column_right">
	<div id="foto"> Hier komt de foto </div>
         <div id="content_links">{content block="Sidebar"}</div>
</div>

</div>
<div id="footer">{global_content name="footer"}</div> 
 <__body>
{cms_module module="statistics"}
</__html>

en hier de CSS:

Code: Select all

 *{margin:0; padding:0;}

body {
   font-family: verdana, Verdana, Sans-serif;
   font-size: 11px;
   background-color:#FFF; 
   padding:0px;
}

#container{
   position: relative;
   width: 988px;
   height: 100%; 
   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;
}

#header{
   position: absolute;
   left: 0px;
   top: 0px;
   width: 988px;
   height: 165px;
   background-image: url('http://www.dorpsraadkruiningen.nl/uploads/images/template/header.jpg');
}

#wrapper {overflow:hidden; background:#FFF;}

#column_left{
   position: absolute;
   left: 0px;
   top: 165px;
   width: 203px;
   height: 500px;
   background-color: #f9cd2c;
   border-right: solid 1px #48a218;
}

#content{
   position:absolute;
   left: 204px;
   top: 165px;
   width: 511px;
   margin: 10px;
   min-height: 500px;
}

#column_right{
   position: relative;
   left: 714px;
   top: 165px;
   width: 273px;
   min-height: 100%;
   background-color: #f9cd2c;
   border-left: solid 1px #48a218;
}

#menu{
   padding-top: 20px;
   width: 182px;
   padding-left: 10px;
}

#foto{
   padding-top: 20px;
   margin-left: 3px;
   width: 264px;
   height: 197px;
   border: solid 1px #000;
}

#content_links{
   padding-top: 10px;
   margin-left: 3px;
   width: 264px;
   min-height: 100%;
}

#wrapper {overflow:hidden; background:#FFF; display:inline-block;}


a{
             text-decoration: none;
             color: #48a218;
}

a:hover{
             text-decoration: underline;
}

img a{
	border: none;
}

#footer {
   clear:both;  
   color: #000;
   background-color: #FFF;
}

#footer p {
   font-size: 0.7em;
   padding: 0.1em;
   text-align: center;
   margin:0;
}

#footer p a {
   color: #000; 
}

.content {padding:10px;}
h1 {font-size:20px; margin:0; padding:10px 0; color:#0076ac;}
h3 {font-size:18px; margin:0; padding:8px 0;}
#footer p,
#header p {color:#000;}
#footer a {color:#000;}
#footer a:hover {text-decoration:none;}

/* Fonts */
h1 { 
            font-size: 1.3em;
            font-weight: bold;
            color: #48a218;
}

h2 { 
            font-size: 1.3em;
            font-weight: bold;
            color: #48a218;
}

Silvie · Post by **Silvie** » Mon Mar 30, 2009 4:41 pm

Zal ik ook eens proberen antwoord te geven:
Helpt het niet als je inhoud toevoegd?
Al zijn het alleen maar enters?
Er zit geen inhoud in dus past de grote zich aan.

sander · Post by **sander** » Mon Mar 30, 2009 5:53 pm

Silvie wrote: Zal ik ook eens proberen antwoord te geven:
Helpt het niet als je inhoud toevoegd?
Al zijn het alleen maar enters?
Er zit geen inhoud in dus past de grote zich aan.

Dat mag niet uitmaken, de minimale hoogte van de content-div staat ingesteld op 500px. Op andere pagina's is wel content aanwezig, maar ook daar zakt de footer niet naar onder....

Ander probleem is de rechterkolom, hoe kan ik die over de volledige schermhoogte zichtbaar maken?

Groeten,

Sander

RonnyK · Post by **RonnyK** » Mon Mar 30, 2009 6:17 pm

Je probleem komt, omdat je drie kolommen in 1 container zou moeten zetten, waarbij je eerst de linker/rechter en dan de content, zou moeten plaatsen. Nu zijn het drie losse blokken, die niet door een container bij elkaar worden gehouden, waardoor de footer direct onder de content wordt geplaatst, i.p.v. onder het blok.

Dus b.v.

div main

div left /div
div right /div
div content /div

/div

div footer
/div

Daarnaast zou je de left/right, een float kunnen geven, dus float: left; i.p.v. een position: absolute;

Voor het verlengen van de sidebars tot de footer is een javascript nodig, die de hoogte berekend, waarna deze geheel naar beneden wordt getrokken.

Ronny

Ronny

CMS Made Simple Forums

[OPGELOST] footer naar beneden

[OPGELOST] footer naar beneden

Re: footer naar beneden

Re: footer naar beneden

Re: footer naar beneden