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

newuser · #1 Oct 16, 2010, 08:32 AM

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.

lmilesw · #2 Oct 17, 2010, 02:05 PM

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.

IldiW · #3 Nov 29, 2010, 01:54 PM

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!)

lmilesw · #4 Nov 29, 2010, 02:37 PM

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.

IldiW · #5 Nov 29, 2010, 07:00 PM

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

lmilesw · #6 Nov 29, 2010, 07:21 PM

Put quotes on either side of the image url and inside the parenthesis.

IldiW · #7 Nov 29, 2010, 07:28 PM

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...

lmilesw · #8 Nov 29, 2010, 07:55 PM

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.

IldiW · #9 Nov 29, 2010, 09:08 PM

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

lmilesw · #10 Nov 29, 2010, 09:11 PM

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.