Krewe Posted February 19, 2012 Share Posted February 19, 2012 Hey Guys, I have two divs with the float left attribute inside a container div.Everything in that aspect works, however, my div (which is the div on the left) doesn't continue the background color when you scroll down. Here is the example: Http://www.codekrewe.com/about.php Code: @charset "utf-8";/* CSS Document */html, body{margin:0;padding:0;height:100%;}body{background-color:#444444;background-image:url(../images/stripes2.png);font-family:Arial, Helvetica, sans-serif;text-shadow:0px 1px 1px #000000;color:#CCCCCC;}#container{float:left;clear:both;width:100%;min-width:900px;height:100%;}/*************************************Navigation*************************************/#nav{width:200px;float:left;margin-right:10px;padding-left:10px;padding-right:10px;height:100%;background-color:#333333;background-image:url(../images/stripes2.png);}.button {margin-top:10px;border: 1px solid #666;border-radius: 3px;text-shadow: 0 1px 1px #333333;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;font: bold 11px Arial;padding: 6px 10px;white-space: nowrap;vertical-align: middle;color: #CCCCCC;background: -webkit-linear-gradient(top, #333, #444444);background: -moz-linear-gradient(top, #333, #444444);background: -ms-linear-gradient(top, #333, #444444);background: -o-linear-gradient(top, #333, #444444);cursor: pointer;}.button:hover, .button:focus { border-color: #333; background: -webkit-linear-gradient(top, #333, #444444); background: -moz-linear-gradient(top, #333, #444444); background: -ms-linear-gradient(top, #333, #444444); background: -o-linear-gradient(top, #333, #444444); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555; box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;}.button:active { border: 1px solid #333; border-bottom-color: #333; border-top-color: #444; -webkit-box-shadow: inset 0 2px 4px #000; -moz-box-shadow: inset 0 2px 4px #000; box-shadow: inset 0 2px 4px #000; background: -webkit-linear-gradient(top, #444444, #333); background: -moz-linear-gradient(top, #444444, #333); background: -ms-linear-gradient(top, #444444, #333); background: -o-linear-gradient(top, #444444, #333);}a img{border:0;}a:link,a:visited,a:hover,a:active{text-decoration:none;color:#FFCC00;}a:hover{text-decoration:underline;}a .button{color:#FFCC00;text-decoration:none;}h1,h2,h3,h4,h5{color:#C60;margin:0;padding:0;text-shadow:1px 1px 1px #000000;}h1{font-size:32px;}h1 a:link,h1 a:visited{color:#C60;text-decoration:none;}h1 a:hover,h1 a:active{color:#F90;text-decoration:none;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:16px;}h6{color:#0099CC;font-size:24px;margin:0;padding:0;}a:focus{outline:none;}img#floatLeft{float:left;width: 100px;height: 100px;margin-right:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}/**************************************Content**************************************/#content{width:700px;float:left;height:100%;}.construction{clear:both;margin-left:auto;margin-right:auto;}#wrapper{clear:both;width:700px;padding-top:10px;padding-bottom:10px;}/*************************************Footer*************************************/.footer{color:#CCCCCC;font-size:12px;text-align:left;} HTML: <html><body><!-- Start Container --><div id="container"> <div id="nav"> <a href="index.php"><div><img src="images/logo.png" alt="logo"/></div></a> <a href="index.php"><div class="button">Home</div></a> <a href="about.php"><div class="button">About Us</div></a> <a href="portfolio.php"><div class="button">Portfolio</div></a> <a href="services.php"><div class="button">Services</div></a> <a href="contact.php"><div class="button">Contact</div></a><br /> <img src="../images/line.png" width="200" height="2" alt="line" /> <p class="footer"> Code Krewe<br /> <a href="index.php">www.CodeKrewe.com</a><br /> <a href="mailto:zach@codekrewe.com">Zach@CodeKrewe.com</a><br /> <a href="mailto:contact@codekrewe.com">Contact@CodeKrewe.com</a><br /> </p> </div> <div id="content"><div id="wrapper"><div class="about"><h1>About Us:</h1><img src="images/line.png" height="2" width="500" /><br /><br /><h6>Who are we?</h6><p>Code Krewe is a portfolio site for Zach Case at the moment. Its main purpose is to showcase all the of websites and/or logos he creates for individual businesses over the years. However, in the future, he would like to make this site into a business so companies all over the nation could purchase his services, which include, Web Development, Web Design, Logo Design and Web Hosting. Also, we want to offer our clients all of the items they need to get their business growing online, this would include Web Hosting (which we currently offer) and Buying a Domain with us. Currently only Zach Case works at Code Krewe. He makes all his own websites and graphics. If you are in need of a web service we do not currently provide, please e-mail us at Contact@CodeKrewe.com</p><h6>Who is Zach Case?</h6><img id="floatLeft" src="images/zachcase.jpg" alt="Zach Case" /><p>Zach Case is a high school student at Castle View High School in Colorado. Born in 1995 he was first introduced to the website development world when he stumbled upon the website w3schools.com. He didn't do much with it until he was 13, when he was 13 he started to mess around with HTML and see what you could do with it. Not much was done until freshman year in high school when he took a class that was centered around web development with HTML. After that class he moved to learning CSS so he could work on a side project. Nothing else was done freshman or sophomore year in high school concerning Web Development except for the occasional learning more about HTML and CSS for just mess around projects. Then in May of 2011 Zach met the owner of <a href="Http://www.surfshackyogurt.com">Surf Shack Yogurt</a>, a Colorado based frozen yogurt store that was opening its first store. Zach offered to make their site, and to his amazement, they accepted. Surf Shack Yogurt was his first client, after that day Zach has been learning more and more about the web development world daily, and as of December 28th he now knows 4 coding languages. HTML, CSS, PHP, and MySQL. He is hoping to continue this career all the way through high school and further on into his life. </p></div><h6>What do we do?</h6><p>Here at Code Krewe we make websites, simple. We will make anything you need for your online business. Currently we can make your whole website, design it, add a blog, add a login system, add a CMS feature (check next section for info on CMS) and make a contact form so customers can easily contact you. Right now we can not make an actual online shopping cart/store. We are working on gaining the knowledge to do so.At Code Krewe, we write our own code, and uses only add-on programs you want, like WordPress.</p><h6>What is CMS?</h6><p>CMS stands for Content Management System. It is a type of coding/web development system that allows users to add content to their own site without having to know any HTML/coding languages. It is a great system that will allow any business owner to control what content their customers see on their website without having to know any of the code or do any of the dirty work. If you have ever used WordPress, that is a great example of a CMS. Their whole program allows someone to add content to a site and/or blog without knowing any coding languages!</p></div></div></div><!-- End Container --></body></html> Thanks Guys.Krewe Link to comment Share on other sites More sharing options...
dsonesuk Posted February 19, 2012 Share Posted February 19, 2012 Your background colour is only going to be as high as the browser window OR if the content extends beyond this height, the content within it. One way to get over this is to use a repeating image of the same colour down the left side of the div #container which is the same width as the nav container. Link to comment Share on other sites More sharing options...
Krewe Posted February 19, 2012 Author Share Posted February 19, 2012 That sucks... seems like there should be a way to work, but oh well... thanks. Link to comment Share on other sites More sharing options...
Krewe Posted February 19, 2012 Author Share Posted February 19, 2012 It still isn't working bud. @charset "utf-8";/* CSS Document */html, body{margin:0;padding:0;height:100%;}body{background-color:#444444;background-image:url(../images/stripes2.png);font-family:Arial, Helvetica, sans-serif;text-shadow:0px 1px 1px #000000;color:#CCCCCC;}#container{background-image:url(../images/stripes3.png);background-position:top left;background-repeat:repeat-y;float:left;clear:both;width:100%;min-width:900px;height:100%;}/*************************************Navigation*************************************/#nav{width:200px;float:left;margin-right:10px;padding-left:10px;padding-right:10px;height:100%;}.button {margin-top:10px;border: 1px solid #666;border-radius: 3px;text-shadow: 0 1px 1px #333333;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;font: bold 11px Arial;padding: 6px 10px;white-space: nowrap;vertical-align: middle;color: #CCCCCC;background: -webkit-linear-gradient(top, #333, #444444);background: -moz-linear-gradient(top, #333, #444444);background: -ms-linear-gradient(top, #333, #444444);background: -o-linear-gradient(top, #333, #444444);cursor: pointer;}.button:hover, .button:focus { border-color: #333; background: -webkit-linear-gradient(top, #333, #444444); background: -moz-linear-gradient(top, #333, #444444); background: -ms-linear-gradient(top, #333, #444444); background: -o-linear-gradient(top, #333, #444444); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555; box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;}.button:active { border: 1px solid #333; border-bottom-color: #333; border-top-color: #444; -webkit-box-shadow: inset 0 2px 4px #000; -moz-box-shadow: inset 0 2px 4px #000; box-shadow: inset 0 2px 4px #000; background: -webkit-linear-gradient(top, #444444, #333); background: -moz-linear-gradient(top, #444444, #333); background: -ms-linear-gradient(top, #444444, #333); background: -o-linear-gradient(top, #444444, #333);}a img{border:0;}a:link,a:visited,a:hover,a:active{text-decoration:none;color:#FFCC00;}a:hover{text-decoration:underline;}a .button{color:#FFCC00;text-decoration:none;}h1,h2,h3,h4,h5{color:#C60;margin:0;padding:0;text-shadow:1px 1px 1px #000000;}h1{font-size:32px;}h1 a:link,h1 a:visited{color:#C60;text-decoration:none;}h1 a:hover,h1 a:active{color:#F90;text-decoration:none;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:16px;}h6{color:#0099CC;font-size:24px;margin:0;padding:0;}a:focus{outline:none;}img#floatLeft{float:left;width: 100px;height: 100px;margin-right:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}/**************************************Content**************************************/#content{width:700px;float:left;height:100%;}.construction{clear:both;margin-left:auto;margin-right:auto;}#wrapper{clear:both;width:700px;padding-top:10px;padding-bottom:10px;}/*************************************Footer*************************************/.footer{color:#CCCCCC;font-size:12px;text-align:left;} No Html was changed.I also tried taking the floats off everything, still didn't work.I tried putting it on the body tag and it still stopped at the same spot -.-. I can get it too work when I apply no styling to the html, and make the body have the left bar background.However, that takes out the lighter grey with stripes background. So I try to make it so the html carries the light grey stripped background, and then have the body have the left bar background. But then the background stops again! While the html background still continues. Any ideas bud? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 19, 2012 Share Posted February 19, 2012 I knew you were going to back with this, the reason is because the container can't determine the area of floated child elements, so use overflow:hidden; to fix this, and you will have to remove height:100%; #container { background-image: url("../images/stripes3.png"); background-position: left top; background-repeat: repeat-y; clear: both; float: left; /* height: 100%; removed by dsonesuk*/ min-width: 900px; overflow: hidden; /* added by dsonesuk */ width: 100%;} Link to comment Share on other sites More sharing options...
Krewe Posted February 19, 2012 Author Share Posted February 19, 2012 Damn you're good...I was thinking I had to use overflow, but I do not know it's function well enough.Thank you Dsone. I understand why this page it looks the way it does, but how can I fix it?I am puzzled how to fix it, without putting back the 100%. Http://www.codekrewe.com/contact.php&Http://www.codekrewe.com/ Krewe Link to comment Share on other sites More sharing options...
Krewe Posted February 20, 2012 Author Share Posted February 20, 2012 I fixed it, but you can tell me how many rules I broke :PIf I broke no rules I'll be amazed. CSS: This is all the code I changed really. @charset "utf-8";/* CSS Document */html, body{margin:0;padding:0;height:100%;}body{background-color:#444444;background-image:url(../images/stripes2.png);font-family:Arial, Helvetica, sans-serif;text-shadow:0px 1px 1px #000000;color:#CCCCCC;}#container{width:100%;height:100%;}a img{border:0;}a:link,a:visited,a:hover,a:active{text-decoration:none;color:#FFCC00;}a:hover{text-decoration:underline;}a .button{color:#FFCC00;text-decoration:none;}h1,h2,h3,h4,h5{color:#C60;margin:0;padding:0;text-shadow:1px 1px 1px #000000;}h1{font-size:32px;}h1 a:link,h1 a:visited{color:#C60;text-decoration:none;}h1 a:hover,h1 a:active{color:#F90;text-decoration:none;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:16px;}h6{color:#0099CC;font-size:24px;margin:0;padding:0;}a:focus{outline:none;}img#floatLeft{float:left;width: 100px;height: 100px;margin-right:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */margin-top:20px;}/*************************************Navigation*************************************/#nav{background-image:url(../images/stripes2.png);background-color:#333333;position:fixed;top:0;left:0;width:200px;padding-left:10px;padding-right:10px;height:100%;}.button {margin-top:10px;border: 1px solid #666;border-radius: 3px;text-shadow: 0 1px 1px #333333;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;font: bold 11px Arial;padding: 6px 10px;white-space: nowrap;vertical-align: middle;color: #CCCCCC;background: -webkit-linear-gradient(top, #333, #444444);background: -moz-linear-gradient(top, #333, #444444);background: -ms-linear-gradient(top, #333, #444444);background: -o-linear-gradient(top, #333, #444444);cursor: pointer;}.button:hover, .button:focus { border-color: #333; background: -webkit-linear-gradient(top, #333, #444444); background: -moz-linear-gradient(top, #333, #444444); background: -ms-linear-gradient(top, #333, #444444); background: -o-linear-gradient(top, #333, #444444); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555; box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;}.button:active { border: 1px solid #333; border-bottom-color: #333; border-top-color: #444; -webkit-box-shadow: inset 0 2px 4px #000; -moz-box-shadow: inset 0 2px 4px #000; box-shadow: inset 0 2px 4px #000; background: -webkit-linear-gradient(top, #444444, #333); background: -moz-linear-gradient(top, #444444, #333); background: -ms-linear-gradient(top, #444444, #333); background: -o-linear-gradient(top, #444444, #333);}/**************************************Content**************************************/#content{min-width:700px;height:100%;margin-left:230px;}.construction{clear:both;margin-left:auto;margin-right:auto;}#wrapper{clear:both;width:700px;padding-top:10px;padding-bottom:10px;}.box{border: 1px solid #666;border-radius: 3px;text-shadow: 0 1px 1px #333333;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #555;padding: 6px 10px;vertical-align: middle;color: #CCCCCC;background: -webkit-linear-gradient(top, #333, #444444);background: -moz-linear-gradient(top, #333, #444444);background: -ms-linear-gradient(top, #333, #444444);background: -o-linear-gradient(top, #333, #444444);margin-top:10px;margin-bottom:10px;}/*************************************Footer*************************************/.footer{color:#CCCCCC;font-size:12px;text-align:left;}/*************************************Portfolio*************************************/div.cover{float:left;width:200px;height:200px;overflow:hidden;position:relative;z-index:10;margin:10px;-webkit-box-shadow: 0 10px 6px -6px black;-moz-box-shadow: 0 10px 6px -6px black;box-shadow: 0 10px 6px -6px black;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}.inside {position:absolute;top:0;left:0;background-color:#333333;background-image:url(../images/stripes2.png);background-repeat:repeat;color:#FF9900;border:0px groove #000000;-moz-box-shadow: 3px 3px 10px 5px #111;-webkit-box-shadow: 3px 3px 10px 5px #111;box-shadow: 3px 3px 10px 5px #111;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}div.inside img {float:left;height:200px;}.inside p{padding:0;margin:0;}.inside h1{padding:0;margin:0;}div.cover:hover{overflow:visible;z-index: 10000;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}div.cover:hover #container{overflow:inherit;}div.inside:hover{width:400px;height:auto;padding:10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; /* future proofing */-khtml-border-radius: 10px; /* for old Konqueror browsers */}div.inside:hover img {height:auto;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.