PDA

Click to See Complete Forum and Search --> : Without tables?

GreyDog
01-31-2005, 04:25 PM
Hello..

I've been surfing around here for about a week now & have learned a bunch & had many questions answered without even having to ask them!

thanks:D

My question..

I'm trying to update one of my sites & created a logo bar that suits my needs. (looks ok & resizes) ...but its made of tables & I'm having trouble trying to figure out how to do the same thing without them. I'm also having trouble getting it to work in ff

any pointers & critiques of the page are welcome.

..I'm a hobbyist, go easy on me ;)

http://www.gdawg.net/test/hq-test.html
phpnovice
01-31-2005, 04:29 PM
Originally posted by GreyDog
..I'm a hobbyist, go easy on me ;)
At this board, there is no such thing as going "easy" on anything. Too many "people" here (and I use that term graciously) have nothing better to do than to criticize.

Good luck. :(
soccer362001
01-31-2005, 04:45 PM
The best place to start is to learn CSS. You can take a look at www.w3schools.com
PeOfEo
01-31-2005, 04:46 PM
Originally posted by GreyDog
Hello..

I've been surfing around here for about a week now & have learned a bunch & had many questions answered without even having to ask them!

thanks:D

My question..

I'm trying to update one of my sites & created a logo bar that suits my needs. (looks ok & resizes) ...but its made of tables & I'm having trouble trying to figure out how to do the same thing without them. I'm also having trouble getting it to work in ff

any pointers & critiques of the page are welcome.

..I'm a hobbyist, go easy on me ;)

http://www.gdawg.net/test/hq-test.html well ideally you would not use tables. The proper way to lay your site out would be with css. CSS involves more trial and error but the end result is much better. CSS will linerize properly for those who do not support it, it will save bandwdith, and it will keep your code cleaner. The problem with using tables is that they are not designed for layout. Tables were originally intended for data and to use them for anything other then that would be incorrect... it just goes against their purpose. That is called unsemantic markup. If you get a non graphical or audio braille browser it is not going to handle the tables well. www.bluerobot.com has some good layout examples that use css, they are basic but they sort of explain how it all works.
ray326
01-31-2005, 11:51 PM
Originally posted by phpnovice
At this board, there is no such thing as going "easy" on anything. Too many "people" here (and I use that term graciously) have nothing better to do than to criticize.

Good luck. :( Interesting. Ironic but interesting.
ray326
02-01-2005, 12:11 AM
The page design looks fine. The markup is typical 20th century HTML concerned more with presentation than content and repleat with deprecated elements. Standard fair on the web today. The page would be an easy conversion from table to css layout because of its overall simplicity of both content and design. Rather than showing us your starting point, show us where are now. I can tell you from a first glance at the page that all the Javascript, tables and deprecated tags can probably be eliminated and I wouldn't be surprised if the converted page was half the size of the original. So give us a link to the current version and it will be easier to give useful suggestions.
NogDog
02-01-2005, 08:52 AM
As a "for instance", here is your top banner without the use of tables. (I'm not saying this is the best way to do it, and it fails - at least in IE - if you make it too narrow, but it might give you some ideas.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #cc9 url("http://www.gdawg.net/test/beige147.jpg") repeat 50% 50%;
}
.banner {
background: black url("http://www.gdawg.net/test/rtside2.gif") no-repeat 100% 0;
height: 120px;
margin: 30px 50px 10px 140px;
padding: 0;
min-width: 600px;
}
</style>
</head>
<body>
<img src="http://www.gdawg.net/test/ship1.gif" alt="picture of ship"
style="float: left; margin: 14px 0 0 30px;width:200px; height:185px">
<p class=banner>
<img src="http://www.gdawg.net/test/libflag1.gif" alt="picture of flag"
style="float: right; margin: 0;width: 164px; height:115px">
<img src="http://www.gdawg.net/test/elb-log2a.gif" alt="Ellaybe Island"
style="margin-left: 30px; width:287px; height:115px">
</p>
</body>
</html>
zingmatter
02-01-2005, 09:00 AM
Originally posted by NogDog
As a "for instance", here is your top banner without the use of tables. (I'm not saying this is the best way to do it, and it fails - at least in IE - if you make it too narrow, but it might give you some ideas.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #cc9 url("http://www.gdawg.net/test/beige147.jpg") repeat 50% 50%;
}
.banner {
background: black url("http://www.gdawg.net/test/rtside2.gif") no-repeat 100% 0;
height: 120px;
margin: 30px 50px 10px 140px;
padding: 0;
min-width: 600px;
}
</style>
</head>
<body>
<img src="http://www.gdawg.net/test/ship1.gif" alt="picture of ship"
style="float: left; margin: 14px 0 0 30px;width:200px; height:185px">
<p class=banner>
<img src="http://www.gdawg.net/test/libflag1.gif" alt="picture of flag"
style="float: right; margin: 0;width: 164px; height:115px">
<img src="http://www.gdawg.net/test/elb-log2a.gif" alt="Ellaybe Island"
style="margin-left: 30px; width:287px; height:115px">
</p>
</body>
</html>


Shouldn't that be:

<div class="banner">
<img src="http://www.gdawg.net/test/libflag1.gif" alt="picture of flag"
style="float: right; margin: 0;width: 164px; height:115px">
<img src="http://www.gdawg.net/test/elb-log2a.gif" alt="Ellaybe Island"
style="margin-left: 30px; width:287px; height:115px">
</div>

Also, why define the style in the head section and inline too?
NogDog
02-01-2005, 09:16 AM
Originally posted by zingmatter

...Also, why define the style in the head section and inline too?
Because it was just an experiment/proof-of-concept, by no means a finished product.