Interface qui se disloque

Fermé
Erider Messages postés 5 Date d'inscription lundi 29 octobre 2007 Statut Membre Dernière intervention 2 mars 2008 - 29 oct. 2007 à 16:33
Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 9 nov. 2007 à 22:45
Bonjour,

Je suis entrain de créer un site et je me vois confronté à un problème :
Mon interface à été crée sous photoshop puis exportée en html. J'ai attribué les bonnes dimentions aux cellules suivant la taille des images mais losque je souhaite ajouter du contenu dans la page (l.35) mon interface se disloque comme si les cellules étaient étirables alors que je leurs aient atribuées des taille bien définies (je sais pas si je me suis bien fait comprendre).

Voici le code source :

<html>
<head>
<title>interface v1.2</title>
<meta content="text/html; charset=iso-8859-1"
http-equiv="Content-Type">
</head>
<body leftmargin="0" topmargin="0"
style="background-color: rgb(255, 255, 255);" marginheight="0"
marginwidth="0">
<table style="width: 791px; height: 600px;" id="Tableau_01"
border="0" cellpadding="0" cellspacing="0">
<body>
<tr>
<td style="height: 55px; width: 193px;" colspan="3">
<img src="images/interface-v1.2_01.jpg" alt=""
height="155" width="193"></td>
<td style="height: 179px; width: 597px;" colspan="2"
rowspan="2"> <img src="images/interface-v1.2_02.jpg"
alt="" height="179" width="597"></td>
<td> <img src="images/spacer.gif" alt=""
height="155" width="1"></td>
</tr>
<tr>
<td style="height: 32px; width: 170px;" colspan="2"
rowspan="2"> <img style="width: 170px; height: 32px;"
src="images/interface-v1.2_03.jpg" alt=""></td>
<td style="height: 100%; width: 23px;" rowspan="10"
background="images/interface-v1.2_04.jpg">
<br>
</td>
<td> <img src="images/spacer.gif" alt=""
height="24" width="1"></td>
</tr>
<tr>
<td style="height: 100%; width: 564px;" rowspan="9"> //LIGNE 35
<br>

</td>
<td style="height: 100%; width: 33px;" rowspan="9"
background="images/interface-v1.2_06.jpg">
<br>
</td>
<td> <img src="images/spacer.gif" alt=""
height="8" width="1"></td>
</tr>
<tr>
<td style="height: 29px; width: 170px;" colspan="2">
<img style="width: 170px; height: 29px;"
src="images/interface-v1.2_07.jpg" alt=""></td>
<td> <img src="images/spacer.gif" alt=""
height="29" width="1"></td>
</tr>
<tr>
<td style="height: 29px; width: 170px;" colspan="2">
<img src="images/interface-v1.2_08.jpg" alt=""
height="29" width="170"></td>
<td> <img src="images/spacer.gif" alt=""
height="29" width="1"></td>
</tr>
<tr>
<td style="height: 29px; width: 170px;" colspan="2">
<img src="images/interface-v1.2_09.jpg" alt=""
height="29" width="170"></td>
<td> <img src="images/spacer.gif" alt=""
height="29" width="1"></td>
</tr>
<tr>
<td style="height: 34px; width: 170px;" colspan="2">
<img src="images/interface-v1.2_10.jpg" alt=""
height="34" width="170"></td>
<td> <img src="images/spacer.gif" alt=""
height="34" width="1"></td>
</tr>
<tr>
<td style="height: 47px; width: 170px;" colspan="2">
<img style="width: 170px; height: 47px;"
src="images/interface-v1.2_11.jpg" alt=""></td>
<td> <img src="images/spacer.gif" alt=""
height="47" width="1"></td>
</tr>
<tr>
<td
style="height: 94px; width: 14px; background-color: rgb(0, 0, 0);">
<br>
</td>
<td style="height: 94px; width: 156px;"> <img
src="images/interface-v1.2_13.jpg" alt="" height="94"
width="156"></td>
<td> <img src="images/spacer.gif" alt=""
height="94" width="1"></td>
</tr>
<tr>
<td style="height: 27px; width: 170px;" colspan="2">
<img src="images/interface-v1.2_14.jpg" alt=""
height="27" width="170"></td>
<td> <img src="images/spacer.gif" alt=""
height="27" width="1"></td>
</tr>
<tr>
<td
style="height: 100%; width: 170px; background-color: rgb(0, 0, 0);"
colspan="2" rowspan="2"> <br>
</td>
<td> <img src="images/spacer.gif" alt=""
height="79" width="1"></td>
</tr>
<tr>
<td style="height: 45px; width: 620px;" colspan="3">
<img src="images/interface-v1.2_16.jpg" alt=""
height="45" width="620"></td>
<td> <img src="images/spacer.gif" alt=""
height="45" width="1"></td>
</tr>
</tbody>
</table>
</body>
</html>

Voila donc si quelqu'un pouvais m'aider se serai super simpat car je suis vraiment bloqué
Merci d'avance
Yoann

5 réponses

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
29 oct. 2007 à 19:05
salut,

qu'est ce qui t'a pondu le code ?

tu n'as pas de DocType (ligne qui donne la version du langage) et les tableaux ne devraient plus être utilisés depuis belle lurette pour faire de la mise en page.

ton problème survient sur tous les navigateurs ?

0
gryzzly Messages postés 4607 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 323
29 oct. 2007 à 19:08
'lut

une remarque au passage (pas taper) :

- tu veux pas nous refaire ccm sans tableaux ?
                                               --> je connais []


PS : les tableaux sont quand même vachement utiles dans certaines situations. Par exemple pour la mise en page d'un formulaire (un exple parmis tant d'autres), mais c'est vrai que pour l'interface globale, il vaut mieux les blocs.
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921 > gryzzly Messages postés 4607 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020
29 oct. 2007 à 19:13
salut,

un formulaire dans un tableau c'est un non-sens pas une mise en page !
0
Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 771
29 oct. 2007 à 19:32
Bonjour,

En attendant, essaye comme ça.
CSS
  <style type="text/css">
    td { border : 1px solid #f00; }
    #dans_td {
      height: 100%;
      width: 564px;
      background-color : #aaa;
      }
  </style>
HTML
      <td style="height: 100%; width: 564px;" rowspan="9">
        <div id="dans_td">
          //LIGNE 35
        </div>
      </td>
Ça donne ça ou ça.


++
http://gihef.bey.free.fr/CCM/div/btn_code.png

--
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
29 oct. 2007 à 19:36
salut Gihef,

et oui, comme d'habitude y a ceux qui discutent et y a ceux qui bossent !!!
0
Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 771 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
29 oct. 2007 à 19:39
Salut Dalida,

À chacun son tour (-;

--
0
gryzzly Messages postés 4607 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 323 > Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023
29 oct. 2007 à 19:48
Et ceux qui s'incrustent ... sans faire tourner :-D
0
Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 771 > gryzzly Messages postés 4607 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020
29 oct. 2007 à 20:00
Des noms, des noms…

--
0
gryzzly Messages postés 4607 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 323 > Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023
29 oct. 2007 à 20:02
0
Erider Messages postés 5 Date d'inscription lundi 29 octobre 2007 Statut Membre Dernière intervention 2 mars 2008
29 oct. 2007 à 20:05
Merci de vos réponses (ça devient limite chat à la fin mais bon ...)
Je vais essayer ta solution Gihef et je vous tien au jus.
0
gryzzly Messages postés 4607 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 323
29 oct. 2007 à 20:06
multivitamines pour moi ;-)
0
Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 771 > gryzzly Messages postés 4607 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020
29 oct. 2007 à 20:09
Avec ou sans houblon ?

--
0
gryzzly Messages postés 4607 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 323 > Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023
29 oct. 2007 à 20:10
Sans alcool 364 jours par an pour moi (véridique)... j'ai déjà consommé ma journée...
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921 > Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023
29 oct. 2007 à 21:07
du Cognac pour moi !

Avec alcool 364 jours par an pour moi (véridique)... j'ai déjà consommé ma journée...

et je comprends vraiment pas pourquoi Erider trouve que ça vire au chat !

0
Erider Messages postés 5 Date d'inscription lundi 29 octobre 2007 Statut Membre Dernière intervention 2 mars 2008
9 nov. 2007 à 21:56
Rebonjour.
J'ai testé la métode de Gihef et elle marche ... en partie. Je dis en partie car il y a toujours une cellule qui s'étire au niveau de la ligne 24 (A partir du commentaire).
Voila donc si quelqu'un pouvai m'aider je lui serai très reconnaissant et je remercie encore Gihef pour avoir réglé un de problèmes
Bonne soirée à tous

<title>interface v1.2</title>
  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
  
  
  <style type="text/css">
    td { border : 1px solid #f00; }
    #dans_td {
      height: 100%;
      width: 564px;
      background-color : #aaa;
      }
  </style>
</head>
<body leftmargin="0" topmargin="0" style="background-color: rgb(255, 255, 255);" marginheight="0" marginwidth="0">
<table style="width: 791px;" id="Tableau_01" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>

      <td style="height: 55px; width: 193px;" colspan="3">
      <img src="images/interface-v1.2_01.jpg" alt="" height="155" width="193"></td>
      <td style="height: 179px; width: 597px;" colspan="2" rowspan="2"> <img src="images/interface-v1.2_02.jpg" alt="" height="179" width="597"></td>
      <td> <img src="images/spacer.gif" alt="" height="155" width="1"></td>
    </tr>
    <tr>
      <td style="height: 32px; width: 170px;" colspan="2" rowspan="2"> <img style="width: 170px; height: 32px;" src="images/interface-v1.2_03.jpg" alt=""></td>

      <td style="height: 100%; width: 23px;" rowspan="10" background="images/interface-v1.2_04.jpg"> <br>
      </td>
      <td> <img src="images/spacer.gif" alt="" height="24" width="1"></td>
    </tr>
    <tr>
      <td style="height: 100%; width: 564px;" rowspan="9">
      <div id="dans_td">
        //LIGNE 35

<tr>
//Début des ennuis ^_^
<td style="height: 32px; width: 170px;" colspan="2"
rowspan="2"> <img style="width: 170px; height: 32px;"
src="images/interface-v1.2_03.jpg" alt=""></td>
<td style="height: 100%; width: 23px;" rowspan="10"
background="images/interface-v1.2_04.jpg">
<br>
</td>
<td> <img src="images/spacer.gif" alt=""
height="24" width="1"></td>
</tr>
<tr>
<td style="height: 100%; width: 564px;" rowspan="9"> //LIGNE 35
<br>
</td>
<td style="height: 100%; width: 33px;" rowspan="9"
background="images/interface-v1.2_06.jpg">
<br>
</td>
<td> <img src="images/spacer.gif" alt=""
height="8" width="1"></td>
</tr>
<tr>
<td style="height: 29px; width: 170px;" colspan="2">
<img style="width: 170px; height: 29px;"
src="images/interface-v1.2_07.jpg" alt=""></td>
<td> <img src="images/spacer.gif" alt=""

height="29" width="1"></td>
</tr>
<tr>
<td style="height: 29px; width: 170px;" colspan="2">
<img src="images/interface-v1.2_08.jpg" alt=""
height="29" width="170"></td>
<td> <img src="images/spacer.gif" alt=""
height="29" width="1"></td>
</tr>
<tr>
<td style="height: 29px; width: 170px;" colspan="2">
<img src="images/interface-v1.2_09.jpg" alt=""
height="29" width="170"></td>
<td> <img src="images/spacer.gif" alt=""
height="29" width="1"></td>
</tr>
<tr>
<td style="height: 34px; width: 170px;" colspan="2">
<img src="images/interface-v1.2_10.jpg" alt=""
height="34" width="170"></td>
<td> <img src="images/spacer.gif" alt=""
height="34" width="1"></td>
</tr>
<tr>
<td style="height: 47px; width: 170px;" colspan="2">
<img style="width: 170px; height: 47px;"
src="images/interface-v1.2_11.jpg" alt=""></td>
<td> <img src="images/spacer.gif" alt=""
height="47" width="1"></td>
</tr>
<tr>
<td
style="height: 94px; width: 14px; background-color: rgb(0, 0, 0);">
<br>
</td>
<td style="height: 94px; width: 156px;"> <img
src="images/interface-v1.2_13.jpg" alt="" height="94"
width="156"></td>

<td> <img src="images/spacer.gif" alt=""
height="94" width="1"></td>
</tr>
<tr>
<td style="height: 27px; width: 170px;" colspan="2">
<img src="images/interface-v1.2_14.jpg" alt=""
height="27" width="170"></td>
<td> <img src="images/spacer.gif" alt=""
height="27" width="1"></td>
</tr>
<tr>
<td
style="height: 100%; width: 170px; background-color: rgb(0, 0, 0);"
colspan="2" rowspan="2"> <br>
</td>
<td> <img src="images/spacer.gif" alt=""
height="79" width="1"></td>
</tr>
<tr>
<td style="height: 45px; width: 620px;" colspan="3">
<img src="images/interface-v1.2_16.jpg" alt=""
height="45" width="620"></td>
<td> <img src="images/spacer.gif" alt=""
height="45" width="1"></td>
</tr> 
        </div>
      </td>
      <td style="height: 100%; width: 33px;" rowspan="9" background="images/interface-v1.2_06.jpg"> <br>
      </td>
      <td> <img src="images/spacer.gif" alt="" height="8" width="1"></td>
    </tr>
    <tr>
      <td style="height: 29px; width: 170px;" colspan="2">

      <img style="width: 170px; height: 29px;" src="images/interface-v1.2_07.jpg" alt=""></td>
      <td> <img src="images/spacer.gif" alt="" height="29" width="1"></td>
    </tr>
    <tr>
      <td style="height: 29px; width: 170px;" colspan="2">
      <img src="images/interface-v1.2_08.jpg" alt="" height="29" width="170"></td>
      <td> <img src="images/spacer.gif" alt="" height="29" width="1"></td>
    </tr>

    <tr>
      <td style="height: 29px; width: 170px;" colspan="2">
      <img src="images/interface-v1.2_09.jpg" alt="" height="29" width="170"></td>
      <td> <img src="images/spacer.gif" alt="" height="29" width="1"></td>
    </tr>
    <tr>
      <td style="height: 34px; width: 170px;" colspan="2">
      <img src="images/interface-v1.2_10.jpg" alt="" height="34" width="170"></td>

      <td> <img src="images/spacer.gif" alt="" height="34" width="1"></td>
    </tr>
    <tr>
      <td style="height: 47px; width: 170px;" colspan="2">
      <img style="width: 170px; height: 47px;" src="images/interface-v1.2_11.jpg" alt=""></td>
      <td> <img src="images/spacer.gif" alt="" height="47" width="1"></td>
    </tr>
    <tr>

      <td style="height: 94px; width: 14px; background-color: rgb(0, 0, 0);">
      <br>
      </td>
      <td style="height: 94px; width: 156px;"> <img src="images/interface-v1.2_13.jpg" alt="" height="94" width="156"></td>
      <td> <img src="images/spacer.gif" alt="" height="94" width="1"></td>
    </tr>
    <tr>
      <td style="height: 27px; width: 170px;" colspan="2">

      <img src="images/interface-v1.2_14.jpg" alt="" height="27" width="170"></td>
      <td> <img src="images/spacer.gif" alt="" height="27" width="1"></td>
    </tr>
    <tr>
      <td style="height: 100%; width: 170px; background-color: rgb(0, 0, 0);" colspan="2" rowspan="2"> <br>
      </td>
      <td> <img src="images/spacer.gif" alt="" height="79" width="1"></td>

    </tr>
    <tr>
      <td style="height: 45px; width: 620px;" colspan="3">
      <img src="images/interface-v1.2_16.jpg" alt="" height="45" width="620"></td>
      <td> <img src="images/spacer.gif" alt="" height="45" width="1"></td>
    </tr>
  
  
  </tbody>
</table>
</body>

</html>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Gihef Messages postés 5146 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 771
9 nov. 2007 à 22:45
En fait, je ne comprends pas ce que tu veux faire exactement.
Et un tableau c'est difficile à lire…

Cependant, tu écris
      <td style="height: 100%; width: 564px;" rowspan="9">
      <div id="dans_td">
        //LIGNE 35

<tr>
//Début des ennuis ^_^
Tu aurais pu écrire “Début des ennuis” juste une ligne au-dessus.
La <div> ne peut pas commencer dans un <td> et se continuer en dehors.

Mon exemple était
      <td style="height: 100%; width: 564px;" rowspan="9">
        <div id="dans_td">
          //LIGNE 35
        </div>
      </td>


++
Un commentaire en HTML, c'est <!-- espace … espace -->

--
0