28172 sujets

CSS et mise en forme, CSS3

Difficulter à transformer une présentation tableau en Div

Bonjour à tous,

Désolé de vous déranger mais je bloque pour passer d'une présentation "table" à une présentation "div".

La problématique me semble être principalement au niveau de deux zones "élastiques" autour d'une zone figée.

Voici le code en "table" suivi de ma base en "div" (je ne laisse que la base car mes tests ne sont pas présentables Smiley smile ).

Veuillez excuser la longueur mais le problème n'est pas simple.

Merci d'avance pour votre aide

Christophe

Code en table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
  .header {
    background:#ff0000;
  }
  .navigator_container {
    vertical-align:top;
    width:100px;
  }
  .navigator_menu {
    background:#00ff00;
  }
  .navigator_end {
    background:#0000ff;
  }
  .preview {
    width:150px;
    height:150px;
    text-align:center;
    border-style:solid;
  }
  .go_right {
    text-align:left; 
  }
  .go_left {
    text-align:right; 
  }
</style></head>
<body>
 <table border="0" cellspacing="0" width="100%">
  <tr>
   <td colspan="4" class="header">
    This is the title
   </td>
  </tr>
  <tr>
   <td class="navigator_container">
    <table border="0" cellspacing="0" width="100%">
     <tr>
      <td class="navigator_menu">
       Selection 1<br />
       Sel 2<br />
       Select 3
      </td>
     </tr>
     <tr>
      <td class="navigator_end">
       -Nav End-
      </td>
     </tr>
    </table>
   </td>
   <td rowspan="2" class="go_left">&lt;</td>
   <td rowspan="2" class="preview">Image</td>
   <td rowspan="2" class="go_right">&gt;</td>
  </tr>
 </table>
</body>
</html>


Base du code en div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
  .header {
    background:#ff0000;
  }
  .navigator_container {
    vertical-align:top;
    width:100px;
  }
  .navigator_menu {
    background:#00ff00;
  }
  .navigator_end {
    background:#0000ff;
  }
  .preview {
    width:150px;
    height:150px;
    text-align:center;
    border-style:solid;
  }
  .go_right {
    text-align:left; 
  }
  .go_left {
    text-align:right; 
  }
</style></head>
<body>
 <div class="header">
  This is the title
 </div>
 <div class="navigator_menu">
  Selection 1<br />
  Sel 2<br />
  Select 3
 </div>
 <div class="navigator_end">
  -Nav End-
 </div>
 <div class="go_left">&lt;</div>
 <div class="preview">Image</div>
 <div class="go_right">&gt;</div>
</body>
</html>

Modifié par chris_asn (15 Sep 2010 - 17:05)
Sujet clos
Aller à