PDA

View Full Version : my footer is too wide, i cant make it the width of my wrapper


silverglade
08-25-2009, 05:37 PM
hi, my footer is too wide, i cant make it the width of my wrapper, any help greatly appreciated. here is the page im talking about.

http://centraljerseytees.com (http://centraljerseytees.com/)

here is the css to the page

@charset "utf-8";
/* CSS Document */

* {
padding: 0;
margin: 0;
}

body {
margin: 0;
padding-bottom: 25px;
background-color: #1A492A;
}

#wrapper {
overflow: auto;
background: url(images1/index.png) no-repeat;
width: 921px;
height: 712px;

margin-top: 25px;
margin-right: auto;

margin-left: auto;

}

#shirt {
float: left;
background: url(images1/black_shirt.jpg) no-repeat;
width: 323px;
height: 390px;
float: left;
margin-top: 285px;
margin-right: auto;
margin-bottom: 0;
margin-left: 48px;



}

#nav {
float: left;
width: 237px;
margin-top: 275px;
margin-right: auto;
margin-bottom: 0;
margin-left: 20px;

}

#footer {
margin: 0 auto 0 auto;
width: 921px;
color: white;
background-color: black;
text-align: center;
clear: both;
}

#footer a:link , #footer a:visited {
text-decoration: none;
color: green;
}
#footer a:active, #footer a:hover {
text-decoration: none;
color: #CC6699;
}


and here is the html to the page

<!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" />
<link rel="stylesheet" href="shirts.css" type="text/css" charset="utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<title>Central Jersey Tees Home</title>
<style type="text/css">
<!--
.style1 {
font-size: x-large;
font-weight: bold;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images1/slices_on/home.png','images1/slices_on/about.png','images1/slices_on/catalogue.png','images1/slices_on/designs.png','images1/slices_on/quote.png','images1/slices_on/contact.png')">
<div id="wrapper">

<div id="nav"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images1/slices_on/home.png',1)"><img src="images1/slices_off/home.png" name="Image1" width="237" height="61" border="0" id="Image1" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images1/slices_on/about.png',1)"><img src="images1/slices_off/about.png" name="Image2" width="237" height="75" border="0" id="Image2" /></a><a href="catalogue.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images1/slices_on/catalogue.png',1)"><img src="images1/slices_off/catalogue.png" name="Image3" width="237" height="60" border="0" id="Image3" /></a><a href="designs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images1/slices_on/designs.png',1)"><img src="images1/slices_off/designs.png" name="Image4" width="238" height="66" border="0" id="Image4" /></a><a href="quote.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images1/slices_on/quote.png',1)"><img src="images1/slices_off/quote.png" name="Image5" width="235" height="66" border="0" id="Image5" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images1/slices_on/contact.png',1)"><img src="images1/slices_off/contact.png" name="Image6" width="235" height="75" border="0" id="Image6" /></a></div>

<div id="shirt"></div>



</div>

<div id="footer">
&copy; Centraljerseytees.com (site design by <a href="derekvanderven.com">derekvanderven.com</a>)</div>


</body>
</html>

coloeagle
08-25-2009, 09:04 PM
Add the center to your #wrapper image
background: url(images1/index.png) center no-repeat;
Then view the page to see how it looks.

silverglade
08-25-2009, 09:06 PM
ok i solved it i had to get a little tricky, but it worked. i fixed it with the following code.

#footer {
float: left;
margin: 10px auto 0 15px;
width: 900px;
color: gray;
background-color: black;
text-align: center;
clear: both;
}


i added center to the wrapper but it caused this black spot to appear on the shirt, but the bottom corners went rounded again which was good, but i had to get rid of center because of the black spot. thanks though. derek

coloeagle
08-25-2009, 09:29 PM
i added center to the wrapper but it caused this black spot to appear on the shirt, but the bottom corners went rounded again which was good, but i had to get rid of center because of the black spot. thanks though. derek
OK, then increase the height of the div. This will allow the corners to appear.

silverglade
08-25-2009, 09:47 PM
awesome coloeagle!!! it looks perfect now. THANK YOU!!!

http://centraljerseytees.com (http://centraljerseytees.com/)

WOOT!!! thanks . derek:mrgreen:

coloeagle
08-25-2009, 10:13 PM
Your welcome. Just a suggestion, add about 20px top padding to your footer div. This will bring the text down and IMO look better.

silverglade
08-26-2009, 07:05 AM
yes it does look a lot better thank you.:mrgreen: