...

View Full Version : HTML to CSS



seosubmissionon
02-13-2008, 11:39 AM
Hi friends
can anybody advice me about how to convert whole html web page to CSS.
I can create html layout but Is there any way or tool which is useful to convert html to whole CSS withourt any table tag.

Thanks in advance

effpeetee
02-13-2008, 12:07 PM
Friend, I think that you mis-understand. HTML is not converted to css. Css merely removes the design of the page to a "style sheet" and leaves html to carry the content.
People have used tables and invisible gif's to manipulate the design. This has meant that in a large website, all the pages have had to be individually changed if an overall outline was to be altered. Using css, the css page alone needs altering. One page instead of many.

As to your question, the answer is very wide ranging so, not trying to self-promote, My "Sources" program contains very many links to useful sites.

http://exitfegs.co.uk/Sources.html

This one may prove particularly interesting.

http://www.hotdesign.com/seybold/

Frank

VIPStephan
02-13-2008, 12:57 PM
Friend, I think that you mis-understand. HTML is not converted to css. Css merely removes the design of the page to a "style sheet" and leaves html to carry the content.
People have used tables and invisible gif's to manipulate the design. This has meant that in a large website, all the pages have had to be individually changed if an overall outline was to be altered. Using css, the css page alone needs altering. One page instead of many.
[…]

Very good reply, Frank. I see you’re making progress. :)

effpeetee
02-13-2008, 01:17 PM
Very good reply, Frank. I see you’re making progress.

With (among others) your valuable help.

Frank

jerry62704
02-13-2008, 03:35 PM
I recently went throught this exercise. But first let's make sure we are starting from the basics.

HTML is a way of providing information while CSS is a way of presenting it. They are and do two different things. You probably used tables to divide the information on your screen and put it in specific places. IOW, you are using a table for presentation of information. At least I was.

So then I decided to "convert" the page to CSS, that is, replace the presentation by table with presentation by CSS. When I did this, some pages got smaller and some got larger.

The way I did it was to use Textpad (at work) and Dreamweaver (at home) to do global search and replace operations. I considered <tr> as a <div> with specific classes (as it repeats and therefore "id" wasn't appropriate) such as margins and padding. As my table was consistent most of the time, it wasn't too hard to replace following </div> tag as the table had following tags.

Then I manually removed the rest of the stuff that wasn't needed and the page was 90&#37; converted.

ahallicks
02-13-2008, 04:07 PM
...way I did it was to use Textpad (at work) and Dreamweaver (at home) to do global search and replace operations. I considered <tr> as a <div> with specific classes (as it repeats and therefore "id" wasn't appropriate) such as margins and padding. As my table was consistent most of the time, it wasn't too hard to replace following </div> tag as the table had following tags...

And then you went and looked up semantics in order to clean up all those divs that shouldn't be there, when tags exist to complement the content within, didn't you!? :)

jerry62704
02-13-2008, 08:31 PM
What <div> tags were not needed? How are you using "semantics" differently than I am?

Apostropartheid
02-13-2008, 08:33 PM
It's called Divitis (http://csscreator.com/?q=divitis).

jerry62704
02-13-2008, 09:29 PM
Interesting read. As I'm always willing to learn and as I'm not an expert in CSS, can you take a glance at my page and see if it can be improved?

There are known issues such as the back ground image only going half way down the page and I had to pull the footer as it was showing up half way up the page (perhaps related).

Basically, I converted a page that had a lot of images centered on the page. I don't want them horizonal at all.

It can be found at: www.democratsforum.com/O_Bush_Poll1.php

[edit - this page has many more divs and may illustrate bad code better]

In reading the article (yes, I do read these things :)), I perhaps could eliminate the "contentContainer" and put that in the pageContainer. Further, If I make that a "position:relative" it might take care of the footer (position:absolute; bottom:0; I would guess) showing up in the middle of the page.

Apostropartheid
02-13-2008, 11:01 PM
Oh dear.

You see the numbers and tables the page? Where do they belong? Yes, in a table.

tables aren't the malevolent evil things we've come to know one their own; it's just that people misuse them. Legit tables are still needed, as that's what the table element is for: tabular content.

VIPStephan
02-14-2008, 12:20 AM
Haha! That reminds me of that thread at the Geek News and Humor forum (http://codingforums.com/showthread.php?t=87711&highlight=daily). :)

jerry62704
02-14-2008, 05:08 PM
I'm coming to agree that not all tables are bad. I wanted to learn CSS better so I went to the effort just to force myself to learn it in a real world situation.

At work, I'm looking at a page that has tables and I think I had best leave it as a table. CSS has a problem with containing horizonal cells that tables don't have.

abduraooft
02-14-2008, 05:13 PM
At work, I'm looking at a page that has tables and I think I had best leave it as a table. CSS has a problem with containing horizonal cells that tables don't have.
Not really. You have to use tables, only if you are going to display tabular data. If you are going to make a layout/structure to your document, you've to use CSS to position different elements. All layouts are possible with CSS and this will simplify your work.

jerry62704
02-14-2008, 05:18 PM
The table had four cells. If you enlarge the text, the entire row is adjusted. With CSS, if you enlarge the text in a container, the other ones are not enlarged so you start getting loopy spacing.

the format would be something like:

text1 text1 text1 number1 text2 text2 text2 number2
text3 text3 text3 number3 text4 text4 text4 number4
text5 text5 text5 number5 text6 text6 text6 number6

I do have to see if the divs are cleared...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum