Layout Problems

[TCH-RobertM]

Hi everyone, I hate to keep bothering you but I am new to this and I am vigorously trying to teach myself, so please bear with me.

 

The layout I am trying to achieve is what I thought would be pretty simple.

I have a header and footer with left and right columns. I have chosen to put a background image along the left and right sides of the "BOX" Div

I want the head and footer to line up smooth with them

 

a few things I notice when trying to do this are

 

1 ) On the top of the page is the header (yes pretty generic looking LOL) but right below it is the navigation menu I am using. (modified it from the website alistapart.com)

THE PROBLEM is there is a gap between them... not sure why I ahve checked the padding and margins for all and either I am going buggy looking at this and just dont see it... or I am missing somthing else that is causing this..

I have removed the Menu ul li a --- border-top: 1px solid #FFF which still leaves a gap although not as large.

 

2 ) On the Rightside DIV if you look at the top of the Righthand side of the screen there is a green strip (part of the background image so I could show the breaks withing the box's not sure why this is occurring

 

3 ) On the bottom of the rightside div two things. First I would like to know how to make the rightside div stay as big as the leftside and not be so "fluid" but more so the border needs to be from top to bottom seperating the left from the right side

 

 

4.) the footer I would like this to be flush with the bottom edge of the left and right content div.

 

I am trying many things to correct this... and have been googling for hours it seems. I think this CSS stuff is quite challenging to say the least..

 

well Thank you if you can assist and hopefully once I get this done I will work on the php steps of cutting this up so I can get the site up and running

 

the link is

Thanks again

RobertHERE

[Rickasaurus]

Robert,

The best way to achieve what you want from your layout, and keep everything under control is to use tables. Put each item (buttons, images, sections of text etc) inside a table cell. You can even put tables inside other tables.

 

Not sure if you are doing that already, but if not, it should help.

 

Rick

[woesap]

1 ) On the top of the page is the header (yes pretty generic looking LOL) but right below it is the navigation menu I am using. (modified it from the website alistapart.com)

THE PROBLEM is there is a gap between them... not sure why I ahve checked the padding and margins for all and either I am going buggy looking at this and just dont see it... or I am missing somthing else that is causing this..

I have removed the Menu ul li a --- border-top: 1px solid #FFF which still leaves a gap although not as large.

HAve you tried the vertical-align option? Maybe vertical-align: top will correct this

 

2 ) On the Rightside DIV if you look at the top of the Righthand side of the screen there is a green strip (part of the background image so I could show the breaks withing the box's not sure why this is occurring

I think the problem is within this line in css:

>#Rightside {
     margin: 20px 0px 0px 0;

The margin 20px could be the problem

 

3 ) On the bottom of the rightside div two things. First I would like to know how to make the rightside div stay as big as the leftside and not be so "fluid" but more so the border needs to be from top to bottom seperating the left from the right side

I agree with Rick, best use tables to align both columns. Try that out first I suggest

 

4.) the footer I would like this to be flush with the bottom edge of the left and right content div.

Maybe vertical align again?

 

I am NOT a CSS guru but hopefully there is something right in my suggestions

Good luck!

[TCH-Bruce]

#Rightside {

    margin: 20px 0px 0px 0;

 

This IS the problem with the gap at the top.

 

Here is a suggestion. I don't know what you are viewing the page with but if you use Firefox download the web developer extension as it contains a great CSS editor that lets you make changes in real time and see the results. I used it to remove the 20px margin and your right content lined up where it should. Also you should add "px" to the last value.

 

Those values are top, right, bottom and left. If all are going to be zero then you can just enter is as margin: 0px; you don't need all 4.

[TCH-RobertM]

Thank you all for helping with this, I dont know how I missed that margin being set to 20px

But thanks for pointing that at.

 

the only conclusion I could get to somewhat work for the border part was to change the background.png file and add a little black strip 276 pixles in from the right edge...

this seemed to render a continous look with the border of the rightside.

 

as far as content actually being used there that is yet to be determined..... but as I progress I will let you know my results.

 

Rickasaurus , I probably would have used tables if I did not want to try so hard to learn about the uses of CSS and Xhtml ... I am not knocking its use but would prefer to not use tables for the layout unless absolutley there is no other alternative. But thank you anyway for responding.

 

woesap, I tried the verticle-align: top; ... did not really do much from what I could tell, I am going to try some additional things later today with it and will post back what I find. thank you for your help

 

Bruce. Thank you also for helping out again. I do use Firefox 1.0 and have the web dev extension in place, it does come in hand for tweaking..

Thanks again everyone

 

Rock Sign