Tables vs. Css

austendesigns · 04-26-2005, 09:54 AM

So I'm back to square one. I wish I had code I could show you, but I'm still trying to figure out the best way to do this. I'm starting with a table, should I have tables inside that first table to layout my text, or am I supposed to be using these "div"s I keep hearing about, cause I still haven't gotten the hang of that. But am I at least correct in assuming those are the two main ways to do things??

Jazzee · 04-26-2005, 10:02 AM

Yes, those are the two main ways. My advice is to do whatever you are more comfortable with.

If you design with no tables, using css for layout, you'll be able to change and update things more easily later.

But, if you are used to working with tables, you may want to stick with those. Trying to create a site without tables can be tricky and frusterating if you aren't used to it.

DaveyBoy · 04-26-2005, 10:17 AM

Tables all the way, innit laaaaa!!

austendesigns · 04-26-2005, 11:57 AM

Alright I'm doing both

I have a table around everything and using styles on the inside.

But, I can't figure out how to align my img. I think I got my text aligned but that might just have been a fluke... And vspace isn't responding to negative values... shouldn't it? It's probably a cell or something screwing me up.. how do I show you guys the code???

DaveyBoy · 04-26-2005, 11:59 AM

view your source then copy paste into some

[ code] [/ code]

tags on here.

austendesigns · 04-26-2005, 12:00 PM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Last Chance Leather</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif; margin-left: 60px; font-size: 14px}
-->
</style>
</head>

<body onLoad="MM_preloadImages('images/index_layout_over_02.jpg','images/index_layout_over_03.jpg','images/index_layout_over_04.jpg','images/index_layout_over_05.jpg')">
<table width="800" height="806" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="138"><img src="images/index_layout_01.jpg" width="800" height="145"></td>
  </tr>
  <tr>
    <td height="43" valign="top"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/index_layout_over_02.jpg',1)"><img src="images/index_layout_02.jpg" alt="handbags" name="Image2" width="172" height="43" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/index_layout_over_03.jpg',1)"><img src="images/index_layout_03.jpg" name="Image3" width="193" height="43" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/index_layout_over_04.jpg',1)"><img src="images/index_layout_04.jpg" name="Image4" width="245" height="43" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/index_layout_over_05.jpg',1)"><img src="images/index_layout_05.jpg" name="Image5" width="190" height="43" border="0"></a></td>
  </tr>
  <tr>
    <td height="618" background="images/b_index.gif"><p>&nbsp;</p>
    <p>&nbsp;</p><img src="images/purses_10.gif" alt="Style #10" width="200" height="288" hspace="40" vspace="0" align="right">    <p align=left class="style1">I handcraft every bag from quality top-grain cowhide.<br>
      Stitching is nylon for longest wear, all zippers and hardware <br>
	 are solid brass.</p>
    <p align=left class="style1">&nbsp;</p>
    <p align=left class="style1">If you ever damage your Last Chance Leather 
  bag, or just <br>
  need it cleaned, I will be more than
  happy to do what I can, <br>
  free of charge. Even if
  you simply decide the bag is not for <br>
  you, please
  contact me for information on a return/exchange.</p>
    <p align=left class="style1">&nbsp;</p>
    <p align=left class="style1">&nbsp;</p>
    <p align=left class="style1">&nbsp;</p>
    <p align=left class="style1">From time to time I introduce new styles to my line <br>and discontinue old ones. Please sign up to my <br>mailing list to be informed of changes and news. <br>Your email address will never be shared!</p>
    <p align=left class="style1">&nbsp;</p>    <p align=left class="style1">
      <input type="text" name="textfield">  
      <input type="submit" name="Submit" value="Submit">
    </p>
    <p align=left class="style1">&nbsp;</p>
    <p>&nbsp; </p></td>
  </tr>
</table>

<div align="left"></div>
</body>
</html>

Jazzee · 04-26-2005, 06:37 PM

It would be easier if you put the page up somewhere so we could see it.

PS. You have a bunch of extra code in there that is not needed. What program are you using?

DaveyBoy · 04-26-2005, 07:20 PM

looks like dreamweaver from the preload image script, dunno though.

yeah can you post the page up for us please?

austendesigns · 04-27-2005, 05:56 AM

i'll go post it right now! I was actually laying in bed last night thinking... hmm.. they don't even know what image i'm talking about!! (isn't that sad that the LAST thing i think about before falling asleep is freakin web development!!

and yes i'm using dreamweaver...

http://www.lastchanceleather.net

austendesigns · 04-27-2005, 05:58 AM

crap hold on... my ftp trial expired whats a good free one??

austendesigns · 04-28-2005, 10:51 AM

http://www.lastchanceleather.net/test.htm

ok there's the page, or what i have of it...

Jazzee · 04-28-2005, 11:01 AM

Basically what you have there is one huge background image and you are just putting text over top using empty <p>'s to position the text. This is not a good way to do it. Each box should be it's own table cell or div.

austendesigns · 04-28-2005, 11:56 AM

DaveyBoy · 04-28-2005, 12:19 PM

basically because 1) that large image will take a long time to load and 2) because if you are using one background and loads of <p> tags for placement i don't think it will look right on all browsers.

Basically it's better to slice it up and lob them into their own table cell, each part.

austendesigns · 04-28-2005, 12:25 PM

I thought that was the point of CSS, using <p> for the placement, rather than tables... originally I was going to slice it up, but I guess I don't have the hang of how tables act yet becuase that got me nowhere.

Jazzee · 04-28-2005, 12:26 PM

Quote:

Originally Posted by DaveyBoy

2) because if you are using one background and loads of <p> tags for placement i don't think it will look right on all browsers.

That's the big one. It won't look the same in different browsers. The text in the current version isn't lined up in firefox.

Jazzee · 04-28-2005, 12:29 PM

Quote:

Originally Posted by austendesigns

I thought that was the point of CSS, using <p> for the placement, rather than tables... originally I was going to slice it up, but I guess I don't have the hang of how tables act yet becuase that got me nowhere.

You use <div> for placement when designing a site with no tables. You use css to tell each div where to sit on the page.

The way you are doing it is just using <p> to create line breaks and push the text where you want it.

austendesigns · 04-28-2005, 12:33 PM

okaaaaay... so can someone transfer a little section of my code, say one paragraph, so i can see what it would look like?

(btw, i just reread the beg. of this thread... and I see where it's plainly stated what I should do... I'm just not getting it.. but thanks so much for taking your time to help!! now what exactly is a <div> again??)

DaveyBoy · 04-28-2005, 12:48 PM

stick with tables really, i think it's weird to go straight into table-less, although it's possible, i dunno i still dunno how to do that properly myself, so i stick with tables.

Jazzee · 04-28-2005, 12:51 PM

A div is just a container. You put pieces of content inside them and use css to tell them how to display the content.

Someone else can probably explain that better.

I'd suggest you read some tutorials.
http://www.w3schools.com/css/default.asp
http://www.tizag.com/cssT/
http://webdesign.about.com/od/css/a/aa102102a.htm