Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » Forum Usage » Forum How-To »

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


  #1  
Old Apr 9, 2011, 01:04 PM
amy17
 
9 posts · Apr 2011
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;
}
  #2  
Old Apr 9, 2011, 02:42 PM
amy17
 
9 posts · Apr 2011
Please can somebody help me!
  #3  
Old Apr 9, 2011, 03:07 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #4  
Old Apr 9, 2011, 04:01 PM
amy17
 
9 posts · Apr 2011
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.
  #5  
Old Apr 9, 2011, 04:22 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Apr 9, 2011, 04:50 PM
amy17
 
9 posts · Apr 2011
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.

__________________
  #7  
Old Apr 9, 2011, 05:24 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
HTML Code:
background: #000000 url("http://www.onlinebizhunters.com/wp-content/themes/atahualpa347/images/header/header6.jpg") no-repeat scroll center top;
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Apr 9, 2011, 06:18 PM
amy17
 
9 posts · Apr 2011
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?
  #9  
Old Apr 9, 2011, 07:02 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
That should be in the Theme Options in the Menu 1 section.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Apr 9, 2011, 07:13 PM
amy17
 
9 posts · Apr 2011
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

Bookmarks

Tags
css inserts, header, html css inserts, menu

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Make category menu bar full width howardhill Page & Category Menu Bars 6 Jan 5, 2011 04:15 AM
How to make header image & menu bars stretch full width of the container? Shan_LSOS Header configuration & styling 19 Oct 25, 2010 11:51 PM
[SOLVED] How to make menu bar all white? abigaildeanna Page & Category Menu Bars 0 Oct 14, 2010 09:52 AM
How to make header image not span full width of the page zachmorton Header configuration & styling 1 Sep 29, 2010 04:16 PM
[SOLVED] Page menu bar gif image full width rcarbaugh Page & Category Menu Bars 4 Jan 13, 2010 12:43 PM


All times are GMT -6. The time now is 12:59 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.