Tables site to CSS?

  • boiselifer
  • Beginner
  • Beginner
  • User avatar
  • Posts: 49
  • Loc: Boise of course. =)

Post 3+ Months Ago

What would be the best way to convert an old site to CSS in dreamweaver?

Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

You're gonna have to go through it and hand code it.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

I would recommend buying a copy of the book "Eric Meyer on CSS". The first chapter is all about converting from table-based design to css-based design with limited use of tables. It is possible to completely get away from using tables in layout, but that book will get you started in the right direction. You might even be able to find the first chapter online for free if you do a google search.

Try it out. Get it from the library if you can. But that book is worth its weight in gold so you might as well buy it. Eric Meyer is a guru of CSS.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Didn't know he had a book, but I've been following his work for years.
http://www.meyerweb.com/eric/css/
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

He's got a few books. I collect them all. :) And he recently published "More Eric Meyer on CSS"--another excellent book of CSS tutorials.
  • crazynorvegian
  • Beginner
  • Beginner
  • crazynorvegian
  • Posts: 62
  • Loc: Austin, TX

Post 3+ Months Ago

pardon my ignorance, but I don't understand why tables are so terrible. i'm sure someone wouldn't mind enlightening me... :wink:
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Tables aren't bad for when used appropriately. The use of tables as a means for controlling layout is becoming more and more discouraged because of the increased amount of "stuff" they put into the page.

That being said, CSS is still developing and is limited here and there. When you have to apply too many work-arounds to get what you want, you kind of kill the advantages of CSS.

But yeah, tables for tabular data is appropriate, but for layout, it's not.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

It's all symantics.

Excel uses tables. They're used to show data. Noob's use them to make pretty pictures and layouts but they're SUPPOSED to be used for data.

Same thing goes for the web.

p for paragraph
li for list items
em for emphasized text

i never understood how the heck links got named "a" though. they should have been "l". lol.
  • crazynorvegian
  • Beginner
  • Beginner
  • crazynorvegian
  • Posts: 62
  • Loc: Austin, TX

Post 3+ Months Ago

so in some oversimplistic sense, with css, you're using customized div's to do what's become common with table cells...? perhaps in some ways it is the common conflict between elegence and functionality...
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Well, with css, it certainly takes less code...

Code: [ Select ]
<table>
<tr>
<td width="20%">nav here</td>
<td width="80%">content here</td>
<tr>
</table>
  1. <table>
  2. <tr>
  3. <td width="20%">nav here</td>
  4. <td width="80%">content here</td>
  5. <tr>
  6. </table>


becomes...

Code: [ Select ]
<div id="nav">Nav here</div>
<div id="content">content here</div>
  1. <div id="nav">Nav here</div>
  2. <div id="content">content here</div>


It's hardly oversimplistic. CSS is common-sense, tables are a hack.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

That's only the HTML part. You're leaving out the CSS code and making it seem alot more minimalistic than it really is. Granted CSS still rocks :D
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

My bad. You're right. :lol:

It'd still only take a few css attributes to make it work though.

I bet, even with css, i could get the positioning right in fewer keystrokes than it'd take using tables.

But I'm sure you knew that... lol
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Code: [ Select ]
#nav {
width: 20%;
float: left
}

#content {
width: 80%
}
  1. #nav {
  2. width: 20%;
  3. float: left
  4. }
  5. #content {
  6. width: 80%
  7. }

Granted now you can do whatever the hell you want with the divs :D
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

I used to use floats for layout (cuz they work so great with mobile devices), but i recommend absolute/relative positioning these days if cellphones aren't an issue. lol.

Short code though, huh. Tables are never the way to go for layout.

Man, I kinda miss RTM. Dude was a good guy.
  • boiselifer
  • Beginner
  • Beginner
  • User avatar
  • Posts: 49
  • Loc: Boise of course. =)

Post 3+ Months Ago

Great feedback, thanks amigos!!
  • crazynorvegian
  • Beginner
  • Beginner
  • crazynorvegian
  • Posts: 62
  • Loc: Austin, TX

Post 3+ Months Ago

So as an exercise, i'm now attempting to redo a sliced images in a table site as purely css. Photoshop does it for you, but everything is absolutely positioned which is pretty useless. the problem i am encountering is in making div's inline (replacing successive <td> tags within a <tr> ) Should i be replacing elements that are supposed to appear inline with span's (since they are by defualt inline) or is there a css property i am unaware of that allows divs to be inline...

This
Code: [ Select ]
#nav {
width: 20%;
float: left
}
#content {
width: 80%
}
...
<div id="nav">Nav here</div>
<div id="content">content here</div>
  1. #nav {
  2. width: 20%;
  3. float: left
  4. }
  5. #content {
  6. width: 80%
  7. }
  8. ...
  9. <div id="nav">Nav here</div>
  10. <div id="content">content here</div>

was given to replace:
Code: [ Select ]
<table>
<tr>
<td width="20%">nav here</td>
<td width="80%">content here</td>
<tr>
</table>
  1. <table>
  2. <tr>
  3. <td width="20%">nav here</td>
  4. <td width="80%">content here</td>
  5. <tr>
  6. </table>

which says divs would be displayed inline, like cells in a row, but i haven't been able to get this to work....

suggestions?
  • crazynorvegian
  • Beginner
  • Beginner
  • crazynorvegian
  • Posts: 62
  • Loc: Austin, TX

Post 3+ Months Ago

I got a system working that basically replaces <tr> tags with <div class="row"> tags, and <td> tags with <span class="element"> tags with css as:
Code: [ Select ]
.row {
    clear:left;
    float:left;
    width:900px;
    margin:0px;
}
.element {
    float:left;
}
  1. .row {
  2.     clear:left;
  3.     float:left;
  4.     width:900px;
  5.     margin:0px;
  6. }
  7. .element {
  8.     float:left;
  9. }

and layout something like:
Code: [ Select ]
<div class="row">
    <span class="element">
        <img src="image1.gif" width="600" height="72">
    </span>
</div>
<div class="row">
    <span class="element">
        <img src="image2.gif" width="100" height="15">
    </span>
    <span class="element">
        <img src="image2.gif" width="300" height="15">
    </span>
    <span class="element">
        <img src="image2.gif" width="200" height="15">
    </span>
</div>
  1. <div class="row">
  2.     <span class="element">
  3.         <img src="image1.gif" width="600" height="72">
  4.     </span>
  5. </div>
  6. <div class="row">
  7.     <span class="element">
  8.         <img src="image2.gif" width="100" height="15">
  9.     </span>
  10.     <span class="element">
  11.         <img src="image2.gif" width="300" height="15">
  12.     </span>
  13.     <span class="element">
  14.         <img src="image2.gif" width="200" height="15">
  15.     </span>
  16. </div>

and this works in both firefox and IE.

This does exactly what i want, but is really no less cumbersome (though perhaps more flexable?) than using a table structure.... If i define the "row" class to have a word spacing of 0, and then remove the span's alltogether, like such:
Code: [ Select ]
.row {
    clear:left;
    float:left;
    width:900px;
    margin:0px;
    word-spacing: 0px;
}
...
<div class="row">
        <img src="image1.gif" width="600" height="72">
</div>
<div class="row">
        <img src="image2.gif" width="100" height="15">
        <img src="image2.gif" width="300" height="15">
        <img src="image2.gif" width="200" height="15">
</div>
  1. .row {
  2.     clear:left;
  3.     float:left;
  4.     width:900px;
  5.     margin:0px;
  6.     word-spacing: 0px;
  7. }
  8. ...
  9. <div class="row">
  10.         <img src="image1.gif" width="600" height="72">
  11. </div>
  12. <div class="row">
  13.         <img src="image2.gif" width="100" height="15">
  14.         <img src="image2.gif" width="300" height="15">
  15.         <img src="image2.gif" width="200" height="15">
  16. </div>

it works beautifully in IE, and is definitly much cleaner/efficient, BUT is a disaster in firefox, which tells me that this is obviously bad css form.

How can i clean this up to make it efficient and elegant, and still remain cross-browser compliant?
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Why do you have to place them with css? Just put images in the same row one after the other, new line use <br>.
  • crazynorvegian
  • Beginner
  • Beginner
  • crazynorvegian
  • Posts: 62
  • Loc: Austin, TX

Post 3+ Months Ago

because when you just have images right next to eachother, they don't abut... there is always a space between the images.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Only if there's a space in the html. Make sure there are no empty spaces or carriage returns between the img tags and it won't be an issue.
  • boiselifer
  • Beginner
  • Beginner
  • User avatar
  • Posts: 49
  • Loc: Boise of course. =)

Post 3+ Months Ago

I just found this tidbit.

Close your (tables) page, open it in Microsoft Word, and save it as a Web page. Your page will have CSS styles applied to it in place of <font> tags, but you may have to adjust some of hte style settings.

Post Information

  • Total Posts in this topic: 21 posts
  • Users browsing this forum: No registered users and 54 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.