CSS tableless design question.

[Tom_K]

I am working with a free template I downloaded and I am customizing it for a local church and once completed it will be their main church web site. It is a tableless design and I am having one problem I can't seem to find a solution for. This is the problem.......the index page for example has a certain amount of text in the main area and that makes the page so many pixels long. No problem there........but........the history page is a very long page with much more text and for some reason the fact that that page is so long forces every other page on the web site to be that long as well. The "pastor" page for example is very short.......but the page is incredible long as it mimics the "history" page. I am wondering how to get these blocks of text to be the correct size per page rather then having that loooooooong page throughout the entire web site.

Any help would be appreciated here. *note*: I am not an expert web developer by any stretch of the imagination.....but.....I can get along OK and am willing to put in the time to get this right.

Here is the link to the site (it's no where near finished as far as text and some link don't work yet):

http://www.tomkaszuba.com/test/index.html

Here is a link to the css: http://jigsaw.w3.org/css-validator/v...t%2Findex.html

[Centauri]

It is not hard to see why this is a free template, with all that absolutely-positioned "divitis" (too many unnecessary divs). The problem is the height has been set here :

#rightPan{width:504px; height:5365px; position:absolute; top:0px; right:10px; border:1px solid #DCDAC2; background:#fff; color:#3D3C2C;}
#rightbodyPan{width:484px; height:5345px; position:absolute; top:10px; left:10px; background:#FCFAE6; color:#3D3C2C;}

If you change that entire section to this, it will solve the problem:

#rightPan{width:484px; float:right; margin-right 10px; display: inline; padding:10px; border:1px solid #DCDAC2; background:#fff; color:#3D3C2C;}
#rightbodyPan{ border-top: 1px solid #FCFAE6; background:#FCFAE6; color:#3D3C2C;}

This floats the column right instead of absolute positioning and contrains (and sizes) the inner div with the use of padding.

[Centauri]

Noticed there were still a few other problems with footer and left column. Changes to address these are :

#footerPan{width:778px; position:relative; margin:0 auto; padding: 20px 0 0; clear: both}
#footernextPan{width:506px; padding:8px 0; background:#B0AD93; color:#fff; margin:0 auto;}
#footerPan ul{width:380px; display:block; height: 1.5em; margin: 0 auto;}

#leftPan{width:239px; float:left; margin:0; padding:0px;}

#bodyPan{width:762px; position:relative; margin:0 auto; padding:0 8px; overflow: hidden}

[Tom_K]

Wow Centauri....I have been looking high and low for a solution. Your suggestions were a HUGE step forward. The footer is still a problem. Plus the heading for each page are off to the left too much in Internet Explorer.

I am extremely grateful for your assistance on this. You're the first person who could help me....and believe me I have been asking and searching.

[kungfu71186]

try changing the left and right styling to margin-left and margin-right or paddings.

I always try those first and it usually seems to work for IE then without applying hacks.

[Tom_K]

try changing the left and right styling to margin-left and margin-right or paddings.

I always try those first and it usually seems to work for IE then without applying hacks.

I tried changing the padding but it messed up the look in Firefox. How do I change the left and right styling to margin-left and margin-right?

[Centauri]

The heading problem is due to the way IE6 handles margins - instead of using a left margin, use a left padding :

#rightbodyPan h2{width:266px; height:31px; display:block; position: relative; padding:24px 0 0 80px; font:28px/28px Georgia, "Times New Roman", Times, serif; color:#3D3C2C; margin:20px 0;}

As to the footer, change this:

#footerPan{width:762px; position:relative; margin: 0 auto; padding: 20px 8px 0; clear: both}
#footernextPan{width:506px; padding:8px 0; background:#B0AD93; color:#fff; float: right;}

PS: only take advice from those who have actually looked at your problem.....

[Tom_K]

Holy Wow Centauri.......you did it! I am profoundly grateful to you for this. You have the distinction of being the only one on the net who had the answer. I salute you.

A couple of questions if I may be so bold. In your estimation......how "bad" is the css code on this template? If it is that lousy.....can it and should it be cleaned up? Also......will a tableless site like this work in older browsers?

Again....thank you so much for your help.

PS. I just tried validating the css in w3c and the only thing it missed was this little thing on line 66. Is that correctable? http://jigsaw.w3.org/css-validator/v...t%2Findex.html

[Centauri]

Ahh, I missed a colon. However, as I put side padding on the #bodyPan, the margin is not needed (and neither is the inline display, which was for the benefit of IE6), so that line of css can be reduced to :

#rightPan{width:484px; float:right; padding:10px; border:1px solid #DCDAC2; background:#fff; color:#3D3C2C;}

Using css is all about styling content, and divs should only be used to logically group blocks of content. If there is only one element inside a div, then in a lot of cases the div itself could be removed and the styling applied direct to the particular element. Sometimes extra non-semantic divs have to be inserted due to the particular graphic styling required, but their use should be minimised. Your layout could probably be reworked to reduce the number of divs substantially, but may not be worth the effort - as the layout does not use tables, it is quite accessible and makes semantic sense, and a few extra divs are not going to affect that. One of the biggest problems was the excessive use of absolute positioning, but we got rid of most of that during the course of this thread.

Cheers
Graeme

[Tom_K]

Graeme, you have no idea how much this has helped me. I extend to you a heartfelt thank you. Things are looking really nice now with the site and it validates in w3c which is another thing that makes me happy.

This is my first experience with SitePoint. To say that I am impressed would be an understatement.

Thanks,
Tom_K

[znebojsa]

Tom_K, when you were stuck, coming to sitepoint was definately the right choice (Y)