Beste
Ik heb de volgende site: http://users.skynet.be/fa307845/ gemaakt, maar nu zitten er nog enkele foutjes in. Ik zou graag willen dat de footer van mijn site, altijd tegen de onderkant van het venster plakt (bij verschillende resoluties) en dat mijn center-div (main_img) hierdoor uitrekt. Dit lukt mij echter niet. Ik heb al geprobeerd met height: 100%, maar dit werkt niet. Heeft er iemand een idee hoe dit moet en of dit überhaupt mogelijk is? En kan ik dan een grote achtergrondfoto nemen die telkens meer zichtbaar wordt naarmate de venstergrootte groter wordt?
Alvast bedankt!
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TES | Total Energy Solutions</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" >
</head>
<body onLoad="MM_preloadImages('images/statement_over.png','images/about_over.png','images/history_over.png','images/contact_over.png')">
<div id="container">
<div id="header"><img src="images/header.jpg" width="968" height="121" alt="Header"></div>
<div id="nav">
<div id="buttonwrapper">
<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/home_over.png',0)"><img src="images/home.png" alt="Home" name="Home" width="100" height="20" border="0"></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Statement','','images/statement_over.png',1)"><img src="images/statement.png" alt="Statement" name="Statement" width="100" height="20" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About','','images/about_over.png',1)"><img src="images/about.png" alt="About Us" name="About" width="100" height="20" border="0"></a>
<a href="history.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('history','','images/history_over.png',1)"><img src="images/history.png" alt="History" name="history" width="100" height="20" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/contact_over.png',1)"><img src="images/contact.png" alt="Contact" name="contact" width="100" height="20" border="0"></a>
</div>
</div>
<div id="main_img"><img src="images/main_img.jpg" width="968" height="auto" alt="achtergrond">
<div id="main_text">
<h2>mission statement</h2>
<p>Total Energy Solutions bestudeert, ontwerpt en verwezenlijkt technische installaties in gebouwen. Wij ontwerpen en formuleren duurzame oplossingen op maat van onze klanten, maar fungeren ook als multifunctionele partner bij een effectieve implementatie of installatie.</p>
<p>Om onze opdracht uit te voeren, moeten we de behoeften van onze klanten doorgronden en hen op een kritische en innovatieve manier bijstaan met professioneel advies. We zijn het aan hen en aan onszelf verschuldigd steeds op de hoogte te zijn van de allerlaatste trends en ontwikkelingen en ons constant bij te scholen.</p>
</div>
<div id="left_text">
<h2>news</h2>
<p>Website online!</p>
</div>
</div>
<div id="footer"><img src="images/footer.jpg" width="968" height="73" alt="Footer"></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
CSS:
body {
height: 100%;
background: #e5e6e6;
font-family:Tahoma, Geneva, sans-serif;
font-size: 80%;
color: white;
text-shadow: 0.1em 0.1em 0.05em #333;
overflow:hidden
}
#container {
width: 968px;
height: 100%;
background: #e5e6e6;
margin-top: -8px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
height: 121px;
}
#nav {
background-image: url(../images/nav.jpg);
background-repeat: no-repeat;
position: relative;
height: 25px;
}
#buttonwrapper {
margin-top: auto;
margin-bottom: auto;
margin-right: 55px;
float: right;
}
#main_img {
height: 100%;
display: none;
background-repeat: no-repeat;
position: relative;
width: 968px;
}
#main_text {
display: none;
background-image: url(../images/main_text.png);
background-repeat: no-repeat;
height: 350px;
width: 412px;
position: absolute;
bottom: 25px;
left: 397px;
}
#main_text h2 {
font-variant:small-caps;
margin-top:10px;
margin-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
}
#main_text p {
margin-right: 20px;
margin-left: 20px;
}
#left_text {
display: none;
background-image: url(../images/left_text.png);
background-repeat: no-repeat;
height: 184px;
width: 119px;
position: absolute;
top: 25px;
left: 25px;
}
#left_text h2 {
font-variant:small-caps;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#left_text p {
margin-right: 10px;
margin-left: 10px;
}
#footer {
height: 73px;
}
Ik heb de volgende site: http://users.skynet.be/fa307845/ gemaakt, maar nu zitten er nog enkele foutjes in. Ik zou graag willen dat de footer van mijn site, altijd tegen de onderkant van het venster plakt (bij verschillende resoluties) en dat mijn center-div (main_img) hierdoor uitrekt. Dit lukt mij echter niet. Ik heb al geprobeerd met height: 100%, maar dit werkt niet. Heeft er iemand een idee hoe dit moet en of dit überhaupt mogelijk is? En kan ik dan een grote achtergrondfoto nemen die telkens meer zichtbaar wordt naarmate de venstergrootte groter wordt?
Alvast bedankt!
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TES | Total Energy Solutions</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" >
</head>
<body onLoad="MM_preloadImages('images/statement_over.png','images/about_over.png','images/history_over.png','images/contact_over.png')">
<div id="container">
<div id="header"><img src="images/header.jpg" width="968" height="121" alt="Header"></div>
<div id="nav">
<div id="buttonwrapper">
<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/home_over.png',0)"><img src="images/home.png" alt="Home" name="Home" width="100" height="20" border="0"></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Statement','','images/statement_over.png',1)"><img src="images/statement.png" alt="Statement" name="Statement" width="100" height="20" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About','','images/about_over.png',1)"><img src="images/about.png" alt="About Us" name="About" width="100" height="20" border="0"></a>
<a href="history.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('history','','images/history_over.png',1)"><img src="images/history.png" alt="History" name="history" width="100" height="20" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/contact_over.png',1)"><img src="images/contact.png" alt="Contact" name="contact" width="100" height="20" border="0"></a>
</div>
</div>
<div id="main_img"><img src="images/main_img.jpg" width="968" height="auto" alt="achtergrond">
<div id="main_text">
<h2>mission statement</h2>
<p>Total Energy Solutions bestudeert, ontwerpt en verwezenlijkt technische installaties in gebouwen. Wij ontwerpen en formuleren duurzame oplossingen op maat van onze klanten, maar fungeren ook als multifunctionele partner bij een effectieve implementatie of installatie.</p>
<p>Om onze opdracht uit te voeren, moeten we de behoeften van onze klanten doorgronden en hen op een kritische en innovatieve manier bijstaan met professioneel advies. We zijn het aan hen en aan onszelf verschuldigd steeds op de hoogte te zijn van de allerlaatste trends en ontwikkelingen en ons constant bij te scholen.</p>
</div>
<div id="left_text">
<h2>news</h2>
<p>Website online!</p>
</div>
</div>
<div id="footer"><img src="images/footer.jpg" width="968" height="73" alt="Footer"></div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
CSS:
body {
height: 100%;
background: #e5e6e6;
font-family:Tahoma, Geneva, sans-serif;
font-size: 80%;
color: white;
text-shadow: 0.1em 0.1em 0.05em #333;
overflow:hidden
}
#container {
width: 968px;
height: 100%;
background: #e5e6e6;
margin-top: -8px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
height: 121px;
}
#nav {
background-image: url(../images/nav.jpg);
background-repeat: no-repeat;
position: relative;
height: 25px;
}
#buttonwrapper {
margin-top: auto;
margin-bottom: auto;
margin-right: 55px;
float: right;
}
#main_img {
height: 100%;
display: none;
background-repeat: no-repeat;
position: relative;
width: 968px;
}
#main_text {
display: none;
background-image: url(../images/main_text.png);
background-repeat: no-repeat;
height: 350px;
width: 412px;
position: absolute;
bottom: 25px;
left: 397px;
}
#main_text h2 {
font-variant:small-caps;
margin-top:10px;
margin-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
}
#main_text p {
margin-right: 20px;
margin-left: 20px;
}
#left_text {
display: none;
background-image: url(../images/left_text.png);
background-repeat: no-repeat;
height: 184px;
width: 119px;
position: absolute;
top: 25px;
left: 25px;
}
#left_text h2 {
font-variant:small-caps;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#left_text p {
margin-right: 10px;
margin-left: 10px;
}
#footer {
height: 73px;
}
