Footer onderaan de pagina

Status
Niet open voor verdere reacties.
S

sjoerdd87

Gebruiker
Lid geworden
4 jul 2009
Berichten
26
Hallo allemaal,

Ik ben al een tijdje bezig om de footer onderaan een pagina te krijgen, ik krijg het echter niet voor elkaar aangezien ik ben gaan stapelen met de lagen zodat het ontwerp precies word zoals ik wil.

Hieronder de codes die ik gebruikt heb, graag wil ik dus dat de footer automatisch meezakt zodra er veel tekst in de Rbcontainer komt.

zie ook: http://www.dekker-design.nl/GOV/On_the_town_7.shtml

Inlognaam: helpmij
pass: admin

Code: 
html 
    { 
        background-color: #000000;
        background-image: url('');
        height: 239px;
        width: auto;
        
    }
    
body
	{
		width: 960px;
		margin: 20px auto;
		padding-top: 0px;
		padding-bottom: 50px; 
		margin-left: auto;
		margin-right: auto;
		
		  
	}
	
div#header
	{
		background-image: url('images/header.jpg');
		background-repeat: repeat-x;
		width: 960px;
		height: 114px
	}
	
ul#menu 
    { 
        margin: 0px; 
        padding-left: 137px; 
        list-style: none; 
        height: 45px; 
        width: 823px; 
        background-color: #0e0e0e;
        background-image: url('');
        white-space: no-wrap;

    } 
     
ul#menu li 
    { 
        float: left; 
        height: 45px; 
    } 
     
ul#menu li a 
    { 
        display: block; 
        overflow: hidden; 
        height:    45px; 
        padding: 12px 15px 0px 15px; 
        font-family: Arial; 
        color: #ffffff; 
        font-size: 20px; 
        text-decoration: none; 
        font-weight: bold; 
    } 
     
ul#menu li a:hover, ul#menu li.active a, ul#menu li.active a:hover 
    { 
        padding: 12px 15px 0px 15px; 
        background-color: #a00000;
        color: #000000; 
        height: 45px; 
    } 
    
div#container 
    { 
        width: 960px;
        overflow: hidden;
        float: left;
    }
        
div#bgContainer 
    { 
        background-color: #000000;
        background-image: url('images/Theater960px.jpg');
        width: 960px; 
        min-height: 638px;   
        height: auto;
        float: left; 
        padding-bottom: 30000px; 
        margin-bottom: -29995px;
    }
    
div#lbContainer 
    { 
        background-color: ;
        background-image: url('images/transparant.png');
        width: 345px; 
        height: 105px;
        position: absolute;
        top: 199px;
        left: ; 
        float: left;
   		margin-left: 20px;
    }
    
div#lmContainer 
    { 
        background-color: ;
        background-image: url('images/transparant.png');
        width: 345px; 
        height: 280px;
        position: absolute;
        top: 351px;
        left: ; 
        float: left;
        margin-left: 20px;
    }
    
div#loContainer 
    { 
        background-color: ;
        background-image: url('images/transparant.png');
        width: 345px; 
        height: 105px;
        position: absolute;
        top: 697px;
        left: ; 
        float: left;
        margin-left: 20px;
    }
    
div#rbContainer 
    { 
        background-color: ;
        background-image: url('images/transparant.png');
        width: 555px; 
        height: auto;
        min-height: 603px;
        position: absolute;
        top: 199px;
        right: ; 
        float: left; 
        margin-left: 385px;
    }
    
  
div#footer 
    { 
        background-color: #0e0e0e;
        width: 960px; 
        height: 50px;
        float: left;
    }
    
  
h1 
    { 
        font-family: Arial; 
        font-size: 17px; 
        color: #ff0000; 
        font-weight: bold; 
        margin-left: 10px;
        margin-top: 10px;
        filter:;
        opacity:;
    }
    
h2 
    { 
        font-family: Arial; 
        font-size: 11.2px; 
        color: #ffffff; 
        font-weight: ; 
        margin: 0;
        text-align: left;
        margin-left: 10px;
        margin-top: 10px;
    }
    
h3 
    { 
        font-family: Arial; 
        font-size: 22px; 
        color: #ffffff;
        font-weight: none; 
        text-align: center;
        margin-left: 0px;
        margin-top: 12px;
        height: 40px;
        width: 345px;
        position: relative;
    }
    
h4
    { 
        font-family: Arial; 
        font-size: 13px; 
        color: #ffffff; 
        font-weight: bold; 
        text-align: center;
        margin-left: 0px; 
        margin-top: 0px;
        height: 20px; 
        width: 555px; 
        background-color: #0e0e0e;        
        margin: 0px; 
        padding-left: 0px; 
        white-space: no-wrap;
        list-style: none; 
     }
     
h5
    { 
        font-family: Arial; 
        font-size: 12px; 
        color: #ffffff; 
        font-weight: ; 
        margin: 0;
        text-align: right;
        margin-right: 10px;
        margin-top: 10px;
    }
     
h6
    { 
        font-family: Verdana; 
        font-size: 10px; 
        color: #ffffff; 
        font-weight: bold; 
        margin: 0;
        text-align: right;
        margin-right: 5px; 
        margin-top: 9px; 
        float: right;

     }
     
     .spamvrij {
direction: rtl;
unicode-bidi: bidi-override;
}


div#footer a:link{
background-color: transparent;
color: #ffffff;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
}

div#footer a:visited{
background-color: transparent;
color: #ffffff;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
}

div#footer a:hover{
background-color: transparent;
color: #0090fe;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
}

div#footer a:active{
background-color: transparent;
color: #000000;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
}





