Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts

    Thumbs down div Background not repeating properly

    Hey guys so i have one minor problem.
    If you go to http://armstrongwebandgraphic.com/Aa...portfolio.html

    you can see that the content is not staying inside of the background it is suppose to.

    Any idea why the background in that div would not be repeating ?

    Here is the html
    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>Untitled Document</title> 
     
    <link href="style.css" rel="stylesheet" type="text/css" /> 
     
    </head> 
     
    <body> 
    	<div id="header"> 
        	<div id="upper-header" class="container"> 
            	<div id="phone"> 
                	<div id="phone-pic"></div> 
               	    <h2>Call us now</h2> 
                	<h1> &nbsp;613.620.3067</h1> 
                </div> 
            </div> 
          <div id="lower-header" class="container"> 
       	  <div id="logo"></div> 
                <div id="nav"> 
                	<ul> 
                   	  <li><div class="home"><a href="#"><img src="home.png"  alt=""/></a></div></li> 
                      <li class="active"><div class="home"><a href="#"><img src="about-us.png" alt=""/></a></div></li> 
                        <li><div class="home"><a href="#"><img src="portfolio.png" alt="" /></a></div></li> 
                        <li><div class="home"><a href="#"><img src="quotes.png"  alt=""/></a></div></li> 
                        <li><div class="home"><a href="#"><img src="contact-us.png"  alt=""/></a></div></li> 
                    </ul> 
              </div> 
          </div> 
        </div> 
        
    <div id="interior-nav" class="container"> 
        	<div class="nav-button"><a href="portfolio.html">Websites</a></div> 
    		<div class="nav-button"><a href="logos.html">Logos</a></div>        
            <div class="nav-button"><a href="t-shirts.html">T-shirts</a></div> 
            <div class="nav-button"><a href="other.html">Other Graphics</a></div> 
    </div> 
        <div id="interior-top" class="container"> 
       	  <h1>Websites</h1> 
          <h2>Need an information website for your business? Or maybe you need a full ecommerce website.<br /> 
            What ever it is, you've come to the right place.<br /> 
            <br /> 
            Armstrong Designs can make you amazing websites at very affordable prices.<br /> 
            View some of our past website jobs below. 
          </h2> 
        </div> 
        <div id="interior-middle" class="container"> 
        	<div  class="item"> 
            	<div class="item-picture"><img src="temple.png" width="266" height="112" /></div> 
                <div class="item-title">Temple Skate Supply</div> 
                <div class="item-desc">This is a website created for an Ottawa based skateboard company called Temple Skate Supply. Created using xhtml and css and jquery. <br /><br /><br /><br /> 
                    <a href="http://www.templeskatesupply.com" target="_blank"><img src="arrow.png" alt="" width="28" height="25"/>Go to Project</a></div> 
            </div> 
            
            <div  class="item"> 
            	<div class="item-picture"><img src="temple.png" width="266" height="112" /></div> 
                <div class="item-title">Temple Skate Supply</div> 
                <div class="item-desc">This is a website created for an Ottawa based skateboard company called Temple Skate Supply. Created using xhtml and css and jquery. <br /><br /><br /><br /> 
                    <a href="http://www.templeskatesupply.com" target="_blank"><img src="arrow.png" alt="" width="28" height="25"/>Go to Project</a></div> 
            </div> 
            
            <div  class="item"> 
            	<div class="item-picture"><img src="temple.png" width="266" height="112" /></div> 
                <div class="item-title">Temple Skate Supply</div> 
                <div class="item-desc">This is a website created for an Ottawa based skateboard company called Temple Skate Supply. Created using xhtml and css and jquery. <br /><br /><br /><br /> 
                    <a href="http://www.templeskatesupply.com" target="_blank"><img src="arrow.png" alt="" width="28" height="25"/>Go to Project</a></div> 
            </div> 
            
            <div  class="item"> 
            	<div class="item-picture"><img src="temple.png" width="266" height="112" /></div> 
                <div class="item-title">Temple Skate Supply</div> 
                <div class="item-desc">This is a website created for an Ottawa based skateboard company called Temple Skate Supply. Created using xhtml and css and jquery. <br /><br /><br /><br /> 
                    <a href="http://www.templeskatesupply.com" target="_blank"><img src="arrow.png" alt="" width="28" height="25"/>Go to Project</a></div> 
            </div> 
            
            <div  class="item"> 
            	<div class="item-picture"><img src="temple.png" width="266" height="112" /></div> 
                <div class="item-title">Temple Skate Supply</div> 
                <div class="item-desc">This is a website created for an Ottawa based skateboard company called Temple Skate Supply. Created using xhtml and css and jquery. <br /><br /><br /><br /> 
                    <a href="http://www.templeskatesupply.com" target="_blank"><img src="arrow.png" alt="" width="28" height="25"/>Go to Project</a></div> 
            </div> 
        	
        	
        </div> 
        <div id="interior-bottom" class="container"></div> 
       
    <div id="footer" > 
       	  <div id="footer-interior" class="container"> 
       	  <div id="footer-logo"></div>	
                  <div id="footer-menu"><a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Portfolio</a> | <a href="#">Quotes</a> | <a href="#">Contact Us</a></div> 
                  <div id="valitator"><img src="Screen.png" width="109" height="29" alt=""/></div> 
     
            <div id="copyright">Copyright @ Ottawa basec company Armstrong Designs 2008-2011</div> 
          </div> 
        </div> 
    </body> 
    </html>
    and the css

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    
    /* -------------------------------------------------------------------------------------- SMALL RESET */
    *{ outline:none; }
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    	
    ul{ list-style:none; }
    
    a, a:hover{
    	outline:none;
    	text-decoration:none;
    	color:inherit;
    	}
    
    img{ border:none; }
    
    
    body { background:url(bg.jpg) top center no-repeat; background-color:#000; background-attachment:fixed;  }
    
    #header { background:url(header.jpg) repeat-x; height:115px; width:100%; margin:0 auto; margin-bottom:10px; }
    
    #upper-header { height:43px; }
    
    #phone { float:right; margin-top:10px; width:270px; }
    
    h1 { color:#09F; font-family:"Arial Black", Gadget, sans-serif; font-size:18px;  }
    
    h2 { color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:16px; float:left; margin-top:5px; text-align:right;}
    
    #phone-pic { float:left; background:url(phone.png) no-repeat; width:26px; height:24px; margin-right:5px; text-align:right;}
    
    #lower-header { height:72px; }
    
    #logo { float:left; background:url(logo.png) no-repeat center; width:356px; height:72px;  }
    
    #nav { width:644px; height:72px; float:left;  }
    
    #nav ul {  float:right; margin-left:30px; }
     
    #nav ul li { float:left; line-height:72px;  padding-right:10px; padding-left:10px;   background:url(spacer.png) no-repeat right; height:72px;  }
    
    #nav ul li:hover { background:url(menu-rollover-bg.jpg) repeat-x;  }
    
    #nav ul li.active { background:url(menu-rollover-bg.jpg) repeat-x;  }
    
    #nav ul li.active2{ background:url(rollover-glow.png) no-repeat top center; height:52px;}
    
    .home { background:none; height:52px; padding-top:20px;}
    
    .home:hover { background:url(rollover-glow.png) no-repeat top center; height:52px;  }
    
    #slider { height:431px; width:100%; margin-bottom:20px; }
    
    #slider-inside { background:url(slide-bg.png) no-repeat; height:431px;  margin-top:30px; }
    
    #slider-inside-slide { margin-top:15px; margin-left:15px; float:left; }
    
    #latest-work { height:428px; width:100%; margin-bottom:20px; }
    
    #latest-work-inner { height:428px; background:url(latest-projects.png) no-repeat;  }
    
    #latest-title { background:url(latest-projects-title.png) no-repeat; height:14px; width:200px; margin-top:30px; margin-left:20px; float:left; }
    
    .project { margin-left:20px; float:left; margin-top:30px;}
    
    .project-inner {  background:url(project-bg.png) no-repeat; width:299px; height:294px; float:left;   margin-right:25px;   }
    
    .project-picture { float:left; margin-left:15px; margin-top:15px; }
    
    .project h1 { float:left; padding-left:15px; padding-top:10px; font-family:Arial, Helvetica, sans-serif; color:#CCC; font-size:12px; }
    
    .project h2 { float:left; padding-left:15px; padding-top:5px; padding-right:10px; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:11px; text-align:left; }
    
    #services { height:266px; width:100%; margin-bottom:20px; }
    
    #services-inner { height:266px; background:url(services-bg.png) no-repeat; }
    
    #services-title { margin-top:20px; margin-left:20px; float:left; background:url(our-services.png) no-repeat; width:999px; height:15px; }
    
    .services {  float:left; margin-top:20px; width:999px;}
    
    .services-inner { background:url(service-bg2.png) no-repeat; width:196px; height:195px; float:left;   margin-right:30px; margin-left:20px;    }
    
    .services-picture { float:left; margin-left:15px; margin-top:15px; }
    
    .services h2 { float:left; padding-left:15px; padding-top:5px; padding-right:10px; font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:11px; text-align:left; }
    
    #footer { clear:both; background:url(footer.jpg) repeat-x; height:69px;    }
    
    #footer-interior { height:69px; }
    
    #footer-logo { background:url(logo-footer.png) no-repeat; width:376px; height:28px; margin-top:10px; float:left; }
    
    #copyright { float:left;color:#CCC; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin-left:15px; }
    
    #footer-menu { float:right; font-size:12px; color:#ccc; font-family:Arial, Helvetica, sans-serif; width:300px; margin-top:10px;}
    
    #footer-menu a { color:#ccc; }
    
    #footer-menu a:hover { color:#09F; }
    
    #interior-nav { background:url(interior-nav-bg.png) no-repeat; height:73px; width:1000px; margin-top:20px; }
    
    .nav-button { margin-left:20px; margin-top:20px; background:url(nav-buttons.jpg) no-repeat; width:136px; height:34px; float:left; padding-top:10px; text-align:center; color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
    
    #inside-pic { float:left; margin-left:50px; padding-right:10px; padding-bottom:
    10px; padding-top:10px; }
    
    #inside-pic2 { float:right; margin-right:50px; padding-left:10px; padding-bottom:
    10px; padding-top:10px; }
    
    #interior-top { background:url(interior-bg-top.png) no-repeat; height:320px; width:1000px; }
    
    #interior-top h1 { color:#09C; font-family:Arial, Helvetica, sans-serif; font-size:36px; float:left; margin-left:50px; margin-top:40px; }
    
    #interior-top h2 { color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; margin-left:50px; margin-top:20px; clear:both; padding-right:40px; text-align:left;}
    
    #interior-middle { background:url(interior-bg-middle.png) repeat-y;}
    
    #interior-middle h1 { color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:12px;  margin-left:50px; padding-top:20px;  padding-right:40px; text-align:left;}
    
    #interior-bottom { background:url(interior-bg-bottom.png) no-repeat; width:1000px; height:50px; margin-bottom:20px; }
    
    #valitator { float:right; clear:both; width:110px; margin-right:20px; }
    
    .container { margin:0 auto; width:1000px; }
    
    .item {  background:url(project-bg.png) no-repeat; width:299px; height:294px; margin-left:20px; padding-top:20px; float:left;  }
    
    .item-picture { float:left; width:274px; margin-left:15px; margin-top:15px; }
    
    .item-title { float:left; width:274px; font-family:Arial, Helvetica, sans-serif; color:#ccc; font-size:16px; padding-left:15px; padding-right:10px; margin-top:5px; }
    
    .item-desc { float:left; width:274px; font-family:Arial, Helvetica, sans-serif; color:#ccc; font-size:12px; padding-left:15px; padding-right:10px; margin-top:5px; }
    Also as a note, When i dont float the class item to the left, the background seems to work fine, but i need them floated to be arranged like they are.

    Im sure i missed a small minute detail, whta is it ? lol

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    nvm, fixed it.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •