footer onderaan

famlam · 19 nov 2008

Hoe kan ik ervoor zorgen dat op deze site de footer òf onder de tekst komt, als de tekst lang genoeg is, òf onderaan de pagina, als er te weinig tekst is???

peter vazed · 19 nov 2008

Je hebt wel:
/* Onderkant */
#footermainPan{
height: 170px;
background: url(images/footerbg.gif) 0 0 repeat-x #F3F3F3;
clear: both;
}

maar

hier:

HTML:

<!--div class="footerruimte"></div-->

		</div>	

		
		<div id="footermainPan">
			<div id="footerPan">
				<ul>

zou ik voor:
<div id="footermainPan">
<div style="clear:both;"></div>
zetten

famlam · 20 nov 2008

peter vazed zei:
Je hebt wel:
/* Onderkant */
#footermainPan{
height: 170px;
background: url(images/footerbg.gif) 0 0 repeat-x #F3F3F3;
clear: both;
}

maar

hier:

HTML:

 </div> <div id="footermainPan"> <div id="footerPan"> <ul>

zou ik voor:
<div id="footermainPan">
<div style="clear:both;"></div>
zetten

Dat heeft twee effecten gehad: het zette de balk van de footer boven de tekst van de footer (de links) en het zorgt er niet voor dat de footer onderaan komt...

Kun je misschien (gewoon de broncode overnemen) in de code kunnen aangeven wat er moet staan. (er hoeft waarschijnlijk niet zo veel te veranderen...)

famlam · 3 dec 2008

Nog niet opgelost... Kan iemand dit aub?

famlam · 17 dec 2008

Ik heb weer vanalles geprobeerd (offline), maar het lukt nog steeds niet!
kan iemand helpen???

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="robots" content="index, follow, noopd, noydir" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<title>titel</title>
<style type="text/css">
/* CSS, dit staat eigenlijk in style.css */
/* Algemeen */
body{
padding: 0px;
margin: 17px 0 0;
background: #F3F3F3 url(images/mainbg.gif) repeat-x 0 0;
color: #6D6D6D;
font: 15px/18px Arial, Helvetica, sans-serif;
}
div, p, ul, li, h1, h2, h3, h4{
padding: 0px;
margin: 0px;
}
ul{
list-style-type: none;
}
table tr td{
text-align: justify;
empty-cells: show;
}
abbr {
cursor: help;
}
#mainPan{
width: 778px;
position: relative;
margin: 0 auto;
}
/* Einde Algemeen */

/* Boven */
#topPan{
width: 778px;
height: 180px;
background: #F3F3F3 url(images/topbg.jpg) no-repeat 0 0;
position: relative;
margin: 0 auto;
padding: 0;
} 
#topPan img.logo{
width: 130px;
height: 74px;
position: absolute;
top: 35px;
left: 26px;
border: none;
background: transparent none no-repeat;
}
#topPan h1{
width: 241px;
height: 78px;
display: block;
background: url(images/header.jpg) 0 0 no-repeat #F3F3F3;
color: #fff;
position: absolute;
top: 114px;
left: 0px;
font-size: 12px;
font-weight: bold;
line-height: 16px;
padding: 73px 186px 0 53px;
}
#topPan h2{
width: 600px;
height: 30px;
display: block;
position: absolute;
bottom: 0px;
left: 53px;
background: #F3F3F3;
color: #B88F00;
font: bold 26px/28px Georgia, "Times New Roman", Times, serif;
}
#topPan ul{
width: 438px;
height: 16px;
display: block;
position: absolute;
top: 64px;
right: 45px;
}
#topPan ul li{
width: 85px;
height: 16px;
float: left;
}
#topPan ul li a{
width: 52px;
height: 16px;
display: block;
background: #fff url(images/arrow3.gif) no-repeat 0 6px;
color: #5A5A5A;
font-size: 13px;
text-decoration: none;
padding: 0 0 0 12px;
}
#topPan ul li a:hover{
background: url(images/arrow4.gif) 0 6px no-repeat #fff;
color: #5A5A5A;
text-decoration: none;
}
#topPan ul li.actief a{
cursor: default;
background: url(images/arrow4.gif) 0 6px no-repeat #fff
}
#topPan ul li.actief a:hover{
background: url(images/arrow4.gif) 0 6px no-repeat #fff;
color: #5A5A5A;
text-decoration: none;
}
#topPan ul li.legelijst {
background: none;
cursor: auto;
}
#topPan ul li.downloadlink {
font-weight: bolder;
}
/* Einde bovenkant */

