Mon, 2003-05-12 14:54
My most important site is http://www.stnorberts.com I'm glad to read in this forum that tables aren't completely frowned upon. I'm just a few months or so into learning CSS and want this site to position everything the same no matter what resolution viewers use. It would be great to dispense with tables altogether though I don't have the comprehension od CSS yet for that. Or is it even possible to make the site look like this without using tables?
A friend using Netscape has been helpful. And even though I think most of my visitors are using IE, if something on the site is really off kilter I'd like to know and try to fix it. But I want this index page to look just like this, only using correct (valid?) html & css. The HTML validates and the CSS would validate if the scroll bar colors were accepted.
Any helpful hints would be appreciated.
John
Tue, 2003-05-13 19:21
#1
Nested Tables, Divs, Spans, Oh My!
Here's the front page with DIVs instead of TABLEs.
St Norbert School -- An Alumni Website
All the bits I have done are on the left, all the content of was was a <td> tag is on one single line, so easiest viewed in something without word wrap.
Most of the three-columns are done as:
<!-- left --> <div style="float:left; width: 37%"><hr></div> <!-- right --> <div style="float:right; width: 37%"><hr></div> <!-- middle --><b>whatever</b>
It's not intuative to have the right-hand content in the middle, but it centres everything up nicely this way.
Each section is (ahem SHOULD BE, think I forgot a couple) separated by a
<div style="clear: both;">
which in effect draws a line across the containing DIV and starts any more floats from this point.
The only problem you're going to have is the length of the columns, off hand I don't know any way of making these equal depending on the content...
The widths of the columns could still be played with a bit too, along with some padding/margin values.
My advice is, if you're not sure what's going on, add different coloured borders to each DIV and see what content it holds and where it is - it's the only way I can get my head around some of my designs!
Hope this helps a bit, also hope it's not in too deep to understand.
Tue, 2003-05-13 19:34
#2
Wow!! That's Really Close!
Looks like you did a LOT of work in a short amount of time. Thanks! I may be able to utilize this. The length of the colums I had equalized by my style sheet:
.column1 {
border-style: double; border-color: #666666; border-width: 1px; margin: 1px;
width: 250px; height: 697px;
}
.column2a {
border-style: double; border-color: #666666; border-width: 1px; margin: 1px;
width: 260px; height: 454px;
}
.column2b {
border-style: double; border-color: #666666; border-width: 1px; margin: 1px;
width: 260px; height: 242px; text-align: center; padding-top: 2px;
}
.column3 {
border-style: double; border-color: #666666; border-width: 1px; margin: 1px;
width: 245px; height: 697px; padding: 2px;
}
I'll take a detailed look at this tonight. I appreciate your input.
Wed, 2003-05-14 14:41
#3
Nested Tables, Divs, Spans, Oh My!
I've incorporated a couple things you have in your example. I added a closing DIV tag on the clearing DIV's so it will Validate, and it doesn't impact the presentation. Some of the other areas impact the display too badly and will take me more time to check out and work with. But thank you very much for all the effort you put into this test. I really appreciate it!
Now if only my freakin' host (Worldzone) will get its act together, I'll upload the changes! :roll:
Thanks again! 