8 replies [Last post]
SpotsyRWH
Offline
newbie
Last seen: 17 years 22 weeks ago
Timezone: GMT-5
Joined: 2003-12-12
Posts: 5
Points: 0

I have been trying to convert our website from table layout to a CSS layout the last couple of days and it just does not seem to be working for me.

Can someone give me some advise as to what I am doing wrong, or if I am trying to convert something that simply can not be replicated with CSS?

Here is a normal page using the existing formating:

http://www.spotsylvania.va.us/departments/animal/index.cfm

Here is my horrible CSS attempt:

http://www.spotsylvania.va.us/test/index.cfm

CeceV
CeceV's picture
Offline
newbie
New York
Last seen: 17 years 21 weeks ago
New York
Joined: 2003-12-16
Posts: 6
Points: 0

Converting a table layout site to a CSS site

Your site is simple to achieve through a CSS.

I would first try to cut down the number of div tags, the simpler the better.
(I'm not sure what level0 does)...You can use absolute position on all your tags, which makes it easy for beginners to understand.

First think layout-- From what I see 5 divs are all you need. Maybe a 6th for the search form.

<topbar>
<navlinks>
<sidebar><deco><content>

Then position and style the type.

I couldn't find the css that relates to this layout otherwise, I would give you more help.

SpotsyRWH
Offline
newbie
Last seen: 17 years 22 weeks ago
Timezone: GMT-5
Joined: 2003-12-12
Posts: 5
Points: 0

At least I know it's possible to do

I'll give it another shot in a couple days some other stuff has popped up and requires my attention.

Thanks for the reassurance.

The reason I used relative is because of the footer, I did not know how I could place it right because the pages are dynamic and the size of the content can change drastically. I figured relative would always keep it at the bottom.

Is this what relative is for, or do I have it very incorrect?

JohnO
Offline
Regular
Rochester NY
Last seen: 17 years 21 weeks ago
Rochester NY
Timezone: GMT-5
Joined: 2003-12-18
Posts: 16
Points: 0

Converting a table layout site to a CSS site

relative is a weird tag, as you'll find if you keep experimenting... although in theory for a footer it should work posistion:relative;top:0px;left:0px; so long as it is the first div after what it should semantically follow (the content)

but dont try using position:relative alot.. it gets ugly quick

SpotsyRWH
Offline
newbie
Last seen: 17 years 22 weeks ago
Timezone: GMT-5
Joined: 2003-12-12
Posts: 5
Points: 0

Converting a table layout site to a CSS site

JohnO wrote:
relative is a weird tag, as you'll find if you keep experimenting... although in theory for a footer it should work posistion:relative;top:0px;left:0px; so long as it is the first div after what it should semantically follow (the content)

but dont try using position:relative alot.. it gets ugly quick

I tried making the footer relative, and everything else absolute, and I found that the footer would end up showing at the top of the page, the only way I thought I could get around that would be to make everything else relative.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Converting a table layout site to a CSS site

Correct; relative positions a box relative to those that have appeared in the 'normal flow'. If you position something absolutely or float something, it is taken out of this flow. So therefore there's nothing before it, and it's 'relative' to the top of the page.

Relative is just where the box would appear on the page (with static) but you have the ability to offset it slightly.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

SpotsyRWH
Offline
newbie
Last seen: 17 years 22 weeks ago
Timezone: GMT-5
Joined: 2003-12-12
Posts: 5
Points: 0

Converting a table layout site to a CSS site

So if I understand what you are saying I should do something along these lines:

Create 3 divs
Header
Content
Footer

I would make those divs relative so that my footer will show up at the bottom.

Then in header I would put the banner image, an absolute div for the search form, and another absolute div for the bread crumbs.

(I think here is where I start to have problems)
I would then create in the content div, one absolute position div for the navigation links, another div for the actual content, and inside of that div place another div the content decoration, and a seperate for the real content so that it has space between the decoration and the content.

The footer would be done the same as the content section as it has the same format, just different content.

It sounds right to me, but is there something I am missing?

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Converting a table layout site to a CSS site

Yep, that could work. Remember that the absolute DIVs within say the header won't impact on the size of the header div - eg if the image is 200px high, and the breadcrumb is 300px but absolutely positioned, then the header will be 200px high.

Best thing to do is create another HTML page, ignore content, and play around with bordered/coloured DIVs:

<div style="border : 1pt solid red; position: relative;">
<div style="border : 1pt soild blue; position : absolute; width : 200px;">
blah
</div>
<div style="border : 1pt soild green; position : absolute; width : 500px;">
blah
</div>
</div>

et al. Just to get the divs in the right positions, and to see how big each one would be. Try changing things from relative to absolute, and vice versa, and watch what happens.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

SpotsyRWH
Offline
newbie
Last seen: 17 years 22 weeks ago
Timezone: GMT-5
Joined: 2003-12-12
Posts: 5
Points: 0

Converting a table layout site to a CSS site

dJomp wrote:
Yep, that could work. Remember that the absolute DIVs within say the header won't impact on the size of the header div - eg if the image is 200px high, and the breadcrumb is 300px but absolutely positioned, then the header will be 200px high.

It looks that either way I have a problem, I can specify a static height for the header, and the footer, but I definately can not do that for my content section as it is dynamic and can expand and contract greatly.

So I would have to set the divs in my content section to be relative to prevent that from occuring.