h2 a:link{
background-color: transparent;
color: #ff0000;
text-decoration: underline;
font-family: Verdana;
font-weight: bold;
}

h2 a:visited{
background-color: transparent;
color: #ff0000;
text-decoration: underline;
font-family: Verdana;
font-weight: bold;
}

h2 a:hover{
background-color: transparent;
color: #0090fe;
text-decoration: underline;
font-family: Verdana;
font-weight: bold;
}

h2 a:active{
background-color: transparent;
color: #0090fe;
text-decoration: underline;
font-family: Verdana;
font-weight: bold;
}




.musicals_div ul
{
	padding: 0px;
	margin-top: 12px;
	font-family: Arial;
    text-align: center;
    font-weight: bold;
	font-size: 22px;
	font-color:#ffffff;
	list-style:none;
	background: transparent;
}
.musicals_div ul li
{
	background: transparent;
	line-height: 40px;
	border-bottom: 0px solid #000;
}
.musicals_div ul li a
{
	text-decoration: none;
    overflow: hidden; 
    color: #ffffff;
	display: block;
}
.musicals_div ul li a:hover
{
	background: #a00000;
	color: #000000;
}
.musicals_div ul li#active
{
	background: #a00000;
	color: #000000;
	font-color: #000000;
}





    
h4 li 
    { 
        float: left; 
        height: 20px;
    } 
     
h4 li a 
    { 
        display: block; 
        overflow: hidden; 
        height:    20px; 
        padding: 3px 5.8px 0px 5.9px; 
        font-family: Arial; 
        color: #ffffff; 
        font-size: 13px; 
        text-decoration: none; 
        font-weight: bold;
    } 
     
h4 li a:hover, h4 li.active a, h4 li.active a:hover 
    { 
        padding: 3px 5.8px 0px 5.9px; 
        background-color: #a00000;
        color: #000000; 
        height: 17px;
    } 



img
{
float: left;
margin-right: 0px;
}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"> 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

        <head> 
                <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
                <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
                <title><!--#include file="title.shtml"--></title>            
                <link rel="stylesheet" type="text/css" href="opmaak.css" /> 
                <link rel="shortcut icon" href="images/favicon.ico">
                <link rel="icon" href="images/favicon.ico">  
                <meta name="keywords" content="<!--#include file="keywords.shtml"-->">
				<meta name="description" content="<!--#include file="title.shtml"-->">
                <meta name="robots" content="index, follow" />
                <meta name="revisit-after" content="1 month" />
        </head> 
         
        <body> 
         
        <div id="header">
        <!--#include file="teksten/leden_tekst.shtml"-->
        </div>        
                
        <ul id="menu"> 
        <li><a href="index.shtml">-Intro-</a></li>
        <li><a href="Toekomstmuziek.shtml">-Toekomstmuziek-</a></li>
        <li><a href="Kaarten.shtml">-Kaarten-</a></li>
        <li><a href="Gastenboek.shtml">-Gastenboek-</a></li>
        <li><a href="Contact.shtml">-Contact-</a></li>
        </ul> 

        <div id="container">
        
        <div id="bgContainer">

        </div>
        
        <div id="lbContainer">
        
        <h3><!--#include file="teksten/musicalshome_tekst.shtml"--></h3>
        
        </div>
        
        <div id="lmContainer">
        
        <!--#include file="animatie.htm"-->
        
        </div>
        
        <div id="loContainer">
        
        <!--#include file="sponsoren.htm"-->
        
        </div>
        
        <div id="rbContainer">
              
        <h4>
        <li><a href="On_the_town_1.shtml">Het verhaal</a></li>
        <li><a href="On_the_town_2.shtml">Dirigent</a></li>
        <li><a href="On_the_town_3.shtml">Regisseur</a></li>
        <li><a href="On_the_town_4.shtml">Choreografie</a></li>
        <li><a href="On_the_town_5.shtml">Rolverdeling</a></li>
        <li><a href="On_the_town_6.shtml">Gastsolisten</a></li>
        <li class="active"><a href="On_the_town_7.shtml">Het koor</a></li>
        </ul>
        </h4>   
               
        <h1>Musical "On the town" - het Koor</h1>
        
        <h2><!--#include file="teksten/Ott_Koor_tekst.shtml"--></h2>


        
        </div>

        

        
        <div id="footer">
        <h6>© 2011 - <!--#include file="datum.php"-->  © Webdesign: <a href="http://www.dekker-design.nl">Dekker Design</a>

        </h6>
             
        </div>   
         
        </body> 
         
</html>
 
Laatst bewerkt:
Zet het volgende stukje tekst eens tussen

<h2><!--#include file="teksten/Ott_Koor_tekst.shtml"--></h2>

<div id="footer">
<h6>© 2011 - <!--#include file="datum.php"--> © Webdesign: <a href="http://www.dekker-design.nl">Dekker Design</a>

</h6>
</div>

</div>

Mvrgr Jan
 
Dit is inderdaad een mogelijkheid, maar als ik heb liever dat de achtergrondfoto (bgcontainer) meerekt zodra de (Rbcontainer) langer word, dan gaat de footer namelijk automatisch mee, of zal je dan problemen krijgen met de foto dat deze dubbel eronder komt te staan?
 
In je huidige script staat de RBCONTAINER niet in de BGCONTAINER

In regel 36 wordt deze geopend en in regel 38 weer gesloten, hier tussen zul je de code van de RBCONTAINER moeten plaatsen. (De RBCONTAINER staat nu over de BGCONTAINER heen.)



Wat dit voor invloed heeft op de foto weet ik niet.

Maar wie niet waagd wie niet wint.

Jan
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan