SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
Thread: CSS tableless design question.
-
Sep 23, 2007, 17:15 #1
- Join Date
- Sep 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
CSS tableless design question.
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
-
Sep 23, 2007, 17:58 #2
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 :
Code:#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;}
Code:#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;}
-
Sep 23, 2007, 18:25 #3
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Noticed there were still a few other problems with footer and left column. Changes to address these are :
Code:#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}
-
Sep 23, 2007, 19:42 #4
- Join Date
- Sep 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 23, 2007, 20:33 #5
- Join Date
- Jun 2007
- Posts
- 29
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 23, 2007, 20:36 #6
- Join Date
- Sep 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Sep 23, 2007, 20:47 #7
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The heading problem is due to the way IE6 handles margins - instead of using a left margin, use a left padding :
Code:#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;}
Code:#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.....
-
Sep 23, 2007, 21:10 #8
- Join Date
- Sep 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 23, 2007, 22:01 #9
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 :
Code:#rightPan{width:484px; float:right; padding:10px; border:1px solid #DCDAC2; background:#fff; color:#3D3C2C;}
Cheers
Graeme
-
Sep 23, 2007, 22:18 #10
- Join Date
- Sep 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 23, 2007, 23:31 #11
- Join Date
- Jun 2007
- Location
- Sydney, Australia
- Posts
- 253
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Tom_K, when you were stuck, coming to sitepoint was definately the right choice (Y)
Bookmarks