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 » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

[SOLVED] header and nav bar 100%, center content 70%. How to do?


  #1  
Old Oct 16, 2010, 08:32 AM
newuser
 
3 posts · Oct 2010
I'm looking to have the header and nav bar fill 100% of the page and then the center content take up 70% in the center of the screen.

Edit -- I figured it out.. I set the page to 100% and the post container at 70%.. works like a charm.

But now I can't get the sidebar to indent 75px. Edit - I gave up and moved on.

Now I can't get rid of the 15px padding between the nav bar and the post container.
Any help appreciated.

Last edited by newuser; Oct 18, 2010 at 11:29 AM.
  #2  
Old Oct 17, 2010, 02:05 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
The sidebars are in cells at the far left and right. The only way of "indenting" them with a full width layout like you have is to use padding on the side away from the center and a border on the outside of the sidebar will be problematic.
__________________
~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.
  #3  
Old Nov 29, 2010, 01:54 PM
IldiW
 
39 posts · Oct 2010
NZ
I have a similar issue but the above (page width 100% - post container 70%) didn't work.
What I'd like to see is to have the header and footer at 100% accross the screen but the middle part to be fixed width (say 800px).
I've tried
1. td#middle {width: 400px;} - not working
2. adjust ATO/Centre coloumn - not working
3. adjust ATO/Post/pages - not working

I noticed that in the CSS.php (I know, didn't touch it, just looked ) that td#middle has 100% twice - could this be the issue?
I need to emphasise that it's not the entire container width I want to change just below header above footer area. On a normal page I would have a container div that includes left sidebar, content, right sidebar - but I can't find this here.

Many thanks!

ATA 353
http://79.170.44.110/westaucklandparents.org.nz/

(I keep working on the page so not sure what stage exactly it'll be if you're looking at it!)
  #4  
Old Nov 29, 2010, 02:37 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
To do what you want you would set the width of your layout to a fixed width of what you want the "middle part" to be then you use background images for the full width top and bottom. Here is a general outline.

>Place the code for one background image in ATO>Body, Text & Links>Body Style as outlined on that page. Set it to repeat-x and positioned at the top.

>Now put the following code into the HTML/CSS inserts:

HTML Code:
html{
background-color:#XXXXXX;
background-image:url('http://Path_To_Image/bg-bottom.jpg');
background-repeat:repeat-x;
background-position:left bottom;
}
This adds another background image to the html tag and positions it at the bottom. Put the background color in the html tag and remove it from the body tag.

What you end up with is one background image in the body set to repeat-x and positioned at the top and another in the HTML/CSS inserts for the bottom.
__________________
~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.
  #5  
Old Nov 29, 2010, 07:00 PM
IldiW
 
39 posts · Oct 2010
NZ
The first part worked perfectly, thank you!

The footer doesn't seem to change. I was wondering what do you mean by html tag... It must be something I'm missing, I thought html tag was a broad category including things like <p> and <body>.
Confused as ever!

This is what I have (and doesn't work):

html {
background-color:#ececec;
background-image: url(http://79.170.44.110/westaucklandpar...mock_bkg.png);
background-repeat:repeat-x;
background-position: bottom left;
}

thanks again,
Ildi
  #6  
Old Nov 29, 2010, 07:21 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Put quotes on either side of the image url and inside the parenthesis.
__________________
~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.
  #7  
Old Nov 29, 2010, 07:28 PM
IldiW
 
39 posts · Oct 2010
NZ
Do you mean like this?

html {
background-color:#ececec;
background-image: url('http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/images/mock_bkg.png');
background-repeat:repeat-x;
background-position: bottom left;
}

No change...
  #8  
Old Nov 29, 2010, 07:55 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
That's correct except I think you need to use double quotes like as follows.
HTML Code:
html {
background-color:#ececec;
background-image: url("http://79.170.44.110/westaucklandparents.org.nz/wp-content/themes/atahualpa/images/mock_bkg.png");
background-repeat:repeat-x;
background-position: bottom left;
}
I double checked your site and the other thing you need to do is get rid of the color declaration in your top background image code. That is what is covering the bottom image. The bottom image color is what is used in this type of situation.

As an aside... I noticed your color declaration was at the end of your background image code. When using shorthand it should be at the beginning. That is not the problem here as mentioned above but wanted to mention in case you use background image shorthand in the future.
__________________
~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.
  #9  
Old Nov 29, 2010, 09:08 PM
IldiW
 
39 posts · Oct 2010
NZ
Thanks, that's working brilliantly! You were right of course with the colour covering the bottom image!
I hope you are teaching in your day-job (if you have time for one besides this forum ) because you are great in explaining things!
Many thanks again!!
Ildi
  #10  
Old Nov 29, 2010, 09:11 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Thanks for the kind words. It helps to know at least some can understand what I am trying to communicate. I never quite know how much detail to give. Glad you are now working OK.
__________________
~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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Separating the content area from the header and right nav trueinthegame Center area post/pages 6 Oct 4, 2010 10:55 PM
how do i move a section up closer to header or nav bar ididapoopy Header configuration & styling 1 Sep 13, 2010 11:36 AM
Filling page menu bar 100% width bassoo Header configuration & styling 7 Sep 7, 2010 06:20 PM
[SOLVED] How do I move my nav bar below my header? thegeckoden Other BFA WordPress Themes 1 Apr 17, 2010 12:39 PM
IE ruins aligned images in header & center column, & doesn't size nav menu buttons viewdesigninc Header configuration & styling 0 Dec 11, 2009 01:07 PM


All times are GMT -6. The time now is 09:11 PM.


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