How to convert to CSS?

[Jan]

Hey!

I maintain a website for this company, and I was wondering if there is any chance that it could be converted to CSS (no tables) and how this would be done. I have attached a screen shot of the website with no text or pictures. I would really appreciate it if someone could help me out, 'cause I'm really new to CSS. Thank ya.

[Spook]

Hi.

"Just about" anything can be done with CSS, but early on in the learning curve you will spend a lot of time getting very frustrated because things don't behave exactly how you want them to in every browser.

A link to the current website would help determine exactly what you are up against as it's difficult to know which bits are images and which text etc..

Spook.

[ronaldb66]

Jan,

it would be really helpful if you could post the link to an actual page of the site; the switch-over to CSS has everything to do with the document structure.

Anyway, it basically boils down to this:

Identify the structure of the document. Think along the lines of:
- header,
- menu,
- main content,
- footer, perhaps; but also:
- headings, paragraphs, quotes, lists, etc.
Make sure the document is structured properly, all content is in the right place, etc;
Strip the document of all presentational elements and attributes;
Prepare the cleaned document for CSS: where standard HTML elements don't - sufficiently - apply, or where generic - div and span - elements are used, include appropriate classes and ids;
Create a style sheet including all the necessary styles for the elements used, where needed with classes or ids.

Especially the last step will be the most difficult one, but it's hard to give any specific advice without seeing an actual page.

If you feel posting a link to the real site is inappropriate or unwanted, try and create a representative example page using the exact same code but with any inappropriate or sensitive content replaced by dummy content, and place it online somewhere.

Well, Spook beat me to it thanks to a bogged-down server...

[Jan]

Sorry guys for not posting the real thing, so here goes: http://www14.brinkster.com/mi01/example.html. I'm totally clueless how to convert it! All help is really appreciated! :D


~Jan

[ronaldb66]

Ahhh... let's see...

Background: whatever you like (the gif didn't show up), using either the background-color or the background-image property of the body element;
Header: whatever box element comes in handy (h1, div), dark blue background;
Center section: one div, width as header / footer, content (image) as is, white background, some padding / margins and a border;
Text blocks on the left side: left-floating blocks, p elements perhaps, yellow (eeww!) background;
Footer: like header;
The checkerboard thingy underneath the center section: I'm very tempted to advice a table here...

Anyway: you can get rid of most or all tables, and should implement all those deprecated attribs as styles.
To make everthing line up as desired some experimenting with margins and padding has to be done, and all this through styles of course.