/* Midden */
#bodyTopPan{
width: 778px;
background: #F3F3F3 ;
position: relative;
margin: 0 auto;
}
#bodyTopPan p{
padding: 16px 0px 0px;
}
#bodyTopPan h3{
padding: 18px 53px 0px;
}
#bodyTopPan h4 {
padding: 16px 53px 0px
}
#bodyTopPan p span{
font-weight: bolder;
}
#bodyTopPan img {
border: 1px solid #FFFFCC;
margin-left: 3%;
background-image: none;
}
#bodyTopPan table {
width: 778px
}
#bodyTopPan tr {
vertical-align: top;
}
#bodyTopPan td {
padding: 3px 3px 3px 0px;
}
#bodyTopPan td.links {
left: 0px;
width: 45%;
padding: 10px 70px 0px;
vertical-align: bottom;
}
#bodyTopPan td.rechts {
width: 55%;
vertical-align: bottom;
}
#bodyTopPan hr {
color: #6D6D6D;
height: 1px;
width: 85%;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
#bodyTopPan.antwoordfaq {
margin-left: 3%;
}
#bodyTopPan a {
color: #006A6A;
text-decoration: none;
}
#bodyTopPan a:hover{
text-decoration: underline;
}
#bodyTopPan ul li {
list-style: disc outside;
margin:0 0 0 20px;
padding: 0 0 0 10px;
}
#versies td{
padding-left: 30px
}/* Einde midden */


/* Onderkant */
#footermainPan{
height: 170px;
background: url(images/footerbg.gif) 0 0 repeat-x #F3F3F3;
clear: both;
}

#footerPan{
width: 778px;
height: 90px;
display: block;
position: relative;
margin: 0 auto;
color: #fff;
background: url(images/footerbg.gif) 0 0 repeat-x #979797;
font-family: Tahoma,Arial, Helvetica, sans-serif;
}
#footerPan p{
padding: 51px 0px 0px;
}
#footerPan ul{
width: 600px;
display: block;
position: absolute;
left: 120px;
top: 41px;
padding: 0;
}
#footerPan li{
float: left;
font: 13px/18px Arial, Helvetica, sans-serif;
font-weight: normal;
}
#footerPan ul li a{
padding: 0 12px 0 12px;
color: #fff;
background: #979797;
text-decoration: none;
height: 16px;
}
#footerPan ul li a:hover {
text-decoration: underline;
}
#footerPan ul li.actief a {
cursor: default;
}
#footerPan ul li.actief a:hover {
cursor: default;
text-decoration: none;
}
/* Einde style.css */
#bodyTopPan{height: 600px;}
</style>
</head>



<body>
<div id="mainPan">
<div id="topPan">
<a href="index.html" title="Index"><img src="images/logo.png" alt="" width="130" height="74" class="logo" /></a> 
<h2>titel</h2>
<ul>
<li class="actief"><a href="index.html" title="Index">Home</a></li>
<li><a href="overdesite.htm" title="Over de site">Over</a></li>
<li><a href="contact.htm" title="Contactformulier">Contact</a></li>
<li><a href="faq.htm" title="Veelgestelde vragen">FAQ</a></li>
</ul>
</div>


<div id="bodyTopPan">
<p>tekst..........................................ongeveer 3 regels<br/><br/></p>
				
<h3>Softwareoverzicht:</h3>
<table>
<tr><td class="links"><b><a href="pagina1.htm" title="">pagina 1</a></b></td><td class="rechts">...</td></tr>
<tr><td class="links"><b><a href="pagina2.htm" title="">pagina 2</a></b></td><td class="rechts">...</td></tr>
</table><br/>

<h3>Updates:</h3>
<ol>
<li>Update: <a href="pagina 1.htm" title="">...</a></li>
<li>Nieuw programma: <a href="pagina 2.htm" title="">...</a></li>
<li>Vertraagd: ...</li>
<li>Update: <a href="pagina 1.htm" title="">...</a></li>
<li>Update: <a href="pagina 1.htm" title="">...</a></li>
</ol>
</div>
</div>	

<div id="footermainPan">
<div id="footerPan">
<ul>
<li class="actief">|<a href="index.html" title="Index">Home</a>|</li>
<li><a href="overdesite.htm" title="Over de site">Over</a>|</li>
<li><a href="contact.htm" title="Contactformulier">Contact</a>|</li>
<li><a href="faq.htm" title="Veelgestelde vragen">FAQ</a>|</li>
<li><a href="pagina 1.htm" title="">...</a>|</li>
<li><a href="pagina 2.htm" title="">...</a>|</li>
</ul>
</div>
</div>
</body>
</html>

Johantrax · 20 dec 2008

Als je footer gewoon onderaan de tekst moet plakken.. dan hoef je toch enkel de hoogte van bodyTopPan weg te laten?

Om ervoor te zorgen dat ie dan onderaan de pagina hangt kan je met javascript de hoogte van je bodyTopPan verlengen moest die kleiner zijn. Iets in de aard van (pseudocode)

Code:

ALS
        (bodyhoogte+tophoogte) < (viewporthoogte-footerhoogte)
DAN
        bodyhoogte = (viewporthoogte-footerhoogte-tophoogte)
END

Dit voer je dan uit op de onload van je pagina EN op het resize-event

famlam · 20 dec 2008

Johantrax zei:
Als je footer gewoon onderaan de tekst moet plakken.. dan hoef je toch enkel de hoogte van bodyTopPan weg te laten?

Om ervoor te zorgen dat ie dan onderaan de pagina hangt kan je met javascript de hoogte van je bodyTopPan verlengen moest die kleiner zijn. Iets in de aard van (pseudocode)

Code:

ALS (bodyhoogte+tophoogte) < (viewporthoogte-footerhoogte) DAN bodyhoogte = (viewporthoogte-footerhoogte-tophoogte) END

Dit voer je dan uit op de onload van je pagina EN op het resize-event

Sorry, maar ik kan geen javascript. Kan iemand anders misschien deze code uitwerken?
Ik weet alleen dat ALS vervangen moet worden door if en DAN door { en END door }.

In ieder geval alvast bedankt Johantrax!

Johantrax · 20 dec 2008

Deze doet het volgens mij goed (ongetest)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="robots" content="index, follow, noopd, noydir" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<title>titel</title>
<style type="text/css">
/* CSS, dit staat eigenlijk in style.css */
/* Algemeen */
body{
padding: 0px;
margin: 17px 0 0;
background: #F3F3F3 url(images/mainbg.gif) repeat-x 0 0;
color: #6D6D6D;
font: 15px/18px Arial, Helvetica, sans-serif;
}
div, p, ul, li, h1, h2, h3, h4{
padding: 0px;
margin: 0px;
}
ul{
list-style-type: none;
}
table tr td{
text-align: justify;
empty-cells: show;
}
abbr {
cursor: help;
}
#mainPan{
width: 778px;
position: relative;
margin: 0 auto;
}
/* Einde Algemeen */

/* Boven */
#topPan{
width: 778px;
height: 180px;
background: #F3F3F3 url(images/topbg.jpg) no-repeat 0 0;
position: relative;
margin: 0 auto;
padding: 0;
} 
#topPan img.logo{
width: 130px;
height: 74px;
position: absolute;
top: 35px;
left: 26px;
border: none;
background: transparent none no-repeat;
}
#topPan h1{
width: 241px;
height: 78px;
display: block;
background: url(images/header.jpg) 0 0 no-repeat #F3F3F3;
color: #fff;
position: absolute;
top: 114px;
left: 0px;
font-size: 12px;
font-weight: bold;
line-height: 16px;
padding: 73px 186px 0 53px;
}
#topPan h2{
width: 600px;
height: 30px;
display: block;
position: absolute;
bottom: 0px;
left: 53px;
background: #F3F3F3;
color: #B88F00;
font: bold 26px/28px Georgia, "Times New Roman", Times, serif;
}
#topPan ul{
width: 438px;
height: 16px;
display: block;
position: absolute;
top: 64px;
right: 45px;
}
#topPan ul li{
width: 85px;
height: 16px;
float: left;
}
#topPan ul li a{
width: 52px;
height: 16px;
display: block;
background: #fff url(images/arrow3.gif) no-repeat 0 6px;
color: #5A5A5A;
font-size: 13px;
text-decoration: none;
padding: 0 0 0 12px;
}
#topPan ul li a:hover{
background: url(images/arrow4.gif) 0 6px no-repeat #fff;
color: #5A5A5A;
text-decoration: none;
}
#topPan ul li.actief a{
cursor: default;
background: url(images/arrow4.gif) 0 6px no-repeat #fff
}
#topPan ul li.actief a:hover{
background: url(images/arrow4.gif) 0 6px no-repeat #fff;
color: #5A5A5A;
text-decoration: none;
}
#topPan ul li.legelijst {
background: none;
cursor: auto;
}
#topPan ul li.downloadlink {
font-weight: bolder;
}
/* Einde bovenkant */

/* Midden */
#bodyTopPan{
width: 778px;
background: #F3F3F3 ;
position: relative;
margin: 0 auto;
}
#bodyTopPan p{
padding: 16px 0px 0px;
}
#bodyTopPan h3{
padding: 18px 53px 0px;
}
#bodyTopPan h4 {
padding: 16px 53px 0px
}
#bodyTopPan p span{
font-weight: bolder;
}
#bodyTopPan img {
border: 1px solid #FFFFCC;
margin-left: 3%;
background-image: none;
}
#bodyTopPan table {
width: 778px
}
#bodyTopPan tr {
vertical-align: top;
}
#bodyTopPan td {
padding: 3px 3px 3px 0px;
}
#bodyTopPan td.links {
left: 0px;
width: 45%;
padding: 10px 70px 0px;
vertical-align: bottom;
}
#bodyTopPan td.rechts {
width: 55%;
vertical-align: bottom;
}
#bodyTopPan hr {
color: #6D6D6D;
height: 1px;
width: 85%;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
#bodyTopPan.antwoordfaq {
margin-left: 3%;
}
#bodyTopPan a {
color: #006A6A;
text-decoration: none;
}
#bodyTopPan a:hover{
text-decoration: underline;
}
#bodyTopPan ul li {
list-style: disc outside;
margin:0 0 0 20px;
padding: 0 0 0 10px;
}
#versies td{
padding-left: 30px
}/* Einde midden */


/* Onderkant */
#footermainPan{
height: 170px;
background: url(images/footerbg.gif) 0 0 repeat-x #F3F3F3;
clear: both;
}

#footerPan{
width: 778px;
height: 90px;
display: block;
position: relative;
margin: 0 auto;
color: #fff;
background: url(images/footerbg.gif) 0 0 repeat-x #979797;
font-family: Tahoma,Arial, Helvetica, sans-serif;
}
#footerPan p{
padding: 51px 0px 0px;
}
#footerPan ul{
width: 600px;
display: block;
position: absolute;
left: 120px;
top: 41px;
padding: 0;
}
#footerPan li{
float: left;
font: 13px/18px Arial, Helvetica, sans-serif;
font-weight: normal;
}
#footerPan ul li a{
padding: 0 12px 0 12px;
color: #fff;
background: #979797;
text-decoration: none;
height: 16px;
}
#footerPan ul li a:hover {
text-decoration: underline;
}
#footerPan ul li.actief a {
cursor: default;
}
#footerPan ul li.actief a:hover {
cursor: default;
text-decoration: none;
}
/* Einde style.css */
</style>

<script type="text/javascript">
<!--
var contentH;	//hoogte van deze pagina (body)
var footH;		//hoogte van de div footermainPan
var screenH;	//hoogte van de viewport
//opgeroepen onload
function initH() {
	contentH = document.body.offsetHeight;
	footH = document.getElementById("footermainPan").offsetHeight;
	screenH = window.innerHeight; //in IE vermoedelijk document.body.clientHeight
	resize();
}
function resize() {
	//pagina is kleiner dan de viewport van de gebruiker
	if (screenH > contentH)
		document.getElementById("mainPan").style.height = (screenH-footH)+"px";
}
//laat deze functie elke keer uitvoeren wanneer het venster van grootte wijzigt
window.onresize = resize;
-->
</script>

</head>

<body onload="initH();">
<div id="mainPan">
<div id="topPan">
<a href="index.html" title="Index"><img src="images/logo.png" alt="" width="130" height="74" class="logo" /></a> 
<h2>titel</h2>
<ul>
<li class="actief"><a href="index.html" title="Index">Home</a></li>
<li><a href="overdesite.htm" title="Over de site">Over</a></li>
<li><a href="contact.htm" title="Contactformulier">Contact</a></li>
<li><a href="faq.htm" title="Veelgestelde vragen">FAQ</a></li>
</ul>
</div>


<div id="bodyTopPan">
<p>tekst..........................................ongeveer 3 regels<br/><br/></p>
				
<h3>Softwareoverzicht:</h3>
<table>
<tr><td class="links"><b><a href="pagina1.htm" title="">pagina 1</a></b></td><td class="rechts">...</td></tr>
<tr><td class="links"><b><a href="pagina2.htm" title="">pagina 2</a></b></td><td class="rechts">...</td></tr>
</table><br/>

<h3>Updates:</h3>
<ol>
<li>Update: <a href="pagina 1.htm" title="">...</a></li>
<li>Nieuw programma: <a href="pagina 2.htm" title="">...</a></li>
<li>Vertraagd: ...</li>
<li>Update: <a href="pagina 1.htm" title="">...</a></li>
<li>Update: <a href="pagina 1.htm" title="">...</a></li>
</ol>
</div>
</div>	

<div id="footermainPan">
<div id="footerPan">
<ul>
<li class="actief">|<a href="index.html" title="Index">Home</a>|</li>
<li><a href="overdesite.htm" title="Over de site">Over</a>|</li>
<li><a href="contact.htm" title="Contactformulier">Contact</a>|</li>
<li><a href="faq.htm" title="Veelgestelde vragen">FAQ</a>|</li>
<li><a href="pagina 1.htm" title="">...</a>|</li>
<li><a href="pagina 2.htm" title="">...</a>|</li>
</ul>
</div>
</div>
</body>
</html>

famlam · 21 dec 2008

Johantrax zei:

Deze doet het volgens mij goed (ongetest)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="robots" content="index, follow, noopd, noydir" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<title>titel</title>
<style type="text/css">
/* CSS, dit staat eigenlijk in style.css */
/* Algemeen */
body{
padding: 0px;
margin: 17px 0 0;
background: #F3F3F3 url(images/mainbg.gif) repeat-x 0 0;
color: #6D6D6D;
font: 15px/18px Arial, Helvetica, sans-serif;
}
div, p, ul, li, h1, h2, h3, h4{
padding: 0px;
margin: 0px;
}
ul{
list-style-type: none;
}
table tr td{
text-align: justify;
empty-cells: show;
}
abbr {
cursor: help;
}
#mainPan{
width: 778px;
position: relative;
margin: 0 auto;
}
/* Einde Algemeen */

/* Boven */
#topPan{
width: 778px;
height: 180px;
background: #F3F3F3 url(images/topbg.jpg) no-repeat 0 0;
position: relative;
margin: 0 auto;
padding: 0;
} 
#topPan img.logo{
width: 130px;
height: 74px;
position: absolute;
top: 35px;
left: 26px;
border: none;
background: transparent none no-repeat;
}
#topPan h1{
width: 241px;
height: 78px;
display: block;
background: url(images/header.jpg) 0 0 no-repeat #F3F3F3;
color: #fff;
position: absolute;
top: 114px;
left: 0px;
font-size: 12px;
font-weight: bold;
line-height: 16px;
padding: 73px 186px 0 53px;
}
#topPan h2{
width: 600px;
height: 30px;
display: block;
position: absolute;
bottom: 0px;
left: 53px;
background: #F3F3F3;
color: #B88F00;
font: bold 26px/28px Georgia, "Times New Roman", Times, serif;
}
#topPan ul{
width: 438px;
height: 16px;
display: block;
position: absolute;
top: 64px;
right: 45px;
}
#topPan ul li{
width: 85px;
height: 16px;
float: left;
}
#topPan ul li a{
width: 52px;
height: 16px;
display: block;
background: #fff url(images/arrow3.gif) no-repeat 0 6px;
color: #5A5A5A;
font-size: 13px;
text-decoration: none;
padding: 0 0 0 12px;
}
#topPan ul li a:hover{
background: url(images/arrow4.gif) 0 6px no-repeat #fff;
color: #5A5A5A;
text-decoration: none;
}
#topPan ul li.actief a{
cursor: default;
background: url(images/arrow4.gif) 0 6px no-repeat #fff
}
#topPan ul li.actief a:hover{
background: url(images/arrow4.gif) 0 6px no-repeat #fff;
color: #5A5A5A;
text-decoration: none;
}
#topPan ul li.legelijst {
background: none;
cursor: auto;
}
#topPan ul li.downloadlink {
font-weight: bolder;
}
/* Einde bovenkant */

/* Midden */
#bodyTopPan{
width: 778px;
background: #F3F3F3 ;
position: relative;
margin: 0 auto;
}
#bodyTopPan p{
padding: 16px 0px 0px;
}
#bodyTopPan h3{
padding: 18px 53px 0px;
}
#bodyTopPan h4 {
padding: 16px 53px 0px
}
#bodyTopPan p span{
font-weight: bolder;
}
#bodyTopPan img {
border: 1px solid #FFFFCC;
margin-left: 3%;
background-image: none;
}
#bodyTopPan table {
width: 778px
}
#bodyTopPan tr {
vertical-align: top;
}
#bodyTopPan td {
padding: 3px 3px 3px 0px;
}
#bodyTopPan td.links {
left: 0px;
width: 45%;
padding: 10px 70px 0px;
vertical-align: bottom;
}
#bodyTopPan td.rechts {
width: 55%;
vertical-align: bottom;
}
#bodyTopPan hr {
color: #6D6D6D;
height: 1px;
width: 85%;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
#bodyTopPan.antwoordfaq {
margin-left: 3%;
}
#bodyTopPan a {
color: #006A6A;
text-decoration: none;
}
#bodyTopPan a:hover{
text-decoration: underline;
}
#bodyTopPan ul li {
list-style: disc outside;
margin:0 0 0 20px;
padding: 0 0 0 10px;
}
#versies td{
padding-left: 30px
}/* Einde midden */


/* Onderkant */
#footermainPan{
height: 170px;
background: url(images/footerbg.gif) 0 0 repeat-x #F3F3F3;
clear: both;
}

#footerPan{
width: 778px;
height: 90px;
display: block;
position: relative;
margin: 0 auto;
color: #fff;
background: url(images/footerbg.gif) 0 0 repeat-x #979797;
font-family: Tahoma,Arial, Helvetica, sans-serif;
}
#footerPan p{
padding: 51px 0px 0px;
}
#footerPan ul{
width: 600px;
display: block;
position: absolute;
left: 120px;
top: 41px;
padding: 0;
}
#footerPan li{
float: left;
font: 13px/18px Arial, Helvetica, sans-serif;
font-weight: normal;
}
#footerPan ul li a{
padding: 0 12px 0 12px;
color: #fff;
background: #979797;
text-decoration: none;
height: 16px;
}
#footerPan ul li a:hover {
text-decoration: underline;
}
#footerPan ul li.actief a {
cursor: default;
}
#footerPan ul li.actief a:hover {
cursor: default;
text-decoration: none;
}
/* Einde style.css */
</style>

<script type="text/javascript">
<!--
var contentH;	//hoogte van deze pagina (body)
var footH;		//hoogte van de div footermainPan
var screenH;	//hoogte van de viewport
//opgeroepen onload
function initH() {
	contentH = document.body.offsetHeight;
	footH = document.getElementById("footermainPan").offsetHeight;
	screenH = window.innerHeight; //in IE vermoedelijk document.body.clientHeight
	resize();
}
function resize() {
	//pagina is kleiner dan de viewport van de gebruiker
	if (screenH > contentH)
		document.getElementById("mainPan").style.height = (screenH-footH)+"px";
}
//laat deze functie elke keer uitvoeren wanneer het venster van grootte wijzigt
window.onresize = resize;
-->
</script>

</head>

<body onload="initH();">
<div id="mainPan">
<div id="topPan">
<a href="index.html" title="Index"><img src="images/logo.png" alt="" width="130" height="74" class="logo" /></a> 
<h2>titel</h2>
<ul>
<li class="actief"><a href="index.html" title="Index">Home</a></li>
<li><a href="overdesite.htm" title="Over de site">Over</a></li>
<li><a href="contact.htm" title="Contactformulier">Contact</a></li>
<li><a href="faq.htm" title="Veelgestelde vragen">FAQ</a></li>
</ul>
</div>


<div id="bodyTopPan">
<p>tekst..........................................ongeveer 3 regels<br/><br/></p>
				
<h3>Softwareoverzicht:</h3>
<table>
<tr><td class="links"><b><a href="pagina1.htm" title="">pagina 1</a></b></td><td class="rechts">...</td></tr>
<tr><td class="links"><b><a href="pagina2.htm" title="">pagina 2</a></b></td><td class="rechts">...</td></tr>
</table><br/>

<h3>Updates:</h3>
<ol>
<li>Update: <a href="pagina 1.htm" title="">...</a></li>
<li>Nieuw programma: <a href="pagina 2.htm" title="">...</a></li>
<li>Vertraagd: ...</li>
<li>Update: <a href="pagina 1.htm" title="">...</a></li>
<li>Update: <a href="pagina 1.htm" title="">...</a></li>
</ol>
</div>
</div>	

<div id="footermainPan">
<div id="footerPan">
<ul>
<li class="actief">|<a href="index.html" title="Index">Home</a>|</li>
<li><a href="overdesite.htm" title="Over de site">Over</a>|</li>
<li><a href="contact.htm" title="Contactformulier">Contact</a>|</li>
<li><a href="faq.htm" title="Veelgestelde vragen">FAQ</a>|</li>
<li><a href="pagina 1.htm" title="">...</a>|</li>
<li><a href="pagina 2.htm" title="">...</a>|</li>
</ul>
</div>
</div>
</body>
</html>

Helaas, maar nee, deze levert geen verbetering op. Kijk maar naar het screenshot...

EDIT: Werkt niet goed in IE, wel in bijvoorbeeld chrome.
Weet je hoe ik het kan laten werken voor allebei?

//in IE vermoedelijk document.body.clientHeight

Werkt niet...

Johantrax · 21 dec 2008

Dat het niet werkte in IE stond al in de code

Code:

screenH = window.innerHeight; //in IE vermoedelijk document.body.clientHeight

Wanneer je window.innerHeight dus veranderd naar document.body.clientHeight werkt ie wel in IE, maar dan weer niet in al de rest.

Ik denk dat je je vraag best even stelt in het JavaScript-forum, ik heb zo'n vermoeden dat Glest hier wel iets zal op weten :thumb:

famlam · 21 dec 2008

Johantrax zei:
Dat het niet werkte in IE stond al in de code

Code:

screenH = window.innerHeight; //in IE vermoedelijk document.body.clientHeight

Wanneer je window.innerHeight dus veranderd naar document.body.clientHeight werkt ie wel in IE, maar dan weer niet in al de rest.

Dat stukje citeerde ik aan het einde van mijn bericht ook

Ik heb ook eens geprobeerd om die IE-code alleen te doen, maar toen werkte hij ook niet in IE (oftewel: toen werkte hij nergens)

Johantrax zei:
Ik denk dat je je vraag best even stelt in het JavaScript-forum, ik heb zo'n vermoeden dat Glest hier wel iets zal op weten :thumb:

Ik heb gevraagd of deze naar het javascriptforum kan...

Tha Devil · 21 dec 2008

Voorlopig verhuis ik hem nog niet.

Waarschijnlijk kun je het met CSS ook wel oplossen, zie dit voorbeeld

famlam · 27 dec 2008

Tha Devil zei:
Voorlopig verhuis ik hem nog niet.

Waarschijnlijk kun je het met CSS ook wel oplossen, zie dit voorbeeld

Ik krijg dat voorbeeld niet toegepast in mijn site! (waarom weet ik niet, vanalles geprobeerd.)! Hij zet het te laag! (de halve footer wordt maar weergeven, de rest niet)

Tha Devil · 27 dec 2008

Maar het voorbeeld werkt wel bij jou?

famlam · 27 dec 2008

Tha Devil zei:
Maar het voorbeeld werkt wel bij jou?

ja, dus misschien heeft het iets te maken met de andere css die ik gebruik???

Tha Devil · 27 dec 2008

Dat moet dan wel.

Begin eerst met alleen je HTML-code er in te zetten. Daarna ga je de CSS-classes/id's een voor een er in zetten.

Wanneer hij fout loopt moet je kijk wat in die CSS-code er voor kan hebben gezorgd.

footer onderaan

famlam

Gebruiker

peter vazed

Meubilair

famlam

Gebruiker

famlam

Gebruiker

famlam

Gebruiker

Johantrax

Terugkerende gebruiker

famlam

Gebruiker

Johantrax

Terugkerende gebruiker

famlam

Gebruiker

Johantrax

Terugkerende gebruiker

famlam

Gebruiker

Tha Devil

Moderator

famlam

Gebruiker

Tha Devil

Moderator

famlam

Gebruiker

Tha Devil

Moderator

Nieuwste berichten

Wij waarderen jouw privacy