ChatArea.com Home


Author Message / Information
Kwama King

Avatar

Quote | Reply |

CSS tables for your forum..
posted on: 11/30/2003 8:53:22 PM
they load faster!!!!



i wrote this up for fetor, but its open for the public!



CSS TABLES


m'k d00d, this is how you do tables and **** with CSS.. first of all, there are a few things you need to know.. DIV inserts a break, and span doesnt.. k, now you have ID and CLASS, ID = # CLASS = .

in the CSS, do this:



<style type="text/css">
<!--
#table
{
	background-color: #000000;
	padding: 10px;
	width: 200px;
	border-color: #FF0000;
	border-width: 3px;
}
.table
{
	background-color: #FFFFFF;
	padding: 5px;
	width: 150px;
	border-color: #000000;
	border-width: 5px;
}
-->
</style>


now we have an id and a class, but you dont have to use both, you can just use class, or just use id, or use them both.. now that you have that in your CSS, to put that on the page, do something like this..



<body>

<div align="center">
	<div id="table"> <!-- this is the # in the CSS -->
		<div align="center">
			this is the title
		</div>
	</div>
	<div class="table"> <!-- this is the class in the CSS the one with the dot -->
		<div align="center">
			this is the content of jour table
		</div>
	</div>
</div>

</body>



and d00d, you can also use span, and p tags.. you dont have to use DIV.. hmm, lemme show you something.. i believe to be. quite impressive.. and i want you to know, that its 8:18 pm, and i am typing all of this without reference, and im doing it pretty damn fast..



<html>
<head>
<title>Untitled Document</title>

<style type="text/css">
<!--
body
{
	background-color: #000000;
	padding: 10px;
	color: #FFFFFF;
	font-family: verdana;
	font-size: 11px;
}
#maintable
{
	background-color: #660000;
	border-color: #FFFFFF;
	border-width: 1px;
	padding: 15px;
	font-family: verdana;
	font-size: 11px;
	width: 700px;
}
.tableheader
{
	background-color: #333333;
	color: #FFFFFF;
	font-weight: bold;
	padding: 3px;
	width: 500px;
}
.tableinner
{
	background: transparent;
	color: #FFFFFF;
	padding: 5px;
	width: 500px;
}
a:link
{
	color: #FFFFFF;
}
a:hover
{
	color: #660000;
	font-weight: bold;
}
a:visited
{
	color: #FFFFFF;
}
a:active
{
	color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div align="center">
	<div id="maintable">
		<div align="center">
			<div class="tableheader">
				<div align="center">
					Header
				</div>
			</div>
			<div class="tableinner">
				<div align="center">
				HERE FETOR.. E-MAIL ME! <br />
					<a href="mailto:slipnotk@hotmail.com">HERE!</a>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>





ITS NOW 8:29..


see how fast i typed all that raw code? and another thing, yes its good to have those indentions, because it saves database room..
Kaiser_Sosae

Avatar

Quote | Reply |

CSS tables for your forum..
replied on: 12/1/2003 5:00:31 AM
was gona put my forums in css and div tags

but tooo lazy
Sharky
ChatArea.com Owner

Avatar

Quote | Reply |

CSS tables for your forum..
replied on: 12/1/2003 3:10:36 PM
I am updating the site to use almost all CSS that I can.

This does not mean that tables will go away, it just means that there will be no tags like <font> and <b> and stuff.

Also, there is a way to get two div tags next to each other. It's in the profile.
Kwama King

Avatar

Quote | Reply |

CSS tables for your forum..
replied on: 12/1/2003 6:12:12 PM
the float attribute?



yeah, to get the two div tags to be together, you would do a little something like this:



<html>
<head>
<title>untitled document</title>
<style type="text/css">
<!--
.table
{	
	background-color: #000000;
	width: 50px;
}
.table2
{
	background-color: #000000;
	width: 50px;
}
.leftcolumn
{
	float: left;
	padding: 15px;
}
.rightcolumn
{
	float: right;
	padding: 15px;
}
-->
</style>
</head>
<body>
<div align="center">
	<div class="leftcolumn">
		<div class="table">
		yeah...
		</div>
	</div>
	<div class="rightcolumn">
		<div class="table2">
			mmmhmmm
		</div>
	</div>
</div>
</body>
</html>



im pretty sure that would work..
Forta-Kon

Avatar

Quote | Reply |

CSS tables for your forum..
replied on: 4/18/2004 1:28:42 PM
uhhh... wuts a dev tag? wut do it be doin?
Sharky
ChatArea.com Owner

Avatar

Quote | Reply |

CSS tables for your forum..
replied on: 4/18/2004 1:48:28 PM
quote:

see how fast i typed all that raw code? and another thing, yes its good to have those indentions, because it saves database room..


that reference to the indents is not true, the more you have the more room it takes up in the database, and the longer it takes a page to load. The only thing indents are good for is when your reviewing the code and trying to debug something, nothing more.
Kwama King

Avatar

Quote | Reply |

CSS tables for your forum..
replied on: 5/22/2004 4:54:31 PM
*shakes fist*


you told me differently...

 



Contact Administrator (must be logged in)


ChatArea.com Help & News Forums | Terms of Use | Contact ChatArea.com | Advertising

Powered By ChatArea.com - Get your free Society today! © Copyright 2003 Wewp!