CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

footer plaatsing

https://forum.cmsmadesimple.org/viewtopic.php?t=42019

Page 1 of 1

footer plaatsing

Posted: Tue Mar 02, 2010 3:05 pm
by sander
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

Re: footer plaatsing

Posted: Tue Mar 02, 2010 3:11 pm
by Rolf
Heb je een link?

®

Re: footer plaatsing

Posted: Tue Mar 02, 2010 7:46 pm
by sander
Hoi Rolf,

Sorrie, is wel makkelijk idd...  ;D

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

Groet,

Sander

Re: footer plaatsing

Posted: Tue Mar 02, 2010 8:23 pm
by Rolf
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

Re: footer plaatsing

Posted: Tue Mar 02, 2010 8:37 pm
by Gamonon
#footer{
width: 100%;
position: relative;
bottom: 0;
text-align: center;
      height: 30px;
}

De hoogte staat op 30 pix vast

Re: footer plaatsing

Posted: Tue Mar 02, 2010 8:47 pm
by sander
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

Re: footer plaatsing

Posted: Wed Mar 03, 2010 2:53 pm
by stijlXpres
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...

Re: footer plaatsing

Posted: Wed Mar 03, 2010 3:38 pm
by sander
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

Re: footer plaatsing

Posted: Wed Mar 03, 2010 3:44 pm
by wpbremer
Als ik in de div#wrapper de position: relative; uitschakel komt de footer wel goed te staan, misschien is dat jou oplossing?

Re: footer plaatsing

Posted: Wed Mar 03, 2010 3:50 pm
by sander
Wanneer ik relative uitschakel in de wrapper, krijgt de footer een vaste positie, hij zakt niet wanneer de content langer is...

Re: footer plaatsing

Posted: Wed Mar 03, 2010 3:57 pm
by wpbremer
En het toevoegen van clear: both;  aan de footer div helpt ook niet?

Re: footer plaatsing

Posted: Thu Mar 04, 2010 8:35 am
by brentnl
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>

Re: footer plaatsing

Posted: Thu Mar 04, 2010 10:26 am
by sander
Ik ga het proberen, resultaat post ik hier....
Dank voor alle hulp tot nu toe!!
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited