Help with new design

Get Started
1

All,

I have been experimenting with a new design, and I am having some issues. I have designed a menu with an image on the left and one the right that don’t stretch (I have put them as their own div background image). Then I have a separate gray image behind them that spans the entire width of the page. The problem that I am having is keeping the contents centered on the page. Right now I just padding on the right to push that div tag over, but it will not adjust to the different monitor sizes. Any ideas?

http://bdcwebdesign.com/

2

What is the actual width of the site suppose to be? I really don’t see the reason for that body-wrapper. I think you make it way to complicated. I see that the background image for the content has a width of 800px. So your wrapper should be 800px. You also use margins everywhere to get things aligned. See if this works for you:


html, body {
	height: 100%; margin: 0; padding: 0;	
}

body {
	background: #e3d8d8 url(images/yourImage.png); font: Arial, Helvetica, sans-serif 100.01%; color: #830606;	
}

#wrapper {
	width: 800px; margin: 0 auto; font-size: 0.7em; 	
}

#header {
	width: 800px; 	
}

#header .logo {
	width: 192px; height: 96px; margin: 2px 0 2px 150px;	
}

#header-left {
	width: 210px; height: 400px; background: url(../images/menu-left.png) no-repeat; position: absolute; left: 0;	
}

#header-right {
	width: 210px; height: 400px; background: url(../images/menu-right.png) no-repeat; position: absolute; right: 0; top: 0;	
}




<div id="wrapper">
<div id="header-left"></div>
<div id="header">
<div class="logo"></div>
</div>
<div id="header-right"></div>
</div>

By the way in FF your trick with with those three background images is working, but not in IE :slight_smile:

3

What is suppose to be the width of your site? First of all do you have a wrapper without width where you use, as it should be

margin: 0 auto;

but then within the wrapper you have a div body-wrapper with

padding-left:212px;

There is no reference or what so ever to keep your content centered

4

Ok… sorry for the confusion. I have figured out how to apply all three images in the background of my body with this:

body {
	background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
	background-position: top left, top right, top center;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-color: #e3d8d8;
	font: 12px arial, sans-serif;
	color: #830606;
}

I have set my site width to 1000px and adjusted my contents with a padding left of 215px, but I am still not seeing my contents staying centered on my page.

#wrapper {
	width:1000px;
    margin:0 auto;
	float:left;
}
#body-wrapper {
	padding-left:215px;
	
}

Can someone take a look and give me some advice?

5

I had a site width in before, but I was having issues with my side images.

This is what I have done now:

I put the div “left” and “right” outside of the div “wrapper”, and I changed the site width inside the “wrapper” div to 800px. I consequently had to remove my padding left on my “body-wrapper” div tag. What am I missing?

6

never mind… my mistake. That’s what I get for having fat fingers. :slight_smile:

Thanks a bunch for your help.

7

I made the modifications above, but I am still seeing everything pushed to the left and the left image is not appearing. Any ideas?