Microwaver
Legacy Member
Hallo iedereen.
Ik zit, wederom, met een 'klein' probleempje.
Ik ben bezig aan een site en eerst was het ok. tot ik op het lumineuze gedacht kwam er nog een footer bij te zetten.
eerst had ik de afbeelding in de body gezet zodat die over de gehele pagina werd afgebeeld. maar nu ik die footer wil invoegen kom ik enkele problemen tegen.
De bedoeling is, dat de footer op elke pagina geheel onderaan de pagina komt te staan, en de inhoud volgt.
Hoe kan ik dit aanpassen. Want ik heb al meerdere malen geprobeerd in de tabel (ik heb tabellen gebruikt voor de absolute positionering) het middelste stuk een 'Height="100%" te geven.
Hier heb je de HTML code
en hier de CSS
Het voorlopige resultaat kan je hier 'bewonderen'
http://users.telenet.be/DeTrekBeiren/Tires
Ik zit, wederom, met een 'klein' probleempje.
Ik ben bezig aan een site en eerst was het ok. tot ik op het lumineuze gedacht kwam er nog een footer bij te zetten.
eerst had ik de afbeelding in de body gezet zodat die over de gehele pagina werd afgebeeld. maar nu ik die footer wil invoegen kom ik enkele problemen tegen.
De bedoeling is, dat de footer op elke pagina geheel onderaan de pagina komt te staan, en de inhoud volgt.
Hoe kan ik dit aanpassen. Want ik heb al meerdere malen geprobeerd in de tabel (ik heb tabellen gebruikt voor de absolute positionering) het middelste stuk een 'Height="100%" te geven.
Hier heb je de HTML code
Code:
<!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">
<head>
<title>Tires Distribution</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="intMidden">
<table align="center" cellpadding="0" cellspacing="0" class="all">
<!-- heading 1, above the menu -->
<tr>
<td class="head1">
<a href="#">home</a> | <a href="#">search</a> | <a href="#">sitemap</a>
</td>
<td class="head1" align="right">
<img src="images/head1.jpg" alt="head1"/>
</td>
</tr>
<!-- MENU -->
<tr>
<td colspan="2" class="menu" >
<table cellpadding="0" cellspacing="0">
<tr>
<td>[menu]</td>
</tr>
</table>
</td>
</tr>
<!-- heading image -->
<tr>
<td colspan="2" width="1000">
<img src="images/head2.jpg" alt="head2"/></td>
</tr>
<!-- Content -->
<tr>
<td colspan="2" class="content" id="background">
<div class="content_news">
<h2>Nieuws</h2>
</div>
<div class="content_content">
<h2>[heading]</h2>
<div class="inhoud">
[content]
</div>
</div>
</td>
</tr>
</table>
<div class="reset" id="footer"> </div>
</div>
</body>
</html>en hier de CSS
Code:
/* CSS Document */
h2{
color:#8C9CAC;
font-family:Century Gothic, Arial;
padding-left:29px;
background-image:url(images/arrow.jpg);
background-repeat:no-repeat;
height:24px;
}
body{
margin:0px 0px 0px 0px;
color:#FFFFFF;
font: Arial, Helvetica, sans-serif;
font-size:16px;
background-color:#202A34;
}
/* table around all*/
.all{
width:1000px;
}
/* above menu */
.head1{
height:50px;
background-color:#415060;
vertical-align:top;
padding-left:10px;
padding-top:3px;
text-align:left;}
}
.head1 a{ text-decoration:none;text-align:left;}
.head1 a:hover{text-decoration:underline;text-align:left;}
.menu{
background-image:url(images/menu_bg.jpg);
background-repeat:repeat-x;
height:34px;
text-align:left;
}
.menu a{
font-weight:bold;
font-variant:small-caps;
text-decoration:none;
font-family:Century Gothic, Arial;
padding: 0px 5px 0px 5px;
}
a, a:visited, a:active{
color:white;
}
.content {
text-align:left;
height:100%;
}
.content_news{
float:left;
width:200px;
padding: 5px 0px 5px 7px;
height:auto
}
.content_content{
float:right;
width:765px;
padding:5px 15px 5px 0px;
height:auto;
}
.inhoud{
padding: 0px 10px 10px 29px;
height:100%;
}
#background {
background-image:url(images/content_bg.jpg);
background-position:center;
background-repeat:repeat-y;
height:100%;
}
#footer {
height:45px;
background-repeat:repeat-x;
background-image:url(images/footer.gif);
}
.reset {
font-size: 1px;
line-height:1px;
margin:0px;
padding:0px;
clear: both;
width:1000px;
}
.intMidden {
width:1000px;
margin-left:auto;
margin-right:auto;
}Het voorlopige resultaat kan je hier 'bewonderen'
http://users.telenet.be/DeTrekBeiren/Tires
, alles staat onderaan, dus moet ik eerst scrollen en dan staat alles op elkaar geplakt.