Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 2894

Aug 7th, 2009

Div equivalent for table stucture

Expand Post »

Hey Everyone,

I want to replace the following code with it's DIV equivalent.

<body>
<div id="container">
<div id="header">
<table width="901" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" style="padding-left:20px"><img src="images/thinktankname.png" alt="Think Tank for African American Progress" /></td>
  </tr>
  <tr style="padding-bottom:20px">
    <td style=" padding-right:10px"><img src="images/thinktanklogo.png" alt="think thank logo" /></td>
    <td><img src="images/thinktank.jpg" width="657" height="194" /></td>
  </tr>
</table>

</div>
</div>
</body>

When I tried two floating divs the images are in the right spots but the background color of the containing div doesn't show behind them. I get 2 different incorrect results from both IE and Firefox.

HTML and CSS Syntax (Toggle Plain Text)
<body>
<div id="container">
<div id="header">
<div><img src="images/thinktankname.png" /></div>
<div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div>
<div style="float:right"><img src="images/thinktank.jpg" /></div>
</div>
</div>
</body>
<body>
<div id="container">
<div id="header">
<div><img src="images/thinktankname.png" /></div>
<div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div>
<div style="float:right"><img src="images/thinktank.jpg" /></div>
</div>
</div>
</body>

Here is some of the CSS:

(Toggle Plain Text)

body{
background:#faca0a;
background-repeat:repeat-x;
background-image:url(images/background.jpg);
background-position: top;
}

div#container{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	color:#660033;
	margin-left:50px;
	margin-right:50px;
	padding:0px;
	background-color: #660066;
	text-align: justify;
	top: 0px;
}


#header {
	padding-left: 20px;
	padding-bottom: 10px;
}

Similar Threads

Gap between div and table in HTML and CSS
how to refresh paritcular div of a table in JavaScript / DHTML / AJAX
Help CSS & div win table layouts !! in HTML and CSS
dispalying msg on div with mouseover on table in HTML and CSS
css div's and tables table cells and scrolling in HTML and CSS

Reliable

Reputation Points: 11

Solved Threads: 3

Junior Poster

Offline

152 posts
since Jul 2007

Permalink

Aug 11th, 2009

Re: Div equivalent for table stucture

If you are expecting the background color to fill the div around the edge of the square image, you need some padding.

If you expect the background color to fill in around an irregularly shaped object in the image, you have to do one of two things, because all images are rectangular:

1. Make the outside edge of the image the same color as the background.

2. Use a .gif file, and make the outside edge of the image transparent. Then the background color will show through.

If the outside edge of the image is white, it will show up as white.

Last edited by MidiMagic; Aug 11th, 2009 at 10:48 pm.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 21st, 2009

Re: Div equivalent for table stucture

Click to Expand / Collapse Quote originally posted by Reliable ...

Hey Everyone,

I want to replace the following code with it's DIV equivalent.
(Toggle Plain Text)
<body>
<div id="container">
<div id="header">
<table width="901" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" style="padding-left:20px"><img src="images/thinktankname.png" alt="Think Tank for African American Progress" /></td>
  </tr>
  <tr style="padding-bottom:20px">
    <td style=" padding-right:10px"><img src="images/thinktanklogo.png" alt="think thank logo" /></td>
    <td><img src="images/thinktank.jpg" width="657" height="194" /></td>
  </tr>
</table>

</div>
</div>
</body>
<body> <div id="container"> <div id="header"> <table width="901" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" style="padding-left:20px"><img src="images/thinktankname.png" alt="Think Tank for African American Progress" /></td> </tr> <tr style="padding-bottom:20px"> <td style=" padding-right:10px"><img src="images/thinktanklogo.png" alt="think thank logo" /></td> <td><img src="images/thinktank.jpg" width="657" height="194" /></td> </tr> </table> </div> </div> </body>
When I tried two floating divs the images are in the right spots but the background color of the containing div doesn't show behind them. I get 2 different incorrect results from both IE and Firefox.
HTML and CSS Syntax (Toggle Plain Text)
<body>
<div id="container">
<div id="header">
<div><img src="images/thinktankname.png" /></div>
<div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div>
<div style="float:right"><img src="images/thinktank.jpg" /></div>
</div>
</div>
</body>
<body> <div id="container"> <div id="header"> <div><img src="images/thinktankname.png" /></div> <div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div> <div style="float:right"><img src="images/thinktank.jpg" /></div> </div> </div> </body>
Here is some of the CSS:
(Toggle Plain Text)
body{
background:#faca0a;
background-repeat:repeat-x;
background-image:url(images/background.jpg);
background-position: top;
}

div#container{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	color:#660033;
	margin-left:50px;
	margin-right:50px;
	padding:0px;
	background-color: #660066;
	text-align: justify;
	top: 0px;
}


#header {
	padding-left: 20px;
	padding-bottom: 10px;
}
body{ background:#faca0a; background-repeat:repeat-x; background-image:url(images/background.jpg); background-position: top; } div#container{ font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#660033; margin-left:50px; margin-right:50px; padding:0px; background-color: #660066; text-align: justify; top: 0px; } #header { padding-left: 20px; padding-bottom: 10px; }

I invite you to examine this example http://www.daniweb.com/forums/post94...tml#post948604

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

510 posts
since Jun 2008

Permalink

Aug 21st, 2009

Re: Div equivalent for table stucture

Click to Expand / Collapse Quote originally posted by Troy III ...

I invite you to examine this example http://www.daniweb.com/forums/post94...tml#post948604

But I'm sure you already did that with no avail.
Here is my valid cross-browser working code:

HTML and CSS Syntax (Toggle Plain Text)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<title>Table Emulator</title>
 
<meta http-equiv="content-type" content="text/html;charset=utf-8">
 
<style type="text/css">
*{border:none; padding: 0; margin: auto; overflow: auto}
div, span {border: solid 1px gray}
span {display:inline-block; vertical-align: middle;}
</style>
 
</head>
 
<body>
<div id="header" style="width: 901px;">
   <div>
   <span style="height:30px; display:block">
   your content here
   </span>
   </div>
   <div>
   <span style="height:50px; width: 150px;">
   your content here
   </span><span style="height: 194px; width:657px;"> <!-- prevent white-space addition on non-IE agents -->
   your content here
   </span></div>
</div>
 
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Table Emulator</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<style type="text/css">
*{border:none; padding: 0; margin: auto; overflow: auto}
div, span {border: solid 1px gray}
span {display:inline-block; vertical-align: middle;}
</style>

</head>

<body>
<div id="header" style="width: 901px;">
   <div>
   <span style="height:30px; display:block">
   your content here
   </span>
   </div>
   <div>
   <span style="height:50px; width: 150px;">
   your content here
   </span><span style="height: 194px; width:657px;"> <!-- prevent white-space addition on non-IE agents -->
   your content here
   </span></div>
</div>

</body>
</html>

Advice:
As you already know, -for png transparent images on IE, you will need alphaImageLoader. See my strategy of using AIL in cross-browser compatible way on a document that validates in both tests here :http://www.daniweb.com/forums/post95...tml#post950195

Last edited by Troy III; Aug 21st, 2009 at 9:14 am.

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

510 posts
since Jun 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: "downloading interlock" ? (what IS that?)

Next Thread in HTML and CSS Forum Timeline: Html & css

DaniWeb Message

Cancel Changes

User Name
Password