Hermanoo
%Europe/Berlin %793 %2009, 19:03
Hoi,
Ik gebruik CSS om de layout van mijn website te beheren. Echter zit ik al een hele tijd een goede oplossing te zoeken voor volgend probleem:
Ik heb twee div's nl. "main" en "footer" in een container "content" geplaatst (onder elkaar). De bedoeling is dat de div "footer" vlak onder de div "main" staat en dat de container "content" automatisch de hoogte aan neemt afhankelijk van de inhoud van beide div's. Echter lukt het mij niet om de div "footer" vlak onder de div "main" te positioneren, zowel in FF als in IE. Hierdoor staat mijn footer niet mooi onder het einde van mijn tekst. Als ik in Firebug kijk, lijkt het alsof er een offset is tussen beide DIV's. Hoe komt dit? Voorbeeld kan u zien op volgende link:
http://www.dezorgwinkelplus.be/podologe.html
Onderstaand mijn 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>De Zorgwinkel+ | Welkom </title>
<link href="layout.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="positie_navigation">
<ul id="navigation">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="de_verpleegster.html"><span>De VerpleegSter</span></a></li>
<li><a href="praktijkkamer.html"><span>Praktijkkamer</span></a></li>
<li><a href="psychologe.html"><span>Psychologe \ Therapeute</span></a></li>
<li><a href="podologe.html"><span>Podologe \ Pedicure</span></a></li>
<li><a href="nieuws.html"><span>Nieuws</span></a></li>
<li><a href="jobs.html"><span>Vacatures</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
<div id="streep_onder_menu"></div>
<div id="banner_top">
<img src="images/frontpage/DSC_4800_rond.jpg" width="97px"/><img src="images/frontpage/DSC_1222.jpg" width="97px"/><img src="images/frontpage/DSC_6046.JPG" width="97px"/><img src="images/frontpage/DSC_1234.jpg" width="97px"/><img src="images/frontpage/terris 324.jpg" width="97px"/><img src="images/frontpage/IM000163.jpg" width="97px"/><img src="images/frontpage/DSC_6099.JPG" width="97px"/><img src="images/frontpage/DSC_6051.JPG" width="97px"/><img src="images/frontpage/DSC_6052.JPG" width="97px"/><img src="images/frontpage/DSC_4816_rond.jpg" width="97px"/>
</div>
<div id="banner_left">
<img src="images/frontpage/DSC_1222.jpg" width="97px"/><img src="images/frontpage/DSC_6046.JPG" width="97px"/><img src="images/frontpage/DSC_1234.jpg" width="97px"/><img src="images/frontpage/terris 324_rond.jpg" width="97px"/>
</div>
<div id="content">
<div id="main">
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<h1>Podologe \ Pedicure</h1>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
<div id="back_to_index"><a href="index.html" class="back">home</a></div>
<div id="tekstveld" style="text-align:center">
<a href="wat_doet_een_podologe.html" class="to_subpage">Wat doet een podologe?</a><br /><br />
<a href="wat_doet_een_pedicure.html" class="to_subpage">Wat doet een pedicure?</a><br /><br />
<a href="hoe_hou_je_je_voeten_gezond.html" class="to_subpage">Hoe hou je je voeten gezond?</a><br /><br />
<img class="foto_midden" src="images/pedicure.jpg" width="320px" >
</div>
</div>
<div id="footer">
<div id="tribal_links_onder">
<img src="images/frontpage/tribal_flower_links.JPG" width="300" />
</div>
<div id="footer_tekst">
<p class="footer_1"><strong>www.dezorgwinkelplus.be</strong></p>
<p class="footer_2"> Copyright © 2009 - Hosted by <a class="menu_link" href="mailto:cappasteven@gmail.com">WebCapp</a></p>
</div>
<div id="tribal_rechts_onder">
<img src="images/frontpage/tribal_flower_rechts.JPG" width="300" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11289749-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{margin: 0;padding: 0;}
body {font-family: "Trebuchet MS", Verdana, Geneva; font-size: 14px; color: black; background-color: #ecdbd9 ; height: 100%;}
html{height: 100%;}
#container{width: 1000px; margin: 0 auto; height:auto;}
#positie_navigation{margin-left: 127px; margin-top:30px;}
#navigation a{padding-left: 10px; color:#612642 ; background:#E3B6B6 url(images/frontpage/afronding_navigation.gif) left top no-repeat; text-decoration: none}
#navigation a span{padding-right: 10px; background: url(images/frontpage/afronding_navigation_rechts.gif) right top no-repeat;}
#navigation ul{list-style-type: none; padding: 0; margin: 0;}
#navigation li{list-style-type: none; float: left; margin: 0;}
#streep_onder_menu{clear: left; width: 847px; height: 3px; margin-left: 127px; background-color: #612642; overflow:hidden;}
#banner_top{ margin-top:30px; margin-left: 30px; float: left; width: 970px;}
#images_banner_top{float: left;}
* + html #banner_left{float:left; position:relative; top:-3px; margin-top:-1px; margin-left: 30px; width: 97px;}
* html #banner_left{ float:left; position:relative; top:-3px; margin-top:-1px; margin-left: 30px; width: 97px;}
#banner_left{ float:left; margin-left: 30px; width: 97px; z-index: 300}
#content{height:100%; widht: 600px; position:relative; overflow: hidden; border: 1px #ecdbd9 solid;}
#main{height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:10px; /* real browsers */ }
div.picture_frontpage_2{float:left; margin-left:181px; margin-top: 40px; width:180px; cursor: pointer}
div.picture_frontpage_4{float:left; margin-left:150px; margin-top: 40px; width:180px; cursor: pointer}
p.frontpage{text-align: center; font-family: "Trebuchet MS", Verdana, Geneva; font-size: 16px; color: #612642; white-space: normal;margin-bottom: 8px;}
p.frontpage2{text-align: center; font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; white-space: normal;margin-bottom: 8px;}
a:link.website, a:visited.website, a:hover.website, a:active.website{color: #E3B6B6;text-decoration: none;}
#footer{margin-top:370px; height:150px; margin-left:0px;}
#footer_tekst{position: absolute; margin-left:320px; width: 233px; margin-top: 105px;}
div.clearboth{ clear:both;}
p.footer_1{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 11px; color: #612642; padding: 0; margin: 0; text-align: center;}
p.footer_2{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 10px; color: #934152; padding: 0; margin: 0; text-align: center;}
p.contact_1{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; padding: 0; margin-top: 30px; margin-right: 30px; text-align: right;}
p.contact_1_onder{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; padding: 0; margin-bottom: 30px; margin-right: 30px; text-align: right;}
p.contact_2{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; padding: 0; margin-top: 30px; margin-left: 30px; text-align: left;}
p.contact_2_onder{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; padding: 0; margin-bottom: 30px; margin-left: 30px; text-align: left;}
#panel {width: 481px; position: absolute; left: -488px; top: 20px; z-index: 200; background-color: #E3B6B6;}
#panel_right {width: 610px; position: absolute; left: 1000px; top: 20px; z-index: 200; background-color: #E3B6B6;}
#back_to_contact{position: absolute; margin-top: 50px; margin-left: 750px;}
#back_to_index{margin-top: 5px; margin-left: 820px;}
a:link.menu_link, a:visited.menu_link{ color: #934152; text-decoration: none;}
a:hover.menu_link, a:active.menu_link{ color: #612642; text-decoration: none; }
a:link.back, a:visited.back{ color: #934152; text-decoration: underline; font-size:11px;}
a:hover.back, a:active.back{ color: #612642; text-decoration: none; font-size:11px;}
#tribal_links_onder{position: absolute; margin-left: 20px; margin-top: 0px;}
#tribal_rechts_onder{position: absolute; margin-left: 553px; margin-top: 0px;}
#movie{margin-top: 40px; margin-left: 276px; width: auto; height:auto;}
#tekstveld{margin-top: 12px; margin-left: 36px; width: 801px; height:auto;}
#opsomming{margin-top: 12px; width: 787px; height:auto; font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642;}
li{margin-left: 50px;}
#tab1{ margin-left: 65px; width: 772px; height:auto;}
#titel_tekstveld{margin-bottom: 20px; margin-top:20px}
h1 {font-family: "Trebuchet MS", Verdana, Geneva; font-size: 16px; font-weight: bold; color: #612642; text-align:center;}
h2 {font-family: "Trebuchet MS", Verdana, Geneva; font-size: 14px; font-weight: bold; color: #612642; text-decoration:underline;}
p.tekst {font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642;}
img.foto_midden {vertical-align: middle; margin-top: 20px;}
img[align="left"] {
margin: 0 20px 20px 20px;
display: inline;
}
a:link.to_subpage, a:visited.to_subpage{ color: #612642; text-decoration: underline; }
a:hover.to_subpage, a:active.to_subpage{ color: #612642; text-decoration: none; }
a:link.tekst, a:visited.tekst{ color: #612642; text-decoration: underline;}
a:hover.tekst, a:active.tekst{ color: #612642; text-decoration: none; }
Ik gebruik CSS om de layout van mijn website te beheren. Echter zit ik al een hele tijd een goede oplossing te zoeken voor volgend probleem:
Ik heb twee div's nl. "main" en "footer" in een container "content" geplaatst (onder elkaar). De bedoeling is dat de div "footer" vlak onder de div "main" staat en dat de container "content" automatisch de hoogte aan neemt afhankelijk van de inhoud van beide div's. Echter lukt het mij niet om de div "footer" vlak onder de div "main" te positioneren, zowel in FF als in IE. Hierdoor staat mijn footer niet mooi onder het einde van mijn tekst. Als ik in Firebug kijk, lijkt het alsof er een offset is tussen beide DIV's. Hoe komt dit? Voorbeeld kan u zien op volgende link:
http://www.dezorgwinkelplus.be/podologe.html
Onderstaand mijn 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>De Zorgwinkel+ | Welkom </title>
<link href="layout.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="positie_navigation">
<ul id="navigation">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="de_verpleegster.html"><span>De VerpleegSter</span></a></li>
<li><a href="praktijkkamer.html"><span>Praktijkkamer</span></a></li>
<li><a href="psychologe.html"><span>Psychologe \ Therapeute</span></a></li>
<li><a href="podologe.html"><span>Podologe \ Pedicure</span></a></li>
<li><a href="nieuws.html"><span>Nieuws</span></a></li>
<li><a href="jobs.html"><span>Vacatures</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
<div id="streep_onder_menu"></div>
<div id="banner_top">
<img src="images/frontpage/DSC_4800_rond.jpg" width="97px"/><img src="images/frontpage/DSC_1222.jpg" width="97px"/><img src="images/frontpage/DSC_6046.JPG" width="97px"/><img src="images/frontpage/DSC_1234.jpg" width="97px"/><img src="images/frontpage/terris 324.jpg" width="97px"/><img src="images/frontpage/IM000163.jpg" width="97px"/><img src="images/frontpage/DSC_6099.JPG" width="97px"/><img src="images/frontpage/DSC_6051.JPG" width="97px"/><img src="images/frontpage/DSC_6052.JPG" width="97px"/><img src="images/frontpage/DSC_4816_rond.jpg" width="97px"/>
</div>
<div id="banner_left">
<img src="images/frontpage/DSC_1222.jpg" width="97px"/><img src="images/frontpage/DSC_6046.JPG" width="97px"/><img src="images/frontpage/DSC_1234.jpg" width="97px"/><img src="images/frontpage/terris 324_rond.jpg" width="97px"/>
</div>
<div id="content">
<div id="main">
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<h1>Podologe \ Pedicure</h1>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
<div id="back_to_index"><a href="index.html" class="back">home</a></div>
<div id="tekstveld" style="text-align:center">
<a href="wat_doet_een_podologe.html" class="to_subpage">Wat doet een podologe?</a><br /><br />
<a href="wat_doet_een_pedicure.html" class="to_subpage">Wat doet een pedicure?</a><br /><br />
<a href="hoe_hou_je_je_voeten_gezond.html" class="to_subpage">Hoe hou je je voeten gezond?</a><br /><br />
<img class="foto_midden" src="images/pedicure.jpg" width="320px" >
</div>
</div>
<div id="footer">
<div id="tribal_links_onder">
<img src="images/frontpage/tribal_flower_links.JPG" width="300" />
</div>
<div id="footer_tekst">
<p class="footer_1"><strong>www.dezorgwinkelplus.be</strong></p>
<p class="footer_2"> Copyright © 2009 - Hosted by <a class="menu_link" href="mailto:cappasteven@gmail.com">WebCapp</a></p>
</div>
<div id="tribal_rechts_onder">
<img src="images/frontpage/tribal_flower_rechts.JPG" width="300" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11289749-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{margin: 0;padding: 0;}
body {font-family: "Trebuchet MS", Verdana, Geneva; font-size: 14px; color: black; background-color: #ecdbd9 ; height: 100%;}
html{height: 100%;}
#container{width: 1000px; margin: 0 auto; height:auto;}
#positie_navigation{margin-left: 127px; margin-top:30px;}
#navigation a{padding-left: 10px; color:#612642 ; background:#E3B6B6 url(images/frontpage/afronding_navigation.gif) left top no-repeat; text-decoration: none}
#navigation a span{padding-right: 10px; background: url(images/frontpage/afronding_navigation_rechts.gif) right top no-repeat;}
#navigation ul{list-style-type: none; padding: 0; margin: 0;}
#navigation li{list-style-type: none; float: left; margin: 0;}
#streep_onder_menu{clear: left; width: 847px; height: 3px; margin-left: 127px; background-color: #612642; overflow:hidden;}
#banner_top{ margin-top:30px; margin-left: 30px; float: left; width: 970px;}
#images_banner_top{float: left;}
* + html #banner_left{float:left; position:relative; top:-3px; margin-top:-1px; margin-left: 30px; width: 97px;}
* html #banner_left{ float:left; position:relative; top:-3px; margin-top:-1px; margin-left: 30px; width: 97px;}
#banner_left{ float:left; margin-left: 30px; width: 97px; z-index: 300}
#content{height:100%; widht: 600px; position:relative; overflow: hidden; border: 1px #ecdbd9 solid;}
#main{height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:10px; /* real browsers */ }
div.picture_frontpage_2{float:left; margin-left:181px; margin-top: 40px; width:180px; cursor: pointer}
div.picture_frontpage_4{float:left; margin-left:150px; margin-top: 40px; width:180px; cursor: pointer}
p.frontpage{text-align: center; font-family: "Trebuchet MS", Verdana, Geneva; font-size: 16px; color: #612642; white-space: normal;margin-bottom: 8px;}
p.frontpage2{text-align: center; font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; white-space: normal;margin-bottom: 8px;}
a:link.website, a:visited.website, a:hover.website, a:active.website{color: #E3B6B6;text-decoration: none;}
#footer{margin-top:370px; height:150px; margin-left:0px;}
#footer_tekst{position: absolute; margin-left:320px; width: 233px; margin-top: 105px;}
div.clearboth{ clear:both;}
p.footer_1{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 11px; color: #612642; padding: 0; margin: 0; text-align: center;}
p.footer_2{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 10px; color: #934152; padding: 0; margin: 0; text-align: center;}
p.contact_1{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; padding: 0; margin-top: 30px; margin-right: 30px; text-align: right;}
p.contact_1_onder{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; padding: 0; margin-bottom: 30px; margin-right: 30px; text-align: right;}
p.contact_2{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; padding: 0; margin-top: 30px; margin-left: 30px; text-align: left;}
p.contact_2_onder{font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642; padding: 0; margin-bottom: 30px; margin-left: 30px; text-align: left;}
#panel {width: 481px; position: absolute; left: -488px; top: 20px; z-index: 200; background-color: #E3B6B6;}
#panel_right {width: 610px; position: absolute; left: 1000px; top: 20px; z-index: 200; background-color: #E3B6B6;}
#back_to_contact{position: absolute; margin-top: 50px; margin-left: 750px;}
#back_to_index{margin-top: 5px; margin-left: 820px;}
a:link.menu_link, a:visited.menu_link{ color: #934152; text-decoration: none;}
a:hover.menu_link, a:active.menu_link{ color: #612642; text-decoration: none; }
a:link.back, a:visited.back{ color: #934152; text-decoration: underline; font-size:11px;}
a:hover.back, a:active.back{ color: #612642; text-decoration: none; font-size:11px;}
#tribal_links_onder{position: absolute; margin-left: 20px; margin-top: 0px;}
#tribal_rechts_onder{position: absolute; margin-left: 553px; margin-top: 0px;}
#movie{margin-top: 40px; margin-left: 276px; width: auto; height:auto;}
#tekstveld{margin-top: 12px; margin-left: 36px; width: 801px; height:auto;}
#opsomming{margin-top: 12px; width: 787px; height:auto; font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642;}
li{margin-left: 50px;}
#tab1{ margin-left: 65px; width: 772px; height:auto;}
#titel_tekstveld{margin-bottom: 20px; margin-top:20px}
h1 {font-family: "Trebuchet MS", Verdana, Geneva; font-size: 16px; font-weight: bold; color: #612642; text-align:center;}
h2 {font-family: "Trebuchet MS", Verdana, Geneva; font-size: 14px; font-weight: bold; color: #612642; text-decoration:underline;}
p.tekst {font-family: "Trebuchet MS", Verdana, Geneva; font-size: 12px; color: #612642;}
img.foto_midden {vertical-align: middle; margin-top: 20px;}
img[align="left"] {
margin: 0 20px 20px 20px;
display: inline;
}
a:link.to_subpage, a:visited.to_subpage{ color: #612642; text-decoration: underline; }
a:hover.to_subpage, a:active.to_subpage{ color: #612642; text-decoration: none; }
a:link.tekst, a:visited.tekst{ color: #612642; text-decoration: underline;}
a:hover.tekst, a:active.tekst{ color: #612642; text-decoration: none; }