footer plaatsing

sander · Post by **sander** » Tue Mar 02, 2010 3:05 pm

Beste mensen,

Ik heb een template gemaakt, met bijbehorend CSS bestand. Ik krijg alleen voorlopig de footer niet goed gepositioneerd (onderaan de pagina). Het content-vlak 'groeit' niet mee met de inhoud.

Hieronder de template:

Code: Select all

{process_pagedata}
<!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='wrapper'>
<div id='container'>
	<div id='header'>
            <div id='header_left'>
                <div id='logo'><img src='uploads/images/template/logo_technicall.jpg' alt='logo' /></div>
                <div id='header_tekst'>{global_content name='Openingstijden'}</div>
            </div>
            <div id='header_foto'><img src='uploads/images/template/header.jpg' alt='header'/></div>
        </div>
        <div id='hoofdmenu'>{menu template='hoofdmenu' collapse='1' number_of_levels="1"}</div>
	<div id='main'><img src="{$baseurl}uploads/images/template/goatse_backgr.jpg" alt="Doe mij nog maar een bakkie koffie" title="Doe mij nog maar een bakkie koffie" /><div id='menu'>
           <div id='submenu'>{menu template='submenu' collapse='0' number_of_levels='1' start_level='2'}</div>{cms_module module=CustomContent}
              {if $ccuser->loggedin() && $ccuser->memberof('FrontEndUsers')}                
<div id='UserMenu'>{menu template='UserMenu' number_of_levels='1' start_level='2' start_page='protected'}</div>{/if}</div>
           <div id='content'><h1>{title}</h1>{content}</div>
        </div>
</div>
<div id='footer'>{global_content name='footer'}</div>
</div>
<__body>
</__html>

En de CSS:

Code: Select all

*{
	padding: 0;
	margin: 0;
}

body{
	min-height: 100%;
        font-family: Arial, verdana, sans-serif;
        font-size: 11px;
        line-height: 14px;
}

#wrapper{
        position: relative;
        margin-left: auto;
        margin-right: auto;
        min-height: 100%;
        height: auto;
        overflow: auto;
}

#container{
	width: 980px;
        position: relative;
	margin-left: auto;
	margin-right: auto;
	min-height: 100%;
        height: auto;
        overflow: hidden;
        margin-top: 2px;
        margin-bottom: 10px;
}

#header{
        position: relative;
        left: 0;
        top: 0;
        width: 980px;
        height: 221px;
}

#header_left{
        position: relative;
        left: 0;
        top: 0;
        width: 199px;
        height: 221px;
        text-align: center;
}

#logo{
        position: absolute;
        width: 199px;
        height: 119px;
        left: 0;
        top: 0;
}

#header_tekst{
        position: absolute;
        left: 0;
        top: 119px;
        width: 199px;
        height: auto;
        line-height: 14px;
}

#header_foto{
        width: 781px;
        height: 221px;
        position: absolute;
        left: 199px;
        top: 0px;
}

#hoofdmenu{
        position: absolute;
        top: 223px;
        left: 0;
        width: 980px;
        height: 30px;
        background-color: #115991;
}

#hoofdmenu ul{
   list-style: none;
   padding-left: 199px;
}

#hoofdmenu ul li{
   float: left;
   display: block;
   width: auto;
   height: 38px;
   font-weight: bold;
   font-size: 14px;
   color: #fff;
}

#hoofdmenu ul li a{
   display: block;
   width: auto;
   height: 23px;
   color: #fff;
   text-decoration: none;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 7px;
}

#hoofdmenu ul li a:hover, #hoofdmenu ul li.menuactive a{
   display: block;
   color: #000;
   text-decoration: none;
   background-color: #fff;
}

#main{
        position: relative;
        top: 32px;
        left: 0;
        width: 980px;
        margin-top: 2px;
        min-height: 800px;
        height: auto;
        overflow: hidden;
}

#menu{
        position: absolute;
        left: 0;
        top: 0;
        width: 199px;
        min-height: 150px;
        padding-top: 10px;
}

#submenu{
        float: left;
        width: 199px;
        min-height: 50px;
        padding-top: 10px;
}

#submenu ul{
   list-style: none;
}

#submenu ul li{
   margin-top: 5px;
}

#submenu ul li a{
   font-size: 14px;
   color: #115991;
   text-decoration: none;
   font-weight: bold;
}

#submenu ul li a:hover{
   font-size: 14px;
   color: #000;
   text-decoration: underline;
}


#submenu ul li.menuactive a{
   font-size: 14px;
   color: #000;
   text-decoration: none;
}

#UserMenu{
        float: left;
        width: 199px;
        min-height: 50px;
        padding-top: 10px;
}

#UserMenu ul{
   list-style: none;
}

#UserMenu ul li{
   margin-top: 5px;
}

#UserMenu ul li a{
   font-size: 14px;
   color: #115991;
   text-decoration: none;
   font-weight: bold;
}

#UserMenu ul li a:hover{
   font-size: 14px;
   color: #000;
   text-decoration: underline;
}


#UserMenu ul li.menuactive a{
   font-size: 14px;
   color: #000;
   text-decoration: none;
}

#content{
        position: absolute;
        left: 199px;
        top: 0;
        width: 682px;
        height: auto;
        overflow: auto;
}

#footer{
	width: 100%;
	position: relative;
	bottom: 0;
	text-align: center;
        height: 30px;
}

h1{
        color: #115991;
        font-size: 14px;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
}

p{
        margin-bottom: 10px;
}

#main img{
        position: absolute;
        bottom: 0;
        right: 0;
}

form {
	margin: 0 0 0 0;
	font-family: verdana, Verdana, Arial, arial, sans-serif, Sans-Serif;
	font-size: 10px;
}

label {
	width: 15em;
	float: left;
	text-align: left;
	display: block;
	font-family: verdana, Verdana, Arial, arial, sans-serif, Sans-Serif;
	font-size: 10px;
	font-weight: bold;
       margin-top:5px;
       
}

.label2 {
	width: 15em;
	float: left;
	text-align: left;
	display: block;
	font-family: verdana, Verdana, Arial, arial, sans-serif, Sans-Serif;
	font-size: 10px;
	font-weight: bold;
}

input{
	font-family: verdana, Verdana, Arial, arial, sans-serif, Sans-Serif;
	font-size: 11px;
	color: #000;
	background: #FFF;
	border: 1px solid #115991;
        margin-bottom: 5px;
        margin-top: 5px;
        width: 150px;
}

input.fbsubmit {
	     width: 10em;
             height: 26px;
             border: 1px solid #115991;
             cursor: hand;
             margin-top:10px;
             font-weight: bold;
             color: #115991;
} 

textarea {
	margin: 0.5em 0;
	width:98%;
	height: 6em;
        border: 1px solid #115991;
}

Iemand een oplossing??

Groeten,

Sander

Rolf · Post by **Rolf** » Tue Mar 02, 2010 3:11 pm

Heb je een link?

®

sander · Post by **sander** » Tue Mar 02, 2010 7:46 pm

Hoi Rolf,

Sorrie, is wel makkelijk idd...

http://www.techni-c-all.nl

Groet,

Sander

Rolf · Post by **Rolf** » Tue Mar 02, 2010 8:23 pm

Sander,

Zie zo niet waar het fout gaat, hier moet je toch echt even mee spelen.
Veranderen en kijken wat er gebeurt.

in de css zie ik meerdere keren min-height: 100% (of 800px).
Daarnaast staat er ook height: auto;
100% betekend volledige scherm hoogte
Dit kan met elkaar botsen...
min-height is ook niet echt een browser vriendelijk commando.

Maak een kopie van de huidige stylesheet en ga eens schuiven met de waarden...

Succes, Rolf

Gamonon · Post by **Gamonon** » Tue Mar 02, 2010 8:37 pm

#footer{
width: 100%;
position: relative;
bottom: 0;
text-align: center;
height: 30px;
}

De hoogte staat op 30 pix vast

sander · Post by **sander** » Tue Mar 02, 2010 8:47 pm

Hallo Gamonon,

Zelfs als ik de footer helemaal uit de template haal, is het probleem niet opgelost,
kijk maar op de pagina algemene voorwaarden (link onderaan op de website) voor een goede illustratie van het probleem...

Groet,

Sander

stijlXpres · Post by **stijlXpres** » Wed Mar 03, 2010 2:53 pm

Sander,

Volgens mij kun je het probleem oplossen door het volgende te wijzigen:

Code: Select all

#main{
        position: relative;
        top: 32px;
        left: 0;
        width: 980px;
        margin-top: 2px;
        padding-bottom: 40px;
}

...

#footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	text-align: center;
        height: 30px;
}

Daarmee zorg je ervoor dat de footer altijd keurig tegen de onderkant van je browser 'plakt' en dat je bij lange lappen tekst altijd ook de laatste regels nog kunt lezen, doordat je de padding van 40px meegeeft aan #main.

Heb het zelf niet getest, maar zou moeten werken...

sander · Post by **sander** » Wed Mar 03, 2010 3:38 pm

stijlXpres wrote: Sander,

Volgens mij kun je het probleem oplossen door het volgende te wijzigen:
Code: Select all
#main{
        position: relative;
        top: 32px;
        left: 0;
        width: 980px;
        margin-top: 2px;
        padding-bottom: 40px;
}

...

#footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	text-align: center;
        height: 30px;
}
Daarmee zorg je ervoor dat de footer altijd keurig tegen de onderkant van je browser 'plakt' en dat je bij lange lappen tekst altijd ook de laatste regels nog kunt lezen, doordat je de padding van 40px meegeeft aan #main.

Heb het zelf niet getest, maar zou moeten werken...

Helaas, niet het gewenste resultaat. Wel bedankt voor de suggestie!
De volledige main-div verdwijnt, de footer komt over de header...

Groeten,

Sander

wpbremer · Post by **wpbremer** » Wed Mar 03, 2010 3:44 pm

Als ik in de div#wrapper de position: relative; uitschakel komt de footer wel goed te staan, misschien is dat jou oplossing?

sander · Post by **sander** » Wed Mar 03, 2010 3:50 pm

Wanneer ik relative uitschakel in de wrapper, krijgt de footer een vaste positie, hij zakt niet wanneer de content langer is...

wpbremer · Post by **wpbremer** » Wed Mar 03, 2010 3:57 pm

En het toevoegen van clear: both; aan de footer div helpt ook niet?

brentnl · Post by **brentnl** » Thu Mar 04, 2010 8:35 am

Weet niet of dit het gewenste effect is, kon het lastig uit de topic start halen, maar ik gebruik altijd deze fix voor een sticky footer.. Sticky Footer by Ryan Fait

CSS

Code: Select all

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -XXXpx; /* de margin waarde 'bottom' is de negatieve waarde van de footer grootte, dit is ter compensatie */
}
.footer, .push {
	height: XXXpx; /* .push moet dezelfde hoogte hebben als .footer */
}

html

Code: Select all

    
</__body>
      <div class="wrapper">
            <div>..website inhoud...</div>
            <div class="push"></div>
      </div>

      <div class="footer">
            <p>Copyright (c) 2008</p>
      </div>
<__body>

sander · Post by **sander** » Thu Mar 04, 2010 10:26 am

Ik ga het proberen, resultaat post ik hier....
Dank voor alle hulp tot nu toe!!

CMS Made Simple Forums

footer plaatsing

footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing

Re: footer plaatsing