using <div> tags instead of <table>, <tr>, <td>

[CdnRebel]

Hi,

I am told it is better to use <div> tags than <table>, <tr>, <td>. Since I am creating a new website, I thought I should start with <div> tags. I used Adobe Photoshop 7 to convert my graphics to code, but it used <table>, <tr> and <td> tags. Although there are samples for changing most of the variables, I was unable to find samples where they dealt with the colspan and rowspan features. How would I convert the following?:

<TR>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="images/homePage_01.jpg" WIDTH=209 HEIGHT=149 ALT=""></TD>
<TD COLSPAN=12>
<IMG SRC="images/centre_Top.jpg" WIDTH=438 HEIGHT=92 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="images/homePage_03.jpg" WIDTH=153 HEIGHT=149 ALT=""></TD>
</TR>

Thanks...

[chicgeek]

If you have a sliced layout and don't have a cue about css positioning, it might be easier to use the tabling you have.

What's with your crazy colspans? And I'm not sure your plans for the what goes in the second row, under the second image.

If you want to do it "right" with all CSS...

To go in the header, or an externally referred CSS file.

html, body, #wrap {
  width: 100%;
  margin: 0px;
  padding: 0px;
  }
#ltop {
  background-image: url(images/homePage_01.jpg);
  width: 209px;
  height: 149px;
  position: relative;
  float: left;
  }
#mtop {
  background-image: url(images/centre_Top.jpg);
  width: 438px;
  height: 92px;
  position: relative;
  float: left;
  }
#rtop {
  background-image: url(images/homePage_03.jpg);
  width: 153px;
  height: 149px;
  position: relative;
  float: left;
  }
.clear {
  clear: both;
  }

To go in your html file.

<div id="header">

<div id="ltop"></div>
<div id="mtop"></div>
<div id="rtop"></div>
<div class="clear"></div>

</div>

[CdnRebel]

The second row goes right below the second image between the first and third images. The second row is a menu bar and the bottom row of the webpage also has a number of tabs for clicking. So I need to be able to indicate the colspan and rowspan values for positioning somewhere. I am working on putting the information into a style sheet. I have a lot to learn yet. What does that last line -- #clear {
clear: both;
}
do?

Thanks

[chicgeek]

Is your website live? Might be easier to see what you're trying to do instead of verbally describing it.

And no better time to learn this than the present! Try taking a skim of some of the features here, particularly position: absolute, position: relative, and floats:

• http://www.barelyfitz.com/screencast...s/positioning/
• http://www.w3schools.com/css/css_positioning.asp (more in-depth)
• http://www.stopdesign.com/present/20...eattle/tables/ (Great slideshow with no dialogue, but great diagrams)

The .clear class (I had initially put a #clear id, which is incorrect, sorry.) "resets" the layout, so that any new content will start after any floats that you used, instead of (potentially) beside it. A float essentially pushes things to one side, leaving the rest of the content to flow around it; a clear ensures content to start on a new line after the end of any floats.



More info. It's worth it.

[CdnRebel]

Hi Laura,

No, the website is not live yet. I am just beginning to put it together. Thanks for all the info. I've checked them all and I have a better understanding. I'll just have to play around with it a bit to see what I can do with it.

Thanks again,
Mary

[chicgeek]

No problem, Mary!

It's a pretty steep learning curve, but worth the trudge. Play around with duplicating simple examples for a weekend and it'll come together. Ask here if you need any more help.

PS. Huzzah, Canadians.

[CdnRebel]

Laura,

What does the #wrap in your style sheet do?

Thanks,
Mary

[chicgeek]

The wrap is essentially just a container. Keeps things nicely in a box. Sometimes it's useful to nest divs, sometimes its not. For example, if you have a page where you want all the content centered, you'd have #wrap with "padding: 0 auto;".

Here's a site and its css file that uses some floats. Might help you, might confuse you. If you'd like I could probably find a simpler example:

http://beartoothkawasaki.com/
http://beartoothkawasaki.com/style.css

Note in the css:

#navigation {
	width: 171px;
	position: relative;
	float: left;
	}
#content {
	width: 601px;
	position: relative;
	float: left;
	}