Jump to content

tool to convert html site to css?


htmlnewbie23

Recommended Posts

I have a very large site created over a decade ago entirely with html 3. It contains a little JavaScript code and several php search engines. Works fine in all browsers.I would like to convert it to css which I am just starting to learn mainly for ease of maintenance.Is there a tool that will help with this or is it a matter of re-writing all these pages over again.If no tool is available are there some tips, shortcuts, or advice on how to proceed?Is there any reason to change any of the html code to xhtml?If the site works fine, is there a really good reason to convert it to css?Thanks.

Link to comment
Share on other sites

There is no tool I am aware of. If you used table(s) to do this, I would work almost from scratch, with this difference: Make a sketch of your page, accounting for every visible feature. Note (in pixels) the positions of each feature relative to the outside frame and/or the nearest adjacent feature. Note colors, widths, heights, fonts, paragraph breaks, and actual text. You will need to reproduce these in CSS.By feature, I mean a block of color, text, an image, a button, whatever. What I'm asking you to do is to visualize the page in terms of your actual content, not as things positioned in table cells. If you were really good a table layouts, you probably have colspans and adjacent cells with the same background, and so on, and modern techniques let you break away from that.For every space divided into visually distinct columns, think about creating adjacent divs with a float property (usually, float:left). Their widths will need to be defined, relatively or in fixed dimensions, like pixels.All other content should be thought of as a series of horizontal areas arranged in a vertical sequence. What you once thought of as a table row can usually be translated into a div. Most of your page elements will be contained by a div.For the most part, do not be tempted by absolute positioning. It can seem at first to be a great solution. It's not. Your best positioning techniques are height, width, margin, padding, float, and clear. (Make sure you understand the difference between margin and padding.As with tables, you can add a temporary border around elements to help visualize the way they are positioning. Just remove them when they are done.For results that look the same in all browsers, use a strict doctype. Because yesterday's future did not turn out as planned, there is no advantage at all to using XHTML. Stick with HTML 4.01. (If you have a boss that insist upon using XHTML, of course you must do that.) But it is good practice to use a lot of XHTML rules, like using lowercase for all tag attributes, putting all attribute values in quotation marks, and always specifying a unit (like px) whenever you specify an attribute or CSS value.That's a start. :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...