Using CSS to make a table based site

liunx · Jan 11, 2008

Okay, I already posted about my site on the General forum, but I have a new question which is more suited for here. Everyone on my General thread commented on how my HTML could be improved greatly by using CSS. The page was basically 3 tables, all on top of each other on the left margin. I asked how to get the bottom table to the middle top, I basically wanted it to a "news" section. They gave me some code, and it worked, sort of. Here is a link to my current page: <a class="postlink" href="http://www.geocities.com/darthraid//index.htm">http://www.geocities.com/darthraid//index.htm</a> if you need the source you can just view it.

I want to use CSS, as it seems easier, but I can't seem to duplicate the way my tables look. Can table properties be put into CSS? Or do I need to define all the table properties within <table></table> code? If anyone can explain that would be great, and actual working code would even be better. I don't know a ton about HTML, but here is a site my friend made, which I was basically trying to reverse engineer to understand how to do it myself: <a class="postlink" href="http://www.apocalypseguild.com/">http://www.apocalypseguild.com/</a> If that can be replicated exactly w/ CSS, that is what I need to know. Thanks.

Brandonit's better to make one parent table like:

<table border="0" width="100%">
<tr>
<td width=25%>your leftside tables within</td>
<td width=50%>your middle tables within</td>
<td width=25%>your rightside tables within</td>
</tr>
</table>

and that works on every browserBoy that was fun. Alright, beating a dead horse, click on both links in my signature. One is to find out what a Doctype is, and what it's used for. The other one is so you can validate your code before posting it. I know Geocities is going to make your code invalid, but as long as you can make sure your stuff is valid, that's all we can hope for at this point. I would suggest that you do add a Doctype to your code, and then validate your copy to just get a feel of validating. Don't just take my code and run with it.

I went and did a complete recode validating against XHTML 1.1 for my own pratice. The only quirk that I couldn't figure out off hand was when I shifted some of your text to the right the background color only covered the area where the text was at. If I just left it normal, the background color filled the whole div tag. If any CSS guru has any ideas, I'm all ears. It's the subHeader class for those wondering.

Also note that if you cut out the styles code and then copy it, without the style tags, into a file that's saved with a .css extension, you allow yourself to have those stlyes be added to a page automatically as long as you have the CSS file and your page in the same directory. If you put a page in a sub folder than you just need to change the href in the link tag that points to the CSS file to ../styles.css instead of styles.css. External style sheets, it's a beautiful thing.

Since you probably don't have a clue as to what most of the CSS does, play around with it until you get a better understanding.

Anyway, here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Brandon is a nub at webpages</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" title="Default" media="screen" href=http://www.webdeveloper.com/forum/archive/index.php/"styles.css" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"suxpageweb.jpg" width="780px" height="128px" alt="I suck at the webpage" />
</div>
<div>
<div class="boxOne">
<div class="header">:: Your page rules ::..</div>
<div class="subHeader">Mine Sux</div>
<div class="textArea">
<div class="title">Next Battle</div>
<div class="info">Jan 12 2003 [Sat]</div><br />
<div class="title">Time [est.]</div>
<div class="info">7:00pm</div><br />
<div class="title">Versus</div>
<div class="info">Strike Force / Death Knights</div><br />
<div class="title">Practice Time</div>
<div class="info">1 hour before match</div>
</div>
</div>
<div class="boxTwo">
<div class="header">:: It will take ::..</div>
<div class="subHeader">A while to learn this</div>
<div class="textArea">
<div class="title">Next Battle</div>
<div class="info">Jan 12 2003 [Sat]</div><br />
<div class="title">Time [est.]</div>
<div class="info">7:00pm</div><br />
<div class="title">Versus</div>
<div class="info">Strike Force / Death Knights</div><br />
<div class="title">Practice Time</div>
<div class="info">1 hour before match</div>
</div>
</div>
</div>
<div class="news">
<div class="header">:: News ::..</div>
<div class="subHeader">AP|Events|</div>
<div class="textArea">
<div class="title">Next Battle</div>
<div class="info">Jan 12 2003 [Sat]</div><br />
<div class="title">Time [est.]</div>
<div class="info">7:00pm</div><br />
<div class="title">Versus</div>
<div class="info">Strike Force / Death Knights</div><br />
<div class="title">Practice Time</div>
<div class="info">1 hour before match</div>
</div>
</div>
</body>
</html>Hmm, this is odd. The right border on the news section is missing in Mozilla 1.2.1, but it's there for IE 5.5 and 6.0 and Netscape 7.0. This also only starts to happen when I view it at 1400X1050. Smaller resolutions are fine. I'll mark it up to a bug in Mozilla. They are testing version 1.3 for Mozilla, so it might just go away. The bug that is.

I'll download the test version and see if they caught it yet.

The real reason I ment to post was to add how I did change some of your code to be more cross browser friendly.

If you want to learn more about using CSS with tables, pick up Eric Meyers on CSS. I only use tables when I actually want to create a tabel of info.Awesome man. I looks great. I just put it up and it looks almost perfect. I haven't had time to really pick through it yet and see how changes affect it etc but, I have this to say. On my original, the tables, which have now been replaced w/ CSS had a beveled/embossed edge to them. They looked like they had some depth/raised edges. How would I do that throught he use of CSS?

BrandonThat's info which doesn't fall into the stuff I know by heart. I would have to look it up to see. It didn't look like it was showing up in Mozilla with your original code so I was wondering if it was more of a IE thing. I think IE does more with the border colors for tables. Since I was trying to just get it done, that was one shortcut I took. Plus, I tend to skip browser specific stuff as much as possible.Okay cool. I used the outset and inset commands, they are similar but not quite the effect I want. I'm sure there is a way to do it, but I just don't know how. I basically want my boxes to look like this: <a class="postlink" href="http://www.apocalypseguild.com/">http://www.apocalypseguild.com/</a> Still messing with it.

Brandon

I got a new problem, how do I get that box in the middle to sit under the news box: <a class="postlink" href="http://www.geocities.com/darthraid/">http://www.geocities.com/darthraid/</a>

Using CSS to make a table based site

liunx

Guest