[SOLVED] How to make header and page menu bar full width and take the white spacing o
 

Hi guys,

I hope some body can help me fix two issues, earlier I made my header a full width according to some helpful post I found on this forum, then I changed the page menu and cats bar to a full width to go along with the full header, I'm using layout width 100%.
The problem is, as you can see here http://www.onlinebizhunters.com I still have some white space on the left and right of the header and menu area, my question is how do I take that white space off and make the header and 2 menu bars to stretch all the way to the left and right (full width) with keeping my page menu and cats menu items aligned according to my content area as in this example here http://letusbuzz.com

Here is my css/html inserts:
div.wrapbody{
width: 1000px !important;
}

div#menu1 ul.rMenu
{background: red;
border: none;
width: 1000px;
margin-right: auto;
margin-left: auto;
}

ul.rMenu li a {width:100px; text-align:center;}

ul.rMenu,
div#menu1 {
height:25px;
margin-top:0px;
background-color:red;
repeat-x !important;
}

Please can somebody help me!

Take the padding off of the Layout Container Style in ATO>Style & Configure Layout. If you want the image to be full width you will need a wider image.

Thanks lmilesw, well I took the padding off but the header and menu bar don't stretch to the full width of the page. So If I would upload another image/header what size should it be to make it full width and what should I do for the menu bar to also stretch it to a full width. Please take a look at my site http://www.onlinebizhunters.com you will see the white space on the left and right of the header and the menu bar.

I still see the padding there. Where did you remove it from? As for the width of the image... You will need it as wide as the widest monitor you expect it to be viewed on or you design it in such a way as to make the width not matter after a certain width is reached. That is sometimes accomplished by fading out the sides to a solid color and using that color as the background color for the image.

I removed the padding from ATO---> Layout Container Style
This is the code I have now;

border: 1px solid #ddd;
background: #ffffff;
-moz-box-shadow: 0 0 15px #999;
-khtml-border-radius: 3px;
-webkit-border-radius:3px;
border-radius: 3px;

As for header issue can you please clarify this sentence a little bit more "you design it in such a way as to make the width not matter after a certain width is reached.That is sometimes accomplished by fading out the sides to a solid color and using that color as the background color for the image"
Do you mean I should make my header 1300 px and then add a background image to cover the remaining space, if yes can you give a code of how to make the "header" a background image; I ve tried this code to repeat the bg color repeat-x but it didn't work out.

How about stretching the page menu, I inserted this code to spread the color red to a full width by repeat horizontally but no success.

ul.rMenu li a {width:100px; text-align:center;}
ul.rMenu,
div#menu1 {
height:25px;
margin-top:0px;
background-color:red;
repeat-x !important;

Could you please provide me with a clear solution to a total newbie to the css/html.

__________________

Look below the box where the 20px padding was and you will see another box for side padding. Set that to 0. I forgot about that.

What I am saying about a picture is if you want it to be full width you need to make it as wide as the wides monitor it will be viewed on or you will see the sides as in your image. What I have done is fade out the sides of the image to a solid color and then use the same color as the background for the background image. For instance if I faded a picture out to black on the sides the code for the image might be something like the following.

Thanks lmilesw, your tips helped me a lot but I realized that I got a dotted border around the menu bar, how do I get rid off it?

That should be in the Theme Options in the Menu 1 section.

yes but for the full width menu this code took care of it:
add this to ATO -> Add HTML/CSS Inserts -> CSS Inserts
div#menu1 { border: none 0px; }:)

lmilesw, thank you for your help