Table -> CSS help needed

#1

Hi everybody,

I'm trying to translate a "old" website from table to CSS.

Here is the simplified table structure:
<table style="padding:0;width:982px" id="tablecontent" cellspacing="0">
<tr>
<td
style="width:165px;height:70px;vertical-align:top;text-align:center;">logo</td>
<td>banner</td>
<td>Newsletter</td>
</tr>
<tr>
<td class="dashedborder" valign="top">menu</td>
<td class="containertable" valign="top">MAIN CONTENT</td>
<td class="dashedborder">Advertisement</td>
</tr>
<tr>
<td colspan="3" align="center" class="footer"></td>
</tr>
</table>

Now what I've tried so far (without much success):
<div class="logo">logo</div>
<div class="banner">banner</div>
<div class="newsletter">Newsletter</div>
<div class="leftmenu">LeftMenu</div>
<div class="containertable2">MAIN CONTENT</div>
<div class="informations">info</div>
<div class="footer2">footer infos</div>
..logo{
float:left;
background-color:white;
}

..banner{
float:left;
width:728px;
height:90px;
background-color:blue;
}

..newsletter{
float:left;
background-color:red;
}

..leftmenu{
float:left;
clear:both;
background-color:yellow;
}

..containertable2{
float:left;
background-color:green;
width:728px;
}

..footer2{
clear:both;
}

Unfortunately, the result is a real Mess and nothing is aligned correctly.
Can somebody help me with this ? what am I doing wrong. For example, footer2
is still on the right of the containertable2 and I don't know why.

Also a simple question. Should I use SPAN for content that are on the same
line like logo - banner - newsletter ?

Thank you for helping.

Bob

#2

On Tue, 11 Aug 2009, Bob Bedford wrote:

Quote:

I'm trying to translate a "old" website from table to CSS.

What for?

--
In memoriam Alan J. Flavell
http://www.alanflavell.org.uk/charset/

#3

Gazing into my crystal ball I observed "Bob Bedford" <bob (AT) bedford (DOT) com>
writing in news:4a819f94$0$9116$5402220f (AT) news (DOT) sunrise.ch:

Quote:

Hi everybody,

I'm trying to translate a "old" website from table to CSS.

Please provide a URL to your attempts so far.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

#4

"Adrienne Boswell" <arbpen (AT) yahoo (DOT) com> a écrit dans le message de news:
Xns9C646B96A5309arbpenyahoocom (AT) 188 (DOT) 40.43.213...

Quote:

Gazing into my crystal ball I observed "Bob Bedford" <bob (AT) bedford (DOT) com
writing in news:4a819f94$0$9116$5402220f (AT) news (DOT) sunrise.ch:

Hi everybody,

I'm trying to translate a "old" website from table to CSS.

Please provide a URL to your attempts so far.
Hello Adrienne,

thank you for your help.

I'm actually working locally, I can't put it online yet.
I've been able to fix things but I need to improve it.

What I can't do for now is to have 3 cells the same height(taking the bigger
height. In my case, the first line has 3 divs, the first one is bigger than
the 2 others so there is free space between those divs and the second line.
Since I want to put a frame around those Divs, I'm in trouble.

Best regards.

Bob

#5

"Andreas Prilop" <prilop4321 (AT) trashmail (DOT) net> a écrit dans le message de news:
Pine.LNX.4.64.0908111901130.1447 (AT...ni-hannover.de...

Quote:

On Tue, 11 Aug 2009, Bob Bedford wrote:

I'm trying to translate a "old" website from table to CSS.

What for?

Because tables are slow and they aren't done for managing the website
"template". CSS does it far better.
Also for SEO there is less text with CSS than with tables wich is better.
I'm also translating my entire site to xhtml, so this is the good time to do
so.

Bob

#6

Bob Bedford wrote:

Quote:

I'm trying to translate a "old" website from table to CSS.

What for?

Because tables are slow

Do you have actual evidence of this? Tables aren't slow especially if you
use table-layout: fixed. Surely it's risky, probably too risky in this case,
judging from the available evidence.

Quote:

and they aren't done for managing the website "template".

Was CSS?

Quote:

CSS does it far better.

Do you have actual evidence of this?

Quote:

Also for SEO there is less text with CSS than with tables wich is better.

Now I know you don't have actual evidence for your statements.

The main point here is that it is generally counter-productive to change
existing design, instead of complete redesign. Especially if it's an old
site, it probably has all kinds of specialties, oddities and tricks, which
tend to crumble down if you make a wrong move in your modifications.

For new sites, and for complete rebuilds, it would be a different issue.
Even then, it really depends, though of course the main idea should be to
handle visual appearance using CSS as far as feasible.

Quote:

I'm also translating my entire site to xhtml, so this is the
good time to do so.

This is sufficient for proving that you are doing the wrong thing. There's
an old saying in programming that there is always someone who is rewriting
working code, to clean it up or to speed it up, and it seems to apply web
authoring as well.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

#7

Gazing into my crystal ball I observed "Bob Bedford" <bob (AT) bedford (DOT) com>
writing in news:4a81b418$0$9113$5402220f (AT) news (DOT) sunrise.ch:

Quote:

"Adrienne Boswell" <arbpen (AT) yahoo (DOT) com> a écrit dans le message de news:
Xns9C646B96A5309arbpenyahoocom (AT) 188 (DOT) 40.43.213...
Gazing into my crystal ball I observed "Bob Bedford"
bob (AT) bedford (DOT) com> writing in
news:4a819f94$0$9116$5402220f (AT) news (DOT) sunrise.ch:

Hi everybody,

I'm trying to translate a "old" website from table to CSS.

Please provide a URL to your attempts so far.
Hello Adrienne,

thank you for your help.

I'm actually working locally, I can't put it online yet.

You really need to put something up on a public server somewhere.

Reasons why you need to do this: what you copy and paste here -
A) may not be the same thing that is in your document
B) may not include something that is in the original document, which is
relavent to the problem

