Ahhh what the heck with css?!

Ok, this keeps happening and when I post the link, the people only go to the problem, which simply looks like it’s incomplete, so here’s the entire code… if someone could paste that onto a webpage and view it (previewing works fine, so just view it in non-edit mode).

this is the link that I have it at:
http://www.geocities.com/dancepartyusu/index.htm

viewing the source cuts the code off at <table>… why?

<html>
<head>
<title></title>
<style>
body {
font-family: arial, verdana;
background-color: #112233;
}

a {
color: #bb9900;

}

a:active {
color: #ccaa00;
}

a:hover {
color: #ddbb00;
}


table.navbar {
width: 750;
border: #aa8800 3px solid;
margin-top: -3px;
}

td.navlink {
color: #ccaa00;
width: 150px;
text-align: center;
font-size: 12px;
font-weight: bold;
}

td.leftcon {
color: #ddbb00;
width: 500px;
padding-left: 5px;
padding-right: 15px;
padding-bottom: 35px;
padding-top: 20px;
}

p.subdate {
color: #8888aa;
font-size: 11px;
border-bottom: #8888aa 1px solid;
margin-bottom: -12px
}

p.lip {
color: #ddbb00;

}

td.rightcon {
color: #ccaa00;
width: 300px;
padding-bottom: 35px;
border-left: #886600 3px solid;
}

p.ripe {
margin-left: 5px;
margin-right: 15px;
font-size: 13px;
}

td.footer {
color: #bbbbff;
font-size: 10px;
text-align: center;
font-style: italic;
border: #ccaa00 3px solid;
}

</style>
</head>
<body>
<table align="center" width="800" style="border-left: #000033 5px solid; border-right: #000033 5px solid;">
<tr>
<td background="images/gametimedark.jpg">
    <table align="center" width="800" border="0">
    <tr>
    <td>
<img src="images/cover.jpg">
    </td>
    </tr>
    </table>

<!--######################-->
<!--### NAVIGATION BAR ###-->
<!--######################-->
    <table class="navbar" align="center">
    <tr>
    <td class="navlink">
<a href="index.htm">
Home
</a>
    </td>
    <td class="navlink" valign="baseline">
<a href="about.htm">
About
</a>
    <td class="navlink">
<a href="recent.htm">
Recent
</a>
    </td>
    <td class="navlink">
<a href="constitution.htm">
Constitution
</a>
    </td>
    <td class="navlink">
<a href="contact.htm">
Contact
</a>
    </td>
    </tr>
    </table>

    <table align="center" width="800" border="0">
    <tr>

<!--####################-->
<!--### LEFT CONTENT ###-->
<!--####################-->
    <td class="leftcon" valign="top">

<p class="subdate">
3:45 PM 4/6/2006
</p>


<p class="lip">
DP is currently pending to become a USU recognized organization.  As a USU organization, DP will have benefits such as: Facility reservation/usage, limited copy/mailing per semester, and under qualifications, funding.  The benefits also come a few responsibilities.
</p>

<p class="lip">
Currently, other than a few "to-be" members, there are only two officers.  Four positions -- President, Vice-President, Secretary, and Treasurer -- are constant positions needed.  Only USU students may hold office (but non-USU students may still join DP), and two more are needed to fill all four.  The President and Treasurer positions have been filled.
</p>

<p class="lip">
Chances are that DP will not hold all its meetings in the Fun Park, where an actual DDR machine stands.  In fact, it's more likely that a few certain players supply their own console and dancepads.  Television sets are also needed.  I will check to see if the univeristy is able to supply me with one.  If not, 1-3 members will have to bring their TV during meetings to share (I'd bring my own television, but 48" is a rather large TV to be hauling around).
</p>

<p class="lip">
Tournaments, fund-raisers, and charity work will either be hosted in Fun Park or the Logan City Mall.  I am to schedule a meeting with the head manager of Fun Park and ask him if it is possible to at least drop the price of the DDR machine.  I'll also ask him about percentages if we were to hold charity events or fund-raisers there.  As for the mall, we would have to do as normal meetings and bring our own setups.  Tournaments will always be held at the Fun Park.
</p>

<p class="lip">
Tournaments, fund-raisers, and charity work will either be hosted in Fun Park or the Logan City Mall.  I am to schedule a meeting with the head manager of Fun Park and ask him if it is possible to at least drop the price of the DDR machine.  I'll also ask him about percentages if we were to hold charity events or fund-raisers there.  As for the mall, we would have to do as normal meetings and bring our own setups.  Tournaments will always be held at the Fun Park.
</p>

    </td>

<!--#####################-->
<!--### RIGHT CONTENT ###-->
<!--#####################-->
    <td class="rightcon" valign="top">
<h2 style="color: #ddbb00; margin-top: 10px; margin-left: 5px;">Dance Dance Revolution</h2>

<hr color="#ddbb00" align="left" style="width:284; margin-top: -23px; margin-left: 5px;">

<p class="ripe">
Welcome to the Dance Party!  DP is organized to call out DDR players and those who are interested.  Members of the DP will be allowed to help in charity and fund-raising events.
</p>

<p class="ripe">
Well, what's DDR, you ask?
</p>

<p class="ripe">
DDR (Dance Dance Revolution) is a physical game of coordination, endurance, and rhythm.  As the chosen track of music is played, the game issues arrows (usually scrolling from bottom to top) according to rhythm and difficulty.  The player then steps onto the arrow (or press the footpad with whatever he or she desires).
</p>

<p class="ripe">
DDR exploded right out of Japan.  First, plaguing all of Asia, causing extreme dancers to rise from oblivion.  The "game" was then briefly introduced in the United States, where it then became a popular arcade-packing phenomenon.  For more about DDR, go to the <a href="">About</a> section.
</p>
    </td>
    </tr>
    </table>

<!--##############-->
<!--### FOOTER ###-->
<!--##############-->
    <table align="center" width="800" border="0">
    <tr>
    <td class="footer">
Dance Party of USU -- Go Aggies!
    </td>
    </tr>
    </table>
</td>
</tr>
</body>
</html>

Doesn’t using CSS get rid of the need to use tables? I’m not that familiar with it.

seems like something wrong w/geocities. try cutting out the comments.

I have heard that CSS can eliminate the use of tables, but I am not quite that skillful yet -_- I’m sure you can use it for just styles though… why else would there be a

table.master {

}

right?

W O W cutting out the comments made it all work O_O did I do the comments wrong or something?!

EDIT

I took out all the #'s… seems that was causing the mayhem.

it probably has something to do with the geocities inserts. they might use something like perl to parse through the page. unfortunately, # denotes a comment in perl and they might not have accounted for that correctly. not 100% certain, just an idea. btw, you did the comments correctly.

anyway, to answer the previous question, css does eliminate the need for table-based layouts. at first, it’s a bit more challenging. but once you get the hang of it, it’s butter. i highly recommend css-based layouts and highly discourage table-based layouts.

Ahh, I see. Thank you all for sharing your knowledge :slight_smile:

I havn’t been able to find a website on that the CSS table thinger -_- so until then, I guess I can only use html tables

Thought it may be useful to mention that if you start using external stylesheets (as opposed to the embedded type you’re using in the example) you can’t use <!-- comments -->, you have to use /* comments */

Check out http://www.w3schools.com/css/default.asp or webmonkey.com for really good css tutorials.

CSS is a really useful technology and it’s not as complicated as some people seem to think. The ability to control the look of your entire website by changing just 1 document is priceless. :slight_smile:

http://cssvault.com/cat_layouts.php

i havnt used any comments in css, but yeah, what i read was just as you told me… I’ll try to keep that in mind though, cause I keep forgetting ><

i dont think css is the solution to tables, but an alternative. I’ve yet to master the floats. Im just at header 2/3 column and footer layouts so far.

Well, I just found an example of css “tabling” and now understand a lot more about how it works… I havn’t started to try it hands-on quite yet, but it’s there :smiley:
For anyone who might want it…
http://www.w3schools.com/css/css_classification.asp
it’s the 7th link down.