Interface qui se disloque

Erider Messages postés 5 Date d'inscription   Statut Membre Dernière intervention   -  
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   -
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
A voir également:

5 réponses

Réponse 1 / 5
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
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 4608 Date d'inscription   Statut Contributeur Dernière intervention   1 335
 
'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   Statut Contributeur Dernière intervention   922 > gryzzly Messages postés 4608 Date d'inscription   Statut Contributeur Dernière intervention  
 
salut,

un formulaire dans un tableau c'est un non-sens pas une mise en page !
0
Réponse 2 / 5
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
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   Statut Contributeur Dernière intervention   922
 
salut Gihef,

et oui, comme d'habitude y a ceux qui discutent et y a ceux qui bossent !!!
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779 > Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention  
 
Salut Dalida,

À chacun son tour (-;

--
0
gryzzly Messages postés 4608 Date d'inscription   Statut Contributeur Dernière intervention   1 335 > Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention  
 
Et ceux qui s'incrustent ... sans faire tourner :-D
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779 > gryzzly Messages postés 4608 Date d'inscription   Statut Contributeur Dernière intervention  
 
Des noms, des noms…

--
0
gryzzly Messages postés 4608 Date d'inscription   Statut Contributeur Dernière intervention   1 335 > Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention  
 
0
Réponse 3 / 5
Erider Messages postés 5 Date d'inscription   Statut Membre Dernière intervention  
 
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 4608 Date d'inscription   Statut Contributeur Dernière intervention   1 335
 
multivitamines pour moi ;-)
0
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779 > gryzzly Messages postés 4608 Date d'inscription   Statut Contributeur Dernière intervention  
 
Avec ou sans houblon ?

--
0
gryzzly Messages postés 4608 Date d'inscription   Statut Contributeur Dernière intervention   1 335 > Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention  
 
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   Statut Contributeur Dernière intervention   922 > Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention  
 
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
Réponse 4 / 5
Erider Messages postés 5 Date d'inscription   Statut Membre Dernière intervention  
 
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
Réponse 5 / 5
Gihef Messages postés 5150 Date d'inscription   Statut Contributeur Dernière intervention   2 779
 
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

Discussions similaires

À quoi sert le port common interface 5v only Samsung ?
zharg -
Reguletout -

29 réponses
Common interface
Rf600r83 -
Andy31200 -

2 réponses
c'est quoi une CI card ?
ganivelle -
Rv -

5 réponses
Installation Ubuntu sans interface graphique
Teumbeu -
Teumbeu -

2 réponses
common interface (ci card)
fadli27 -
Andy31200 -

1 réponse