tables or css positioning?

**dethfire** · May 12, 2003, 13:17

which is better?

**mancroft** · May 12, 2003, 13:25

Personally, i recommend css. it gives you far more control and you can get different effects.

**Chuckie** · May 12, 2003, 13:34

Originally Posted by mancroft

Personally, i recommend css. it gives you far more control and you can get different effects.

I agree but it also depends on the audence, and what browsers they use (i.e NN 4.x). Also if the data are from a database then tables work much better.

**dethfire** · May 12, 2003, 13:55

Any ideas why this doesn't work? Don't pay any attention to what the text says. The positioning just doesn't work and the width doesn't make the text into a box.

Code:

<style type="text/css">

.right {position:absolute; left=500px; top=200px; width=200px}
.left {position:abosolute; left=30px; top=200px; width=200px}
.top {position:absolute; left=200; top=20px; width=200px}

</style>

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<LINK href="test.css" rel="stylesheet" type="text/css">
<title>XHTML and CSS test</title>
</head>

<body>

<div class="left">
The heading is placed 100px down from the top of the document, and 100px to the right from the left side of the document. The paragraph is placed 200px down from the top of the document, and 100px to the right from the left side of the document. 
</div>

<div class="right">
The heading is placed 100px down from the top of the document, and 100px to the right from the left side of the document. The paragraph is placed 200px down from the top of the document, and 100px to the right from the left side of the document. 
</div>

<div class="top">
This is the heading
</div>


</body>

</html>

**vischo** · May 12, 2003, 14:16

If the first section of code is your external stylesheet, you'll need to take out the <style> tags.

**mancroft** · May 12, 2003, 14:20

.top {position:absolute; left=200; top=20px; width=200px} should have left:200px; ie no = and px after the number

check all the other css entries for the same errors.

**vgarcia** · May 12, 2003, 15:49

Your <link> tag should be lowercased in XHTML; actually, all elements and quoted attributes should be lower-cased (well, enumerated sets of attributes with limited values, i.e. input type="text").

Also, chalk up another vote for CSS layout. More flexibility than table-based layouts if you ask me

.

Originally Posted by Chuckie

Also if the data are from a database then tables work much better.

How so? If the data needs to be represented in a tabular format then yes, tables will work better. However, if your database record is a block of text, how would a table be a better match than a <p> tag?

**dethfire** · May 12, 2003, 15:52

goto http://physicspost.com/temp/index.html

for some reason my left div isn't responding to the 200px top position

also is css positioning alot of trial and error, how can I find out the dimensions I need?

**vgarcia** · May 12, 2003, 16:20

You have a typo. It's "position: absolute;", not "abosolute".

**redux** · May 12, 2003, 16:22

Originally Posted by vgarcia

Your <link> tag should be lowercased in XHTML

and it should be self-closing, with a slash at the end.

Code:

<link href="test.css" rel="stylesheet" type="text/css" />

**redux** · May 12, 2003, 16:24

Originally Posted by dethfire

how can I find out the dimensions I need?

you work out the layout first, doing a rough sketch on paper or in a graphics app, to get all your measurement...

**dethfire** · May 12, 2003, 16:26

why doesn't xhtml give me an error when I mess up like that? whats the use of xhtml if it doesn't care if I do something wrong?

**vgarcia** · May 12, 2003, 16:31

Originally Posted by dethfire

why doesn't xhtml give me an error when I mess up like that? whats the use of xhtml if it doesn't care if I do something wrong?

The error was in the CSS, not the XHTML. Also, your CSS did generate an error: namely, your positioning wasn't correct!

**vgarcia** · May 12, 2003, 16:33

Originally Posted by redux

and it should be self-closing, with a slash at the end.

Code:

<link href="test.css" rel="stylesheet" type="text/css" />

D'oh! I missed that! Good thing we have eagle-eyes like redux on the forums

!

**redux** · May 12, 2003, 16:33

and if you do mess up your xhtml, many browsers will exhibit weird behaviour...mostly going into quirks mode...

**redux** · May 12, 2003, 16:34

Originally Posted by vgarcia

D'oh! I missed that! Good thing we have eagle-eyes like redux on the forums

!

well, i've got 4 eyes, so that helps

**vgarcia** · May 12, 2003, 16:43

Originally Posted by redux

well, i've got 4 eyes, so that helps

Me too, sorta (contact lenses

).

**dethfire** · May 12, 2003, 16:45

and if you do mess up your xhtml, many browsers will exhibit weird behaviour...mostly going into quirks mode

lol quiks mode? wtf, this seems like poor standards to me if the only way to express an error is to go into quiks mode, my god, lol

**vgarcia** · May 12, 2003, 16:53

Originally Posted by dethfire

lol quiks mode? wtf, this seems like poor standards to me if the only way to express an error is to go into quiks mode, my god, lol

Quirks mode is how most table-based layouts are rendered, since the browser doesn't know how else to render non-standard content. If you can't create valid content, why/how can the browser know how to render it? It's a web browser, not a mind reader

.

**dethfire** · May 12, 2003, 17:06

It's a web browser, not a mind reader

Thats not what the sales guy told me!!!

**redux** · May 12, 2003, 17:39

as a sidenote: the browser's job is to do the best it can to interpret and display a page. it would be a sad world if, every time it hit a page of someone trying to do standards-compliant code, and failing miserably, it would come up with a popup dialog saying "the author had no idea what standards are. proceed anyway ? yes | no | whatever".

the burden is on the page authors to test their creations in the appropriate tools. with the easy availability of online validators, and tools such as tidy http://www.w3.org/People/Raggett/tidy/ , it's really not rocket surgery....

**dethfire** · May 12, 2003, 17:52

it's really not rocket surgery....

is that a flame??

**redux** · May 12, 2003, 17:55

not really, no...my flames are usually quite recognisable as such

The SitePoint Forums have moved.

User Tag List

Thread: tables or css positioning?

Thread Tools

Display

tables or css positioning?

Bookmarks

Bookmarks

Posting Permissions