Moving to CSS

Topic

New Reply

I have the following in pure HTML and it looks like I want it to.

    

      

------------ :: Welcome To My Website :: ------------

    

I want to move to CSS but can not figure out how to make it look right.

I have the following css file

/* Body Sets the Width 720 that the table used to */
body {
	width: 720px;
	margin: 0px;
	padding: 0px;
	
	
}

/* Defines the header width and location */

div#header {
	width: 720px;
	height: 70px;
	background: rgb(192,192,192);
	font-size: 160%;
	text-align: center;
	vertical-align: middle;
}

and the following html

	

		 ------------ :: Welcome To My Website :: ------------
	

What am I doing wrong?

Reply | Quote

Replies

You’re using the DIV tag in the source to replace the HTML code for a table. CSS can’t and will never do this; you still need to define the table and other elements using standard HTML. Using CSS will allow you to define the appearance of the table, but not substitute the actual code used to create it.

Thus, your code should look like this:

------------ :: Welcome To My Website :: ------------

and your CSS would look like this:

.header {
background: #C0C0C0;
border: #808080;
border-width: 2px;
font-size: 160%;
height: 70px;
margin: 1px;
padding: 0px;
text-align: center;
vertical-align: middle;
width: 720px;
}

If you want to work with CSS, then you should consider using TopStyle to make your life easier. I use the pro version, but the free version may do all you need.

Try the code above and see if it works for you.

Reply | Quote

(Edited by WyllyWylly on 19-Dec-05 15:33. Added URL code to make link active.)

Am I incorrect, then, in my understanding that it is possible to entirely replace tables with css?

I am working from http://www.keithjbrown.co.uk/vworks/design/design_2.shtml%5B/url%5D which says you can, I just can’t get it to work right…

Is it just my choice of layout that won’t work?

Reply | Quote

You’re not incorrect in your understanding – just in the execution. I wasn’t clear on what you were trying to do. Do you have a live link to your code so that we can see how it renders in the browser?

Reply | Quote

(Edited by Leif to make link live – see the quick guide and/or Help 19 – it’s really not that difficult and is very helpful to others!)

http://www.teamtj.net/test/%5B/url%5D

table.html is using table tags DFindex.html is my attempt at CSS.

Reply | Quote

(Edited by jscher2000 on 19-Dec-05 12:33. )

Here, you do not need a table because you are simply using the table to create a box. You can create a box using the

element and then style that box, and its contents, using CSS. Check out the attached example.

Added: I just checked in IE and the heights are not quite a match. You might have to tweak the style properties for the

---

element some more.

Reply | Quote

That’s pretty close to perfect, thank you!

Reply | Quote

Upon further thought, the

---

elements are being used to create top and bottom borders on the paragraph, so you could try using border properties instead, as per the attached. Again, the rendering in IE is strange, so if you need beveled edges, you will have to experiment around.

Reply | Quote