TABLE to DIV

  • conn2prince
  • Graduate
  • Graduate
  • User avatar
  • Posts: 119

Post 3+ Months Ago

Hi,

I need to convert the following code to DIV (with <ul><li>).Please do attach the css with replies.

Code: [ Select ]
<TABLE WIDTH=998 BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR>
         <TD><IMG SRC="images/_topmenu_01.gif" WIDTH=110 HEIGHT=13 ALT=""></TD>
         <TD><IMG SRC="images/_topmenu_02.gif" WIDTH=97 HEIGHT=13 ALT=""></TD>
         <TD><IMG SRC="images/_topmenu_03.gif" WIDTH=99 HEIGHT=13 ALT=""></TD>
         <TD><IMG SRC="images/_topmenu_04.gif" WIDTH=130 HEIGHT=13 ALT=""></TD>
         <TD><IMG SRC="images/_topmenu_05.gif" WIDTH=137 HEIGHT=13 ALT=""></TD>
         <TD><IMG SRC="images/_topmenu_06.gif" WIDTH=92 HEIGHT=13 ALT=""></TD>
         <TD><IMG SRC="images/_topmenu_07.gif" WIDTH=82 HEIGHT=13 ALT=""></TD>
         <TD><IMG SRC="images/_topmenu_08.gif" WIDTH=119 HEIGHT=13 ALT=""></TD>
         <TD><IMG SRC="images/_topmenu_09.gif" WIDTH=132 HEIGHT=13 ALT=""></TD>
        </TR>
     </TABLE>
  1. <TABLE WIDTH=998 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  2.         <TR>
  3.          <TD><IMG SRC="images/_topmenu_01.gif" WIDTH=110 HEIGHT=13 ALT=""></TD>
  4.          <TD><IMG SRC="images/_topmenu_02.gif" WIDTH=97 HEIGHT=13 ALT=""></TD>
  5.          <TD><IMG SRC="images/_topmenu_03.gif" WIDTH=99 HEIGHT=13 ALT=""></TD>
  6.          <TD><IMG SRC="images/_topmenu_04.gif" WIDTH=130 HEIGHT=13 ALT=""></TD>
  7.          <TD><IMG SRC="images/_topmenu_05.gif" WIDTH=137 HEIGHT=13 ALT=""></TD>
  8.          <TD><IMG SRC="images/_topmenu_06.gif" WIDTH=92 HEIGHT=13 ALT=""></TD>
  9.          <TD><IMG SRC="images/_topmenu_07.gif" WIDTH=82 HEIGHT=13 ALT=""></TD>
  10.          <TD><IMG SRC="images/_topmenu_08.gif" WIDTH=119 HEIGHT=13 ALT=""></TD>
  11.          <TD><IMG SRC="images/_topmenu_09.gif" WIDTH=132 HEIGHT=13 ALT=""></TD>
  12.         </TR>
  13.      </TABLE>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

okay in your HTML you will have the following:
Code: [ Select ]
<div id='list'>
<ul>
<li><img src='images/_topmenu_01.gif' alt='alt text here' /></li>
<li><img src='images/_topmenu_02.gif' alt='alt text here' /></li>
<li><img src='images/_topmenu_03.gif' alt='alt text here' /></li>
<li><img src='images/_topmenu_04.gif' alt='alt text here' /></li>
<li><img src='images/_topmenu_05.gif' alt='alt text here' /></li>
<li><img src='images/_topmenu_06.gif' alt='alt text here' /></li>
<li><img src='images/_topmenu_07.gif' alt='alt text here' /></li>
<li><img src='images/_topmenu_08.gif' alt='alt text here' /></li>
<li><img src='images/_topmenu_09.gif' alt='alt text here' /></li>
</ul>
</div>
  1. <div id='list'>
  2. <ul>
  3. <li><img src='images/_topmenu_01.gif' alt='alt text here' /></li>
  4. <li><img src='images/_topmenu_02.gif' alt='alt text here' /></li>
  5. <li><img src='images/_topmenu_03.gif' alt='alt text here' /></li>
  6. <li><img src='images/_topmenu_04.gif' alt='alt text here' /></li>
  7. <li><img src='images/_topmenu_05.gif' alt='alt text here' /></li>
  8. <li><img src='images/_topmenu_06.gif' alt='alt text here' /></li>
  9. <li><img src='images/_topmenu_07.gif' alt='alt text here' /></li>
  10. <li><img src='images/_topmenu_08.gif' alt='alt text here' /></li>
  11. <li><img src='images/_topmenu_09.gif' alt='alt text here' /></li>
  12. </ul>
  13. </div>

CSS:
Code: [ Select ]
div#list
{
width:980px;
padding:0px;
margin:0px;
}
  1. div#list
  2. {
  3. width:980px;
  4. padding:0px;
  5. margin:0px;
  6. }

hope this helps ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8411
  • Loc: USA

Post 3+ Months Ago

How about float: left;?

The <TD>...</TD> goes from left to right |---|---|---|---|---|---|

So all that should be in one row...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

oh yeah ofcourse ... I was not having the best day yesterday, so my focus was gone ... so yeah that should be added ...
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Uhh. Stay away from float if you can.
display: inline;
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8411
  • Loc: USA

Post 3+ Months Ago

neksus wrote:
Uhh. Stay away from float if you can.
display: inline;

Why?
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

neksus is right, float will break the rest of the layout for you, so you'll have to add a clear:both first to fix that where as with display:inline it will display correctly.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8411
  • Loc: USA

Post 3+ Months Ago

righteous_trespasser wrote:
neksus is right, float will break the rest of the layout for you, so you'll have to add a clear:both first to fix that where as with display:inline it will display correctly.

Oh ok... Thanks for the clarification... :)

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 54 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.