Div equivalent for table stucture

Reply

•
•
Join Date: Jul 2007
Posts: 91
Reputation: Reliable is an unknown quantity at this point 
Solved Threads: 2
Reliable Reliable is offline Offline
Junior Poster in Training

Div equivalent for table stucture

 
0
  #1
Aug 7th, 2009
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) 
  1. <body>
  2. <div id="container">
  3. <div id="header">
  4. <div><img src="images/thinktankname.png" /></div>
  5. <div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div>
  6. <div style="float:right"><img src="images/thinktank.jpg" /></div>
  7. </div>
  8. </div>
  9. </body>

Here is some of the CSS:

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;
}
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Div equivalent for table stucture

 
0
  #2
Aug 11th, 2009
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Div equivalent for table stucture

 
0
  #3
Aug 21st, 2009
•
•
•
•
Originally Posted by Reliable View 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) 
  1. <body>
  2. <div id="container">
  3. <div id="header">
  4. <div><img src="images/thinktankname.png" /></div>
  5. <div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div>
  6. <div style="float:right"><img src="images/thinktank.jpg" /></div>
  7. </div>
  8. </div>
  9. </body>

Here is some of the CSS:

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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Div equivalent for table stucture

 
0
  #4
Aug 21st, 2009
•
•
•
•
Originally Posted by Troy III View Post
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) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html>
  5. <head>
  6. <title>Table Emulator</title>
  7.  
  8. <meta http-equiv="content-type" content="text/html;charset=utf-8">
  9.  
  10. <style type="text/css">
  11. *{border:none; padding: 0; margin: auto; overflow: auto}
  12. div, span {border: solid 1px gray}
  13. span {display:inline-block; vertical-align: middle;}
  14. </style>
  15.  
  16. </head>
  17.  
  18. <body>
  19. <div id="header" style="width: 901px;">
  20.    <div>
  21.    <span style="height:30px; display:block">
  22.    your content here
  23.    </span>
  24.    </div>
  25.    <div>
  26.    <span style="height:50px; width: 150px;">
  27.    your content here
  28.    </span><span style="height: 194px; width:657px;"> <!-- prevent white-space addition on non-IE agents -->
  29.    your content here
  30.    </span></div>
  31. </div>
  32.  
  33. </body>
  34. </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.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



Tag cloud for HTML and CSS
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash font fonts form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC