Fri, 2010-08-27 21:28
Hello,
I have already searched the web and also this forum, but I didn't find the solution.
The problem is that my auto height function of the background from my content isn't working at all.
My site is located here: Rokain.com
As you can see at the bottem of the page where it says "Content Text", the background of my content stops.
I hope someone can review my CSS and post any corrections and/or comments.
Thanks in advance,
Rokain
Fri, 2010-08-27 21:42
#1
i cant see your site, my
i cant see your site, my network has blocked it. But it sounds like you may need to research Containing Floats
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2010-08-27 21:53
#2
Thanks for your reply
Thanks for your reply CupidStoejam, I will look into it.
But I wonder why my website is blocked for you?
Tue, 2010-08-31 10:50
#3
Is it possible that someone
Is it possible that someone can check my CSS?, I still didn't solved the problem and I'm not an expert with CSS
CSS
* { padding:0; margin:0; outline:none; } html,body { font-family:Verdana, Geneva, sans-serif; color:#FFF; line-height:18px; outline:none; letter-spacing:0.0em; background:#333; } #container{ width:100%; height:auto; height:100%; /* voor IE */ min-height: 800px; } #topbar {width:100%; height:20px; background:url(img/topbar.png);} #header {width:874px; height:253px; background:url(img/header.png); margin-left:auto; margin-right:auto;} .menu {width:874px; height:67px; background:url(img/menubg.png); margin-left:auto; margin-right:auto;} .menu a {color:#FFF; float:left; width:auto; margin-top:25px; margin-left:auto; padding-left:54px; text-decoration:none; font-size:18px;} .menu a:hover {color:#CCC; float:left; width:auto; margin-top:25px; margin-left:auto; padding-left:54px; text-decoration:none; font-size:18px;} #maincontent {width:872px; height:auto; min-height:800px; background:url(img/contentbg.png); margin-left:auto; margin-right:auto;} .contentlefth1 {float:left; width:562px; height:50px; background:#232323; margin-top:35px; } .contentlefttitle {font-weight:bold; margin-left:15px; margin-top:18px;} .contentlefttext {font-size:12px; margin-left:15px; margin-top:35px;} .contentrighth1 {float:right; width:306px; height:66px; background:#303030; margin-top:-20px; clear:both;} .contentrighttitleh1 {font-weight:bold; margin-left:15px; margin-top:25px;} .contentrightexth1 {font-size:12px; margin-left:15px; margin-top:40px;} .contentrighth2 {float:left; width:306px; height:66px; background:#303030; margin-top:280px; margin-left:567px;} .contentrighttitleh2 {font-weight:bold; margin-left:15px; margin-top:25px;} .contentrightexth2 {font-weight:bold; margin-left:15px; margin-top:35px;} #footer {width:100%; height:138px; background:url(img/footer.png); margin-top:50px;} .footerlinks {float:right; width:210px; margin-top:69px; margin-right:30px;} .footerlinks a {color:#FFF; text-decoration:none; font-size:14px;} .footerlinks a:hover {color:#CCC; text-decoration:none;} .footercopyright {float:left; width:235px; color:#1a1a1a; font-size:12px; margin-top:80px; margin-left:20px;}
HTML
<!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>Untitled Document</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="topbar"></div> <div id="header"></div> <div class="menu"> <a href="index.html">Home</a> <a href="info.html">Informatie</a> <a href="fotos.html">Foto's</a> <a href="contact.html">Contact</a> </div> <div id="maincontent"> <div class="contentlefth1"> <div class="contentlefttitle">Contact</div> <div class="contentlefttext">Telefonische: </div> </div> <div class="contentrighth1"> <div class="contentrighttitleh1">Recensies</div> <div class="contentrightexth1">Test</div> </div> <div class="contentrighth2"> <div class="contentrighttitleh2">Foto's</div> <div class="contentrightexth2"> <img src="img/foto.png" width="275" height="140" /><br /><br /> <img src="img/foto.png" width="275" height="140" /> </div> </div> </div> <div id="footer"> <div class="footerlinks"> <a href="index.html">home</a> | <a href="info.html">fotos</a> | <a href="fotos.html">faq</a> | <a href="contact.html">contact</a> </div> <div class="footercopyright"> © 2010 - rokain.com<br /> </div> </div> </div> </body> </html>
Tue, 2010-08-31 09:20
#4
Anyone?
Anyone? 
Tue, 2010-08-31 10:17
#5
Did you do as was suggested
Did you do as was suggested and look up 'Containing floats'?
Try adding overflow:hidden to that element with the background.
Tue, 2010-08-31 18:13
#6
Yes, I have read the page
Yes, I have read the page about containing floats, but I can't get it work as I want it to work.
This is the outcoming of useing "overflow:hidden".
As you can see, the "content text" is not fully displayed.
Wed, 2010-09-01 10:38
#7
Fixed
My question has already been answered on another forum.
Thanks.
Wed, 2010-09-01 13:42
#8
title removed
pointless and rude comments removed. User account suspended.
-Hugo
Wed, 2010-09-01 14:10
#9
*beep* you?
Funny guy giving useless comment about an unfinished website. LOL