Advice on converting from tables to DIV/CSS...

TommyWillB

TommyWillB

Registered
Okay, I'll admit it... I can do HTML tables with my eyes shut but I've managed to remain completely ignorant about using DIV's and CSS... So I just started digging into this as an excercise in making my pages more standard and more accessable.

Here is what I've managed so far: http://www.jeffntom.com/accessable_index.php

I'm a huge fan of streachy pages, so I used the 2 Column example from http://glish.com/css/home.asp as a starting point. While the horizontal streaching is working fine, I can't seem to figure out how to do the vertical streaching.

If you look at my sample you'll notice that the page is there twice. The top is the new DIV/CSS version and below is the old TABLES version. The goal is to have a left nav column that has a fixed width, but a variable heght. Currently this is not working, so when the right-body (crrently light blue) area get's to big it suddnely is alligned back to the left edge. (This behaves slightly different in IE and Safari, but that is probably to advanced of a discussion until I wrap my brain around the basics.0

Can anyone steer me in the right direction? I'm looking for help both soving this specific problem as well as for general learning tips.

Thanks!
 
couldn't you just add a line right under here
Code: 
		#global_lnav {
				float:left;
				width:206px;

that says height: %100
 
It doesn't work like you think it would.

First of all, you don't have to contain everything in one master div. You should put everything you want in your gray bar into one div and everything else into another, and simply line them up with each other. Make their positions absolute and line them as you want. Use a gray and white picture as your background to differentiate the two sections so that you don't have to worry about making the div's the full height of the page, as I've found this hard to do.

If you want to make your navbar the full height of the page, put its contents into a transparent table of 1 row and cell, and make it take the entire size of the div. Then put only the size attributes you want on the table, and not on the div, and it should size properly.

I'm probably not the best person to answer your questions, but I hope I've helped out some. I'd suggest backing up your site's files before you implement any changes so you can go back if my advice screws up your layout (which I hope it doesn't!).
 
Originally posted by arden
First of all, you don't have to contain everything in one master div.
Click to expand...

That's what DIVs were made for. DIViding your content into clear sections: master head, content, footer...
 
Originally posted by Da_iMac_Daddy
couldn't you just add a line...that says height: %100
Click to expand...
D'oh! that's too easy!;)

That worked nicely in IE. Safari still is doing something weird.

...but I see there is a new Safari in Software Update, so I'm going to install that to see if it makes any difference.
 
Originally posted by arden
It doesn't work like you think it would.

First of all, you don't have to contain everything in one master div. You should put everything you want in your gray bar into one div and everything else into another, and simply line them up with each other. Make their positions absolute and line them as you want. Use a gray and white picture as your background to differentiate the two sections so that you don't have to worry about making the div's the full height of the page, as I've found this hard to do.

If you want to make your navbar the full height of the page, put its contents into a transparent table of 1 row and cell, and make it take the entire size of the div. Then put only the size attributes you want on the table, and not on the div, and it should size properly.

I'm probably not the best person to answer your questions, but I hope I've helped out some. I'd suggest backing up your site's files before you implement any changes so you can go back if my advice screws up your layout (which I hope it doesn't!).
Click to expand...
Thank you for the thoughts!

Truthfully, I can not beleive that CSS is so popular if the only solution is absolute positioning. If it is not possible to do something this basic (that I can do using standard HTML tables in 5 minutes) then this is not yet a mature technology for anything but the most generically designed personal/hobby sites.

If I can't seperate my headers & footers into seperate div's then I can't make these site-wide server side includes or PHP includes. Without being able to do that this site will be almost impossible to maintain.

I'm just saying "if..." I'm not yet decaring this a failure or saying that this can't be done. I've got the rest of this week off of work, so I'll keep trying before concluding one way or the other. :)
 
I seem to have a hard time working with HTML and CSS, getting everything aligned to look professional. I often have to resort to using tricks that either don't look right or don't fit what I'm trying to do.

The easiest thing is probably to use something like Dreamweaver to organize and align your pages, and you can specify that it use CSS. If you don't have the money for DW, you'll have to struggle along.

I recommend you read up on CSS with books from your local corporate book chain. They are quite helpful, and you may even figure out what you want to do.
 
You must log in or register to reply here.
Back
Top