Your ISP may have given you some space that you could use, or you could
use a free hosting provider.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

#8

Bob Bedford wrote:

Quote:

I'm also translating my entire site to xhtml, so this is the good time
to do so.

Why?

* http://www.webdevout.net/articles/beware-of-xhtml
* http://www.spartanicus.utvinternet.ie/no-xhtml.htm

--
-bts
-Friends don't let friends drive Windows

#9

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> a écrit dans le
message de news: h5sp08$r8t$1 (AT) news (DOT) eternal-september.org...

Quote:

Bob Bedford wrote:

I'm also translating my entire site to xhtml, so this is the good time
to do so.

Why?

* http://www.webdevout.net/articles/beware-of-xhtml
* http://www.spartanicus.utvinternet.ie/no-xhtml.htm

--
-bts
-Friends don't let friends drive Windows

Thank you for your links.

This brings me more questions than answers !!! but in this case it helps me
see that I've readed only one opinion (the XHTML opinion).

Now about my presentation. I use tables to manage the layout of my website.
I've readed that the table is shown only when all elements are loaded.
Unfortunately, I download an image from an external website (Xiti), wich is,
often, very slow. I also have some google ads wich are also sometimes slow.
So my entire page seems to be slowed by the external content and one of the
solution was to put everything in DIVS instead of table cells (As I've
understood)

Is that correct ? When I show my page it's the actual feeling I've. It
sometimes seems to freeze before showing all the page. On other websites, I
can see the elements showing one after the other.

If the tables are a correct way to manage the layout of a website, then I
may leave it as it is now, and focuses on more interesting features for my
website.

Thank you for you help.

#10

Bob Bedford wrote:

Quote:

"Beauregard T. Shagnasty" wrote:
Bob Bedford wrote:
I'm also translating my entire site to xhtml, so this is the good time
to do so.

Why?

* http://www.webdevout.net/articles/beware-of-xhtml
* http://www.spartanicus.utvinternet.ie/no-xhtml.htm

Thank you for your links.

This brings me more questions than answers !!! but in this case it
helps me see that I've readed only one opinion (the XHTML opinion).

XHTML may be a viable option sometime in the future when IE6,7,8,9 are
no longer in use... :-/

Quote:

Now about my presentation. I use tables to manage the layout of my
website. I've readed that the table is shown only when all elements
are loaded. Unfortunately, I download an image from an external
website (Xiti), wich is, often, very slow.

Is this a changing image? If not, can you copy it to your own server?

Quote:

I also have some google ads wich are also sometimes slow.

Aah, no bother here. Those don't display in my browsers.

Quote:

So my entire page seems to be slowed by the external content and one
of the solution was to put everything in DIVS instead of table cells
(As I've understood)

I'm sure not using tables would speed things up a bit for most visitors.
Normally there is less code to parse when using a div/css layout.

Quote:

Is that correct ? When I show my page it's the actual feeling I've.
It sometimes seems to freeze before showing all the page. On other
websites, I can see the elements showing one after the other.

If the tables are a correct way to manage the layout of a website,
then I may leave it as it is now, and focuses on more interesting
features for my website.

Tables aren't necessarily 'wrong' but do present some challenges. I
haven't used tables-for-layout since the last millennium.

--
-bts
-Friends don't let friends drive Windows