...

View Full Version : div Background not repeating properly



aaronhockey_09
05-02-2011, 01:27 PM
Hey guys so i have one minor problem.
If you go to http://armstrongwebandgraphic.com/Aarons-New-Site/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

<!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


@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

aaronhockey_09
05-02-2011, 01:40 PM
nvm, fixed it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum