Never thought I'd say it

Posts: 1129 · Posted: Wed Feb 09, 2005 7:25 am

no he dont use that cursed stuff
sure u have to Have forms but not make the entire layout outta forms, now that would be interesting...... to someone on serious amounts of crack!

Posts: 1029 · Posted: Wed Feb 09, 2005 1:02 pm

I think he meant DIV's... poor confused Jamie Sad

Posts: 766 · Posted: Wed Feb 09, 2005 2:15 pm

Ok, lesson learned: don't try to check the forums after taking an Ambien.

What I meant to say is layout with TABLES is bad, and Josh was referring to using CSS to get around that right? Can you show me some simplistic examples of this? I'm doing a lot of work with tables now on my site and would be open to working with something different.

Posts: 1029 · Posted: Wed Feb 09, 2005 4:29 pm

For instance... on your website your layout is coded like such...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MTGO Trading Post</title>
<style type="text/css">

</style>
</head>

<body>

<head>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>

<div id="vqp_about" style="position:absolute;visibility:hidden;">
****JavaScript based drop down DHTML menu generated by NavStudio. (OpenCube Inc. - http://www.opencube.com)****</div>

<script language="JavaScript" vqptag="datafile" src="http://www.mtgotradingpost.com/newmenu/mtgomenu.js"></script>
<script language="JavaScript" vqptag="doc_level_settings" vqp_datafile0="http://www.mtgotradingpost.com/newmenu/mtgomenu.js" vqp_uid0=815532>

//Document Level Menu Settings

cdd__codebase = "http://www.mtgotradingpost.com/newmenu/"
cdd__codebase815532 = "http://www.mtgotradingpost.com/newmenu/"
cdd__activate_onclick = false
cdd__showhide_delay = 0
cdd__url_target = "_self"
cdd__url_features = "resizable=1, scrollbars=1, titlebar=1, menubar=1, toolbar=1, location=1, status=1, directories=1, channelmode=0, fullscreen=0"
cdd__display_urls_in_status_bar = true
cdd__default_cursor = "hand"

</script><script language="JavaScript" vqptag="loader">

//NavStudio Code (Warning: Do Not Alter!)

if (window.showHelp){b_type = "ie"; if (!window.attachEvent) b_type += "mac";}if (document.createElementNS) b_type = "dom";if (navigator.userAgent.indexOf("afari")>-1) b_type = "safari";if (window.opera) b_type = "opera"; qmap1 = "\<\script language=\"JavaScript\" vqptag='loader_sub' src=\""; qmap2 = ".js\">\<\/script\>";;function iesf(){};;function vqp_error(val){alert(val)}
if (b_type){document.write(qmap1+cdd__codebase+"pbrowser_"+b_type+qmap2);document.close();}

</script>

<table width="720" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="TopHeaderOutline style1"><img src="http://www.mtgotradingpost.com/images/headerimage.jpg" name="image1" width="718" height="98" border="0" id="image1"></a><br>
</td>
</tr>
<tr>
<td><div align="center">
<script language='JavaScript' vqptag='placement' vqp_menuid=815532>create_menu(815532)</script>
</div></td>
</tr>
</table>
<br />
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<table width="720" border="0" align="center" cellpadding="0" cellspacing="0" class="MainOutline">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle">
<td height="40" colspan="2" class="topCellBig">Introduction...</td>
</tr>
<tr>
<td width="100%" align="right" valign="middle" class="leftFormCell"><div align="left">
<p align="center">Have questions about the website? <a href="mailto:admin@mtgotradingpost.com">Click here to email me about it! </a></p>
<p align="left">A quick rundown on what this site is for. MAKING TRADES EASIER ON MTGO. How? Simple - you register and create a database of cards that you own and want here. Once you're done, you can use the Match function to find other traders that have the cards you want. Very simple. So:</p>
<p align="left">Step 1: <strong>Register</strong> using the link at the top right then login (you will be taken to the login page after registering) </p>
<p align="left">Step 2: Add your cards, either<br />
  <em>manually</em> - Using the menu, select My Cards -> and then the set that you need to add cards for <br />
  <em>in bulk</em> - Again using the menu, select My Cards -> Bulk Insert and you'll be able to upload a .csv file from the MTGO program's export feature. </p>
<p align="left">Step 3: Mark the cards that you're looking to get by going to My Cards -> and then the set you want to add for </p>
<p align="left">Step 4: Use the Trading -> MATCH function to find a trader that has cards you're looking for. Then, a simple button click allows you to send them a trade request via email (their email is not displayed though, so they retain their privacy). Or, you could simply look them up online using their MTGO Screen Name.</p>
<p align="center">Have questions about the website? <a href="mailto:admin@mtgotradingpost.com">Click here to email me about it! </a> </p>
<p align="left"> </p>
</div></td>

</tr>
<tr>
<td align="right" valign="middle" class="leftFormCell">  </td>

</tr>

</table>

<p></p>
<p> </p></td></tr>
</table>

<style type="text/css">

</style><br />
<table width="720" border="0" align="center" cellpadding="0" cellspacing="0" class="TopHeaderOutline">
<tr>
<td height="19" align="center" valign="middle"><div align="left">
<p class="style1">
Magic: The Gathering is a trademark of Wizards of the Coast, Inc. This site is in no way endorsed or supported by Wizards of the Coast, Inc. and is not intended to infringe on any trademarks held by the said corporation.
MTGOTradingPost.com does not accept any responsibility for any cards, monetary funds, or other possessions lost in trade, or any other negative outcomes as a result of using the information and/or services provided on this site. By using the information and/or services provided on this site, you agree to this disclaimer. This website was created to encourage good trading practices in a LEGAL manner, no illegal activities are promoted or endorsed by this site as that is not its intent. If you have any questions or comments, please e-mail admin@mtgotradingpost.com.
All code and information contained within this site that is not otherwise reserved is the intellectual property of MTGOTradingPost.com and its creators. Reproduction of any or all of this material without written consent is a violation of United States federal copyright law. Violators will be subject to prosecution.</p>
<p align="center" class="style1"><A href='http://www.opencube.com'>DHTML Menu / JavaScript Menu by OpenCube</A></p>
</div></td>
</tr>
</table>

</body>
</html>

When it could be coded like this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/css/main.css" rel="stylesheet" media="screen" type="text/css" />
<title>MTGO Trading Post</title>
<style type="text/css">

</style>
<script language="JavaScript" vqptag="datafile" src="http://www.mtgotradingpost.com/newmenu/mtgomenu.js"></script>
<script language="JavaScript" vqptag="doc_level_settings" vqp_datafile0="http://www.mtgotradingpost.com/newmenu/mtgomenu.js" vqp_uid0=815532>
//Document Level Menu Settings
cdd__codebase = "http://www.mtgotradingpost.com/newmenu/"
cdd__codebase815532 = "http://www.mtgotradingpost.com/newmenu/"
cdd__activate_onclick = false
cdd__showhide_delay = 0
cdd__url_target = "_self"
cdd__url_features = "resizable=1, scrollbars=1, titlebar=1, menubar=1, toolbar=1, location=1, status=1, directories=1, channelmode=0, fullscreen=0"
cdd__display_urls_in_status_bar = true
cdd__default_cursor = "hand"
</script>
<script language="JavaScript" vqptag="loader">
//NavStudio Code (Warning: Do Not Alter!)
if (window.showHelp){b_type = "ie"; if (!window.attachEvent) b_type += "mac";}if (document.createElementNS) b_type = "dom";if (navigator.userAgent.indexOf("afari")>-1) b_type = "safari";if (window.opera) b_type = "opera"; qmap1 = "\<\script language=\"JavaScript\" vqptag='loader_sub' src=\""; qmap2 = ".js\">\<\/script\>";;function iesf(){};;function vqp_error(val){alert(val)}
if (b_type){document.write(qmap1+cdd__codebase+"pbrowser_"+b_type+qmap2);document.close();}
</script>
</head>

<body>

<div id="vqp_about" style="position:absolute;visibility:hidden;">
****JavaScript based drop down DHTML menu generated by NavStudio. (OpenCube Inc. - http://www.opencube.com)****
</div>

<a href="/"><img src="http://www.mtgotradingpost.com/images/headerimage.jpg" id="mainImg" /></a>

<div id="nav">
<script language='JavaScript' vqptag='placement' vqp_menuid=815532>create_menu(815532)</script>
</div>

<h2>Introduction</h2>

<div id="content">
<p class="centered">Have questions about the website? <a href="mailto:admin@mtgotradingpost.com">Click here to email me about it! </a></p>
<p>A quick rundown on what this site is for. MAKING TRADES EASIER ON MTGO. How? Simple - you register and create a database of cards that you own and want here. Once you're done, you can use the Match function to find other traders that have the cards you want. Very simple. So:</p>
<p>Step 1: <strong>Register</strong> using the link at the top right then login (you will be taken to the login page after registering) </p>
<p>Step 2: Add your cards, either<br />
  <em>manually</em> - Using the menu, select My Cards -> and then the set that you need to add cards for <br />
  <em>in bulk</em> - Again using the menu, select My Cards -> Bulk Insert and you'll be able to upload a .csv file from the MTGO program's export feature. </p>
<p>Step 3: Mark the cards that you're looking to get by going to My Cards -> and then the set you want to add for </p> <p align="left">Step 4: Use the Trading -> MATCH function to find a trader that has cards you're looking for. Then, a simple button click allows you to send them a trade request via email (their email is not displayed though, so they retain their privacy). Or, you could simply look them up online using their MTGO Screen Name.</p>
<p class="centered">Have questions about the website? <a href="mailto:admin@mtgotradingpost.com">Click here to email me about it! </a> </p>
</div>

<div id="footer">
Magic: The Gathering is a trademark of Wizards of the Coast, Inc. This site is in no way endorsed or supported by Wizards of the Coast, Inc. and is not intended to infringe on any trademarks held by the said corporation.
MTGOTradingPost.com does not accept any responsibility for any cards, monetary funds, or other possessions lost in trade, or any other negative outcomes as a result of using the information and/or services provided on this site. By using the information and/or services provided on this site, you agree to this disclaimer. This website was created to encourage good trading practices in a LEGAL manner, no illegal activities are promoted or endorsed by this site as that is not its intent. If you have any questions or comments, please e-mail admin@mtgotradingpost.com.
All code and information contained within this site that is not otherwise reserved is the intellectual property of MTGOTradingPost.com and its creators. Reproduction of any or all of this material without written consent is a violation of United States federal copyright law. Violators will be subject to prosecution.</p>
<p class="centered"><a href='http://www.opencube.com'>DHTML Menu / JavaScript Menu by OpenCube</a></p>
</div>

</body>
</html>

Now... I didn't spend much time on this, so I didn't do the links... but I hope you get the gist of where this is going. Do you see how much cleaner that layout is, and how much easier it is to manage? No nesting tables or applying classes to table and td tags... it doesn't get any better than that.

Posts: 1129 · Posted: Wed Feb 09, 2005 5:29 pm

jamie the best way is to study the examples at www.csszengarden.com

Posts: 1029 · Posted: Wed Feb 09, 2005 6:04 pm

^^^ Very True. And AlistApart

Posts: 746 · Posted: Wed Feb 09, 2005 10:44 pm

I'm tellin ya...once you can wrap your brain around the box model and float and clear - it'll be like a lightning bolt hit you and you'll go "OMG this is SO cool and SO easy and SOOOOOO powerful!"

But it is a paradigm shift from the way we all have been thinking...and as such it seems to be a steep learning curve, but it's not really...it's getting the old OUT of your head and looking at the same pages in a different way. Once you can think in CSS, then applying it is a cinch.

Posts: 1029 · Posted: Thu Feb 10, 2005 2:01 am

Exactly. You have to stop trying to compare teh two methods... it's not "Okay in tables I do it this way so what's the equivilent in CSS?" - Rather, it's starting cold turkey w/ an empty head.

Posts: 746 · Posted: Thu Feb 10, 2005 2:52 am

EXACTLY - and that I think is a bigh problem a lot of peeps have when switching styles - I know I did

But man, when you look at the code of a site done in CSS - it's SO nice and easy to read and see the content...couple that with code behinds that get all the nasty code out of the the pages and things really start to look good...

Posts: 1129 · Posted: Thu Feb 10, 2005 3:38 am

the code is so nice its almost sexy!

i remember the first time i look at the source code for xen garden... BOING------->>>>
haha

i was like **** thats nice!

Posts: 746 · Posted: Thu Feb 10, 2005 4:56 am

The only bad (ha - I say bad...) thing about CSS right now is that to make it accessable to the masses we are going to have to have someone come up with a GUI app to "dumb it down" for all the non-hand-coders in the world to use the technology.

That kinda scares me though...Frontpage useing CSS for placement...OMG what am I saying?

Posts: 1129 · Posted: Thu Feb 10, 2005 5:02 am

they have them!
as great as topstyle is the css support in dwmx 2004 is both great and freakishly simple

Posts: 746 · Posted: Thu Feb 10, 2005 5:05 am

nah..neither one of them is really good at doing it...we'll have to wait for at least one more generation of apps I think before they start doing it really well...and correctly...

Again...I mean more for placement...

Posts: 1129 · Posted: Thu Feb 10, 2005 6:08 am

placement is solely up 2 u, so yeah in that regard, yeah it sux

Posts: 746 · Posted: Thu Feb 10, 2005 3:20 pm

exactly...we'll have to wait a little longer for a DreamWeaver or a Frontpage style app to do the CSS placement for the masses...till then everyone using those apps to do the work for them will do it in tables...