Tableless

[dcole.ath.cx]

I get lost when people say tableless... So I need more info on this tableless idea...

[Err]

http://www.cssplay.co.uk/index.html < That is a tableless site (Look at it's source). It does not use tables to achive it's layout, instead they use mainly <div>'s and CSS styling. Thus gives us a tableless site...That is what you were talking about right?

[smiles]

iframes replace tables , only way ???

[Err]

iframes replace tables , only way ???

<{POST_SNAPBACK}>

Huh? O_o?Iframes cannot (and never will hopefully) replace tables.

[scott100]

iframes replace tables , only way ???

What? that's rubbish Like what Rah said, instead of using tables to layout a webpage it's recommended using div's and css to style them.http://www.w3.org/2002/03/csslayout-howto

[smiles]

What? that's rubbish  Like what Rah said, instead of using tables to layout a webpage it's recommended using div's and css to style them.http://www.w3.org/2002/03/csslayout-howto

<{POST_SNAPBACK}>

I forgot

[dcole.ath.cx]

This tableless thing is way to hard...I never switch to div tags because I new they returned when you ended them and I'm still right...I created a test page and it looked like this: (without the -----)Nav 1Nav 1Nav 1---------------------------Main--------------------------------------------------------Nav 2When a simple table would do it right: (without the --------)Nav 1-------------------- Main-------------------------Nav 2Nav 1Nav 1What do I need to add to the CSS... I don't want to align my page by px..I already told the Nav one to be on the left and top, main to be on top, and Nav 2 to be on the right and top.do I need to add a Z-index:1000; or something??

[aspnetguy]

how about posting your code so when can show you how to tweak it.

[dcole.ath.cx]

Does anyone know of a program that will make a tableless site.I'm going to remake my pages to looks like http://dcole.ath.cx but with xhtmlall programs I have used use tables...

[scott100]

Does anyone know of a program that will make a tableless site.I'm going to remake my pages to looks like http://dcole.ath.cx but with xhtmlall programs I have used use tables...

<{POST_SNAPBACK}>

What is so hard about that site that you cannot create tableless layout If you take the time to understand how it works and practise it gets easier.

[dcole.ath.cx]

well stopped working on my html for about 2 months and my php for a month so I'm rusty... just today I looked at some great php I wrote and it took me an hour to understand what I was doing...well with tableless you need to position every little thing... and you have to get the postion just right, with tables it just spacks a border and everthing is ligned up perfect.and why does a div tag include return when you close it... that's like me adding a "qu" button to the keyboard... yeah alot of people use "q" and "u" together but they don't make a button for it... so why should the closing div tag automaticly start a new line.

[justsomeguy]

You don't have to use it that way, div is just defined as a block-level element. You can change that:style="display: inline;"Look at my example here, there aren't any tables, and there are side-by-side divs. Granted it took me way too long to get it right, but it does work:http://www.manchine.net/w3/formdemo.php

[dcole.ath.cx]

I created a test page and it looked like this: (without the -----)Nav 1Nav 1Nav 1---------------------------Main--------------------------------------------------------Nav 2When a simple table would do it right: (without the --------)Nav 1-------------------- Main-------------------------Nav 2Nav 1Nav 1What do I need to add...

<{POST_SNAPBACK}>

the span tag would have work too... why did someone suggest that? and why didn't I think of that? *spacks self*Just for this, I'm leaving the computer and going to go eat food!

[Err]

the span tag would have work too... why did someone suggest that? and why didn't I think of that? *spacks self*Just for this, I'm leaving the computer and going to go eat food!

<{POST_SNAPBACK}>

Well span tags are not meant for the layouts that's why. That's why divs are good to use. span tags are meant for text only, div's can go both ways. You can use lists as well.

[ben3001]

dcole.ath.cx, im no expert but it is useually easier to be helped if you provided a screenshot prehaps, instead of drawing the template in a forum

This tableless thing is way to hard...I never switch to div tags because I new they returned when you ended them and I'm still right...I created a test page and it looked like this: (without the -----)Nav 1Nav 1Nav 1---------------------------Main--------------------------------------------------------Nav 2When a simple table would do it right: (without the --------)Nav 1-------------------- Main-------------------------Nav 2Nav 1Nav 1What do I need to add to the CSS... I don't want to align my page by px..I already told the Nav one to be on the left and top, main to be on top, and Nav 2 to be on the right and top.do I need to add a Z-index:1000; or something??

<{POST_SNAPBACK}>

[dcole.ath.cx]

Well I'm finally posting my script for some help... I had to do alot more work with this tableless thing..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /><title>The DCole Server</title><style type='text/css'>body {	margin: 10px auto;	padding: 0;	font-family: verdana, arial, sans-serif;	text-align: center;	background: #fafafa;	color: #000000;	}h1, h2, h3 {	font-family: verdana, arial, sans-serif;	color: #990000;	background: transparent;	}p {	font-family: verdana, arial, sans-serif;	color: #000000;	background: transparent;	}	a  { color: #990000; background: transparent; font-weight:bold; text-decoration: none;} 	a:link	{ color: #990000; background: transparent; } 	a:visited	{ color: #990000; background: transparent; font-weight:bold; } 	a:active	{ color: #990000; background: transparent; font-weight:bold; } 	a:hover	{ color: #990000; background: transparent; font-weight:bold; text-decoration: underline; }#header {	margin: 0 auto;	padding: 0;	width: 700px;	height: 150px;	text-align: left;	background: #fafafa;	color: #000000;	border-top: 1px solid #000000;	border-right: 1px solid #000000;	border-bottom: 5px solid #000000;	border-left: 1px solid #000000;	}#logo   {	float: left;	position:absolute;        top:15;	font-size: 80px;	padding: 25px 0px 0px 15px;	}#logod   {	float: left;        top:10;	color: #990000;	}#logoc   {	float: middle;        top:10;	color: #000000;	}#tdcs {	font-size: 30px;	background: transparent;	color: #990000;	}#title {	float: right;	position:absolute;        top:50;	margin: 0px;	padding: 25px 0 0 150px;	background: transparent;	color: #000000;	}#titleurl {	background: transparent;	color: #990000;	}#titlefz {	color: #000000;	}	#title h1 {	margin: 0;	padding: 0;	display: block;	}#container {	margin: 0 auto;	padding:0;	color: #000000;	background: transparent;	width: 700px;	text-align: left;	}h2.section {	margin-top: 10px;	font-size: 13px;	background: transparent;	color: #990000;	border-bottom: 1px solid #990000;	}#sidebar {	float: left;	width: 140px;	padding: 0px 10px 11px 0px;	background: transparent;	color: #000000;	font-size: 12px; 	}#sidebar p {	font-size: 12px;  	}#divider {	float: left;	height: 310px;	border-left: 1px solid #000000;	padding-left: 5px;	border-right: 1px solid #000000;	}#content {	float: left;	width: 525px;	padding-bottom: 10px;	padding-left: 10px;	background: transparent;	color: #000000;	float: right;	}h2.date {	margin-top: 10px;	padding: 2px 5px;	font-size: 13px;	font-weight: bold;	letter-spacing: 0.09em;	text-align: left;	background: transparent;	color: #990000;	border-top: 1px solid #000000;	border-left: 5px solid #000000;	}h3.subject {	font-size: 12px;	letter-spacing: 0.09em;	background: transparent;	color: #990000;	}div.sig {	font-family: verdana, arial, sans-serif;	font-size: 12px; 	text-align: right;	padding: 0px 5px 2px 5px;	border-bottom: 1px solid #000000;	border-right: 5px solid #000000;	}#footer {	font-family: verdana, arial, sans-serif;	font-size: 12px;	}#content p {	font-size: 12px;  	margin: 10px 0px 5px 10px;	}#credits {	float: left;	width: 140px;	margin: 0px;	padding: 5px;	background: #fafafa;	color: #000000;	}input,textarea {	background-color:#ffffff;	color:#000000;	font-size:12px;	border:1px #000000 solid;	margin: 1px;}</style></head><body><div id='header'>	<div id='logo'><div id='logod'>D</div><div id='logoc'>C</div></div><div id='title'>	<div id='tdcs'><b>The DCole Server</b></div>	<br /><div id='titleurl'><b>http://dcole.ath.cx</b></div>	<br /><div id='titlefz'><b>Developing the Web</b></div></div></div><div id='container'><div id='sidebar'><b>[: Home<br />:] <a href='/settings.php'>Settings</a><br />:] <a href='/blog/'>Blog</a><br />:] <a href='/wiki/'>Wiki</a><br />:] <a href='/mb/'>Message Board</a><br />:] <a href='/search/'>Search Engine</a><br />:] <a href='/fm/filemanager.php'>File Manager</a><br />:] <a href='/hosting.php'>Hosting</a><br />:] <a href='/scripts.php'>Scripts</a><br />:] <a href='/support.php'>Support Us</a><br />:] <a href='/cummunities.php'>Communities</a><br /></b><h2 class='section'>Account login!</h2>	<form action="/ffm/login.php" method="post">  <div align="left">  Website:</div>  <input size="25" name="website" type="text" /><br />  <div align="left">  Password:</div>  <input size="25" name="password" type="password" /><br />  <input value="Login" type="submit" />	</form><hr />Updated: 6/15/2006</div><span id='divider'> </span><div id='content'><h2 class='date'>Welcome</h2><p>We provide free website hosting to personal or small businesses. The DCole Server also provides it's own public search engine, scripts, and other tools.</p><div class='sig'><a href='http://dcole.ath.cx/fm/registration.php'>Sign up!</a></div><h2 class='date'>Updates</h2><p>	<br /><b>Layout</b> -- As you can see, there is a new layout with vaild xhtml and css.	<br /><b>WikiDCole</b> -- This site now as it's own wiki! You can add and find information.	<br /><b>New Server</b> -- The Server is now run on Fedora Core 5	<br /><b>New Server</b> -- 3 times faster with twice as much space!</p><div class='sig'> </div><br /><br /><br /><div id='footer'><a href="/aboutus.php">About Us</a> | <a href="/sitemap.php">Site Map</a> | <a href="/terms.php">Terms of Use</a> | <a href="/access.php">Accessibility</a> | <a href="/feedback.php">Send Feedback</a> | <a href="/contactus.php">Contact Us</a></div></div></div></body></html>

Can someone help remove the space inbetween "The DCole Server" and "http://dcole.ath.cx" and "Developing the Web"also is there a way to have the divider div auto go to the bottom of the long one of sidebar or content. If I set a border on each side of sidebar and content sometimes they don't match up because div tags can be different heights... unlike TDs.Also can "Updated: 6/15/2006 About Us | Site Map | Terms of Use | Accessibility | Send Feedback | Contact Us " be it's own line but never have the "About us" cross over the divider middle.

[scott100]

Can someone help remove the space inbetween "The DCole Server" and "http://dcole.ath.cx" and "Developing the Web"

try reducing the line-height

also is there a way to have the divider div auto go to the bottom of the long one of sidebar or content. If I set a border on each side of sidebar and content sometimes they don't match up because div tags can be different heights... unlike TDs.

I think this is a common problem, this page shows an example: http://www.cssplay.co.uk/layouts/3cols.html#I think the idea is if you have 2 child divs with height:100% within a parent div, then if one child div grows the parent will grow, since the height of the other child div is set to 100% in the parent, it will also grow. but don't quote me on that lol

[METOOTECH]

What? that's rubbish  Like what Rah said, instead of using tables to layout a webpage it's recommended using div's and css to style them.http://www.w3.org/2002/03/csslayout-howto

<{POST_SNAPBACK}>

You can lay out a tableless page just using fieldset, div, and CSS especially if you nest the fieldsets, but it's harder than tables and you can use CSS positioning to make it easer..... but what's the point unless you are a page designer trying to do it the new way... the average person viewing it will never know the difference, and doesn't care... they are interested in what you got or what you are selling or what info they need... also animated gifs, flash, etc. is usually annoying and distracting after you have seen it a couple of times and animation is for gaming and turns people off who are trying to get information or buy products... You have got to ask yourself, what are my goals... sell things, informing people or to show off your programing skills.... Unless you are gaming, try to think of the Internet as a new form of magazine catalog, or newspaper with the ability to write and change things quickly and stop thinking of it as television or dvd... METOOTECH

[scott100]

You can lay out a tableless page just using fieldset,  div, and CSS especially if you nest the fieldsets, but it's harder than tables and you can use CSS positioning to make it easer..... but what's the point unless you are a page designer trying to do it the new way... the average person viewing it will never know the difference, and doesn't care... they are interested in what you got or what you are selling or what info they need

Yep, we've recently had a big discussion on Tables or Css

[dcole.ath.cx]

... also animated gifs, flash, etc. is usually annoying and distracting after you have seen it a couple of times and animation is for gaming and turns people off who are trying to get information or buy products...

Dude, my website is flash and image free but the Supoort Us page. Also writing html is like writing english... most people are in it for the point but the point is hard to see if you don't write good. I'm mostly in this to learn (by example... hint hint what I'm going to say later)

http://www.cssplay.co.uk/layouts/3cols.html#I think the idea is if you have 2 child divs with height:100% within a parent div, then if one child div grows the parent will grow, since the height of the other child div is set to 100% in the parent, it will also grow.  but don't quote me on that lol

<{POST_SNAPBACK}>

Can someone write the code of this, I'm having problems... in the css I put: height: 100%; for the divider (shortest one) and it's still only one line.do I need to use like <div style='height:100%;'> or somethinglol, this is really funny... I can write a search engine script but I can't streach a div tag. That's cool...

[justsomeguy]

<div style="height: 200px;">    <div class="left_column" style="height: 100%; background-color: #FFEEEE; float: left; width: 50%;">    one line  </div>  <div class="right_column" style="height: 100%; background-color: #EEEEFF; float: right; width: 50%;">    line 1<br>    line 2<br>    line 3<hr>  </div></div>

That only works if the parent div has a height set.

[Err]

lol, this is really funny... I can write a search engine script but I can't streach a div tag. That's cool...    

<{POST_SNAPBACK}>

I wish I knew what you know.

[dcole.ath.cx]

Well I got it to go down!But I have added 3 divs to the bottom and can't get the to work...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /><title>The DCole Server</title><style type='text/css'>body {margin: 10px auto;padding: 0;font-family: verdana, arial, sans-serif;text-align: center;background: #fafafa;color: #000000;}h1, h2, h3 {font-family: verdana, arial, sans-serif;color: #990000;background: transparent;}p {font-family: verdana, arial, sans-serif;color: #000000;background: transparent;}a  { color: #990000; background: transparent; font-weight:bold; text-decoration: none;}a:link { color: #990000; background: transparent; }a:visited { color: #990000; background: transparent; font-weight:bold; }a:active { color: #990000; background: transparent; font-weight:bold; }a:hover { color: #990000; background: transparent; font-weight:bold; text-decoration: underline; }#header {margin: 0 auto;padding: 0;width: 700px;height: 150px;text-align: left;background: #fafafa;color: #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;border-bottom: 5px solid #000000;border-left: 1px solid #000000;}#logo   {float: left;position:absolute;       top:15;font-size: 80px;padding: 25px 0px 0px 15px;}#logod   {float: left;       top:10;color: #990000;}#logoc   {float: middle;       top:10;color: #000000;}#tdcs {font-size: 30px;background: transparent;color: #990000;}#title {float: right;position:absolute;       top:50;margin: 0px;padding: 25px 0 0 150px;background: transparent;color: #000000;}#titleurl {background: transparent;color: #990000;}#titlefz {color: #000000;}#title h1 {margin: 0;padding: 0;display: block;}#container {margin: 0 auto;padding:0;color: #000000;background: transparent;width: 700px;text-align: left;}h2.section {margin-top: 10px;font-size: 13px;background: transparent;color: #990000;border-bottom: 1px solid #990000;}#sidebar {float: left;width: 140px;height: 100%;padding: 0px 10px 11px 0px;background: transparent;color: #000000;font-size: 12px;}#sidebar p {font-size: 12px;  }#divider {float: left;height: 100%;border-left: 1px solid #000000;padding-left: 0px;border-right: 1px solid #000000;}#content {width: 525px;height: 100%padding-bottom: 10px;padding-left: 10px;background: transparent;color: #000000;float: right;}h2.date {margin-top: 10px;padding: 2px 5px;font-size: 13px;font-weight: bold;letter-spacing: 0.09em;text-align: left;background: transparent;color: #990000;border-top: 1px solid #000000;border-left: 5px solid #000000;}h3.subject {font-size: 12px;letter-spacing: 0.09em;background: transparent;color: #990000;}div.sig {font-family: verdana, arial, sans-serif;font-size: 12px;text-align: right;padding: 0px 5px 2px 5px;border-bottom: 1px solid #000000;border-right: 5px solid #000000;}#footer {margin: 0 auto;padding:0;color: #000000;background: transparent;width: 700px;text-align: left;}#update {float: left;width: 140px;height: 100%;padding: 0px 10px 11px 0px;background: transparent;color: #000000;font-size: 12px;}#dividertwo {float: left;height: 100%;border-left: 1px solid #000000;padding-left: 0px;border-right: 1px solid #000000;}#bottomnav {width: 525px;height: 100%padding-bottom: 10px;padding-left: 10px;background: transparent;color: #000000;float: right;font-size: 12px;}#content p {font-size: 12px;  margin: 10px 0px 5px 10px;}input,textarea{background-color:#ffffff;color:#000000;font-size:12px;border:1px #000000 solid;margin: 1px;}</style></head><body><div id='header'>	<div id='logo'>  <div id='logod'>D</div><div id='logoc'>C</div>	</div>	<div id='title'>  <div id='tdcs'><b>The DCole Server</b></div>  <br /><div id='titleurl'><b>http://dcole.ath.cx</b></div>  <br /><div id='titlefz'><b>Developing the Web</b></div>	</div></div><div id='container' style='height: 280px;'>	<div id='sidebar' style='height: 100%;'>  <b>  [: Home<br />  :] <a href='/settings.php'>Settings</a><br />  :] <a href='/blog/'>Blog</a><br />  :] <a href='/wiki/'>Wiki</a><br />  :] <a href='/mb/'>Message Board</a><br />  :] <a href='/search/'>Search Engine</a><br />  :] <a href='/fm/filemanager.php'>File Manager</a><br />  :] <a href='/hosting.php'>Hosting</a><br />  :] <a href='/scripts.php'>Scripts</a><br />  :] <a href='/support.php'>Support Us</a><br />  :] <a href='/cummunities.php'>Communities</a><br />  </b>  <h2 class='section'>Account login!</h2>  <form action="/ffm/login.php" method="post">    <div align="left">  Website:</div>    <input size="24" name="website" type="text" /><br />    <div align="left">  Password:</div>    <input size="24" name="password" type="password" /><br />    <input value="Login" type="submit" />  </form>	</div>	<div id='divider' style='height: 100%;'> </div>	<div id='content' style='height: 100%;'>  <h2 class='date'>Welcome</h2>  <p>We provide free website hosting to personal or small businesses. The DCole Server also provides it's own public search engine, scripts, and other tools.</p>  <div class='sig'><a href='http://dcole.ath.cx/fm/registration.php'>Sign up!</a></div>  <h2 class='date'>Updates</h2>  <p>  <br /><b>Layout</b> -- As you can see, there is a new layout with vaild xhtml and css.  <br /><b>WikiDCole</b> -- This site now as it's own wiki! You can add and find information.  <br /><b>New Server</b> -- The Server is now run on Fedora Core 5  <br /><b>New Server</b> -- 3 times faster with twice as much space!  </p>  <div class='sig'> </div>  <br />  <br />  <br />	</div></div><div id='footer' style='height: 20px;'>	<div id='update' style='height: 100%;'>  Updated: 06-22-2006	</div>	<div id='dividertwo' style='height: 100%;'> </div>	<div id='bottomnav' style='height: 100%;'>  <a href="/aboutus.php">About Us</a> | <a href="/sitemap.php">Site Map</a> | <a href="/terms.php">Terms of Use</a> | <a href="/access.php">Accessibility</a> | <a href="/feedback.php">Send Feedback</a> | <a href="/contactus.php">Contact Us</a>	</div></div></body></html>

the update needs to move left and the bottomnav needs to move up, so they are inline. Also the dividers need to lign upEDIT: please always use CODEBOX for such long pieces of code

Edited June 23, 2006 by aspnetguy

[dcole.ath.cx]

oops, I didn't know about codebox... I was wondering how you guys got it to scroll.I still can't get 2 columns and 2 rows to work correctly, is there something besides a div tag and a span tag?