[HTML] Problème avec TABLEAU

Problème avec TABLEAU [HTML] - HTML/CSS - Programmation

Marsh Posté le 05-12-2002 à 15:49:54    

Bonjours, j'ai un problème avec un tableau :-/
 
J'ai fait une maquette du site pour que vous comprenez plus facilement :
 
http://www.hellfire.firstream.net/GOGO/maket.gif
 
Voila, il y a donc un menu de talle x déterminée, avec à sa droite, le contenu du site, qui lui, a une hauteur variable, et beaucoup plus grande que le menu. En dessous du module se trouve donc une cellule qui a pour fonction de s'agrandir lorsque le contenu devient plus grand que le menu.
Ceci, parce que le site génère une bordure, que à gauche. (alors que le menu génère une bordure à gauche et à droite).  
 
Voila le rendu voulu :
 
http://www.hellfire.firstream.net/GOGO/final.gif
 
Mais un problème persiste. Lorsque le contenu grandit, et dépasse donc la taille du menu, ce n'est pas la cellule prévu pour qui s'agrandi, mais la cellule du menu :-/
 
Ma question ets donc : comment faire pour que la cellule du menu reste à la même hauteur, tandis que la cellule "bord+ vide" s'adapte suivant la taille du contenu ?
 
Merci ^^
 
Rainckill

Reply

Marsh Posté le 05-12-2002 à 15:49:54   

Reply

Marsh Posté le 05-12-2002 à 16:05:03    

Me dis pas que tu as tapé les balises HTLM dans ton message !
 :p

Reply

Marsh Posté le 05-12-2002 à 16:07:23    

cyp en forsse a écrit a écrit :

Me dis pas que tu as tapé les balises HTLM dans ton message !
 :p  




 
Pas compris la  :??:  :pt1cable:  
 
Si tu parles des image,s c'était une blague ? ;)

Reply

Marsh Posté le 05-12-2002 à 16:08:40    

pas sûr d'avoir compris, mais c'est p-e parce ton menu & contenu font partie de la même balise <tr> ?! non ?

Reply

Marsh Posté le 05-12-2002 à 16:12:07    

rainckill a écrit a écrit :

Ma question ets donc : comment faire pour que la cellule du menu reste à la même hauteur, tandis que la cellule "bord+ vide" s'adapte suivant la taille du contenu ?




Ne pas utiliser de tableau. On peut faire ça simplement avec 3 DIV : un pour le Titre, un pour le menu (en flottant) et un pour le contenu.
 
<div id="titre">...</div>
<div id="contenu">
  <div id="menu">...</div>
  ...
</div>
 
Avec comme propriétés pour le menu :
 
div#menu {
  float: left;
  width: ...;
  height: ...;
}


Message édité par gm_superstar le 05-12-2002 à 16:12:52

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-12-2002 à 16:33:07    

wax09 a écrit a écrit :

pas sûr d'avoir compris, mais c'est p-e parce ton menu & contenu font partie de la même balise <tr> ?! non ?




 
Oui, c'est ca ! mais, chuis obligé de faire comme ca ! non ?

Reply

Marsh Posté le 05-12-2002 à 16:34:22    

gm_superstar a écrit a écrit :

 
Ne pas utiliser de tableau. On peut faire ça simplement avec 3 DIV : un pour le Titre, un pour le menu (en flottant) et un pour le contenu.
 
<div id="titre">...</div>
<div id="contenu">
  <div id="menu">...</div>
  ...
</div>
 
Avec comme propriétés pour le menu :
 
div#menu {
  float: left;
  width: ...;
  height: ...;
}




 
On pourrait avoir ce rnedu facilemnt avec cette technique ? (que je ne connais aps)
 
http://www.hellfire.firstream.net/GOGO/copas02.html

Reply

Marsh Posté le 05-12-2002 à 16:41:15    

rainckill a écrit a écrit :

On pourrait avoir ce rnedu facilemnt avec cette technique ? (que je ne connais aps)
 
http://www.hellfire.firstream.net/GOGO/copas02.html



Oui pour l'ossature générale seulement. Pas pour les tableaux internes car tu utilises des images pour les bordures. Et qui dit bordures avec des images dit tableaux. On ne peut pas faire autrement pour l'instant.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-12-2002 à 17:37:38    

Oki,  
 
Mais le blem, c'est que je voit aps trop comment on utilise els balise <div> comme toi tu les utilises O_o
 
Pour moi, les balises div, c'est juste pour centrer, aligné à gauche, à droite, ou justifier  :D

Reply

Marsh Posté le 05-12-2002 à 18:12:47    

Ben poste l'URL de ton tableau on verra ensuite.
 
C'est toujours le même tablau qui traîne depuis cet été ? :whistle:


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-12-2002 à 18:12:47   

Reply

Marsh Posté le 05-12-2002 à 19:53:19    

MDR !!!!!
 
Tu te souviens  :lol:  :lol:  :lol:  :lol:  :lol:  
 
 
Oui, c'est toujours ca qui traine  :whistle: (mais ct aps de ma faute, si ca a trainé ;))
 
Donc voila une url : http://www.hellfire.firstream.net/copas/

Reply

Marsh Posté le 05-12-2002 à 20:28:59    

rainkil ta maquette de copas tu l'as fait avec quelle logiciel?

Reply

Marsh Posté le 05-12-2002 à 20:49:16    

chacal_one333 a écrit a écrit :

rainkil ta maquette de copas tu l'as fait avec quelle logiciel?




 
pq cette question ? O_o  :sweat:  
 
Pour répondr,e je l'ai faite sous photoshop, mais les manip sous mgi photosuite =)

Reply

Marsh Posté le 05-12-2002 à 20:50:05    

ben jle trouve super et moi tochop je sais faire que des sale truc :/ :cry:

Reply

Marsh Posté le 05-12-2002 à 21:49:14    

chacal_one333 a écrit a écrit :

ben jle trouve super et moi tochop je sais faire que des sale truc :/ :cry:




 
Lol, merci, mais elle reste quand meme assez simple ;)
 
 
Sinon, pour ce qui est de mon blem ? :)

Reply

Marsh Posté le 05-12-2002 à 22:02:37    

ben il te suffit de specifier le width and heigh si je comprend bien

Reply

Marsh Posté le 05-12-2002 à 22:37:32    

Bon j'ai fait cet essai
 
Il te reste à :
 
 - mettre les tableaux à la place des "plop"
 - supprimer les bordures à gauche des images boutons parce que du coup ça fait une bordure double pas terrible
 - découper l'image qui est en haut à droite en 3 boutons distincts
 - tester avec IE (j'ai testé qu'avec Mozilla et Opera)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-12-2002 à 19:10:59    

gm_superstar a écrit :

Bon j'ai fait cet essai
 
Il te reste à :
 
 - mettre les tableaux à la place des "plop"
 - supprimer les bordures à gauche des images boutons parce que du coup ça fait une bordure double pas terrible
 - découper l'image qui est en haut à droite en 3 boutons distincts
 - tester avec IE (j'ai testé qu'avec Mozilla et Opera)


 
 
 
Eyh :) Mais c super :)
 
enfin, sous ie, a une chose pres :  la barre ou il doit i avoir els raccourcis est en dessous du logo, et non à côté... sous mozilla et opera ca le fait bien ??
 
Sinon, merci bien =)

Reply

Marsh Posté le 06-12-2002 à 20:17:51    

rainckill a écrit :

Eyh :) Mais c super :)
 
enfin, sous ie, a une chose pres :  la barre ou il doit i avoir els raccourcis est en dessous du logo, et non à côté... sous mozilla et opera ca le fait bien ??
 
Sinon, merci bien =)


Heu j'ai testé aujourd'hui avec IE 6 et c'était tout bon. Tu testes avec quelle version de IE ? Sinon essaye de rajouter un peu de largeur histoire que tout rentre sur la même ligne.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 07-12-2002 à 13:49:33    

ah wi ? moi, j'ai ie 5.50... je suis en 1024*780, mais g essayer d emettre en 1280 et c'est la même...
 
c'ets bizarre qu'il y ai de schangements comme ca d'une version à une autre...
 
peuvent pas interpreter le code de la meme maniere ces navigatuers ! ca faciliterai rolalala =)

Reply

Marsh Posté le 07-12-2002 à 20:35:10    

dis...  
 
vraiment, je comprend rien avec tes div enfait :-/
 
 :cry:  :cry:  :cry:  :cry:  
 
Tu pourrais aps me donner une ptit explication la ? car, je remarque que a peine je fait un "enter" dans la ligne de code (pas un <br>, juste un "enter" dans le code) pour organisé le code, qu'il soit plus lisible, ben tout aprt en couille ! argh :(

Reply

Marsh Posté le 08-12-2002 à 13:34:32    

up  :whistle:

Reply

Marsh Posté le 08-12-2002 à 14:15:54    

rainckill a écrit :

ah wi ? moi, j'ai ie 5.50... je suis en 1024*780, mais g essayer d emettre en 1280 et c'est la même...


Non quand je disait de donner un peu de largeur, je parlais du DIV conteneur. Je l'ai passé à 782 pixels au lieu de 780 et ça passe bien avec IE 5 maintenant.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-12-2002 à 14:18:59    

rainckill a écrit :

dis...  
 
vraiment, je comprend rien avec tes div enfait :-/
 
 :cry:  :cry:  :cry:  :cry:  
 
Tu pourrais aps me donner une ptit explication la ? car, je remarque que a peine je fait un "enter" dans la ligne de code (pas un <br>, juste un "enter" dans le code) pour organisé le code, qu'il soit plus lisible, ben tout aprt en couille ! argh :(


Si les tags <img> sont collés dans la partie titre c'est normal. Il ne faut pas les séparer car une image est considérée comme du texte. Donc si tu ajoutes un espace entre 2 tags <img> tu auras un espace entre tes images sur la page. Ils doivent restés collés car la largeur du DIV conteneur fait exactement la somme des images du titre.
 
Après si tu as d'autres questions...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-12-2002 à 14:52:52    

gm_superstar a écrit :


Si les tags <img> sont collés dans la partie titre c'est normal. Il ne faut pas les séparer car une image est considérée comme du texte. Donc si tu ajoutes un espace entre 2 tags <img> tu auras un espace entre tes images sur la page. Ils doivent restés collés car la largeur du DIV conteneur fait exactement la somme des images du titre.
 
Après si tu as d'autres questions...


 
oki, je vais analysé d eplus pres now ke g les informations ^^
 
merci

Reply

Marsh Posté le 08-12-2002 à 15:46:22    

décidément...
 
est ce que tu pourrais me donner le code source pour lequel tu as généré la page stp ? (rainckill@free.fr)
 
car la, je capte pas trop, quand j'enregistre la page sur mon pc, ia pas le bas qui s'affiche (enfin, l'image bas.gif), ni b_menu_v.gif ... Je sais que qu'and je fais enregistrer sous, elles viennet aps dans le fichier images, car elles sont mise en fond ?) mais je els enreigstre amnuellement, je els fou la ou ils faut (images/decors), pis elles aparaissent tjs aps O_o

Reply

Marsh Posté le 08-12-2002 à 20:37:57    

rainckill a écrit :

décidément...
 
est ce que tu pourrais me donner le code source pour lequel tu as généré la page stp ? (rainckill@free.fr)
 
car la, je capte pas trop, quand j'enregistre la page sur mon pc, ia pas le bas qui s'affiche (enfin, l'image bas.gif), ni b_menu_v.gif ... Je sais que qu'and je fais enregistrer sous, elles viennet aps dans le fichier images, car elles sont mise en fond ?) mais je els enreigstre amnuellement, je els fou la ou ils faut (images/decors), pis elles aparaissent tjs aps O_o


 
Sous IE affichage --> source  
Sous netscape afficher -->source de la page  :sarcastic:

Reply

Marsh Posté le 09-12-2002 à 19:00:33    

FlyMan30 a écrit :


 
Sous IE affichage --> source  
Sous netscape afficher -->source de la page  :sarcastic:  


 
Wé non, je sais, ou alors je fais enregistrer la page sous, mais :
J'ai fait enregistrer sous, et voila le problem rencontré : (voir mess précédent)
 
Et quand je fais affiché la source, c'est carrément pas ca kil me sort ;) il me sort un code, ki lorsque je le réutilise (copi collé dans mon éditeur html) me sort un truc tres bizar ;) (enfin ia tout, mais tout désarticulé :( )
 
Donc merci de vouloir m'aider, mais pas avec ce grand air ;)
 

Reply

Marsh Posté le 09-12-2002 à 19:20:54    

Tu dois enregistrer la page Web complète c'est pour ça que ça foire. Enregistre seulement la page HTML et sa feuille de style (styles.css qui est dans le même répertoire).
 
Fichier > Enregistrer Sous > Page Web HTML uniquement


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 09-12-2002 à 20:49:33    

gm_superstar a écrit :

Tu dois enregistrer la page Web complète c'est pour ça que ça foire. Enregistre seulement la page HTML et sa feuille de style (styles.css qui est dans le même répertoire).
 
Fichier > Enregistrer Sous > Page Web HTML uniquement


 
Oula non, ca merde au possible :(
 
ca fait le meme blem que si je fais affiché la source (premeir blem : tous els bouton sont aligné sur la meme ligne O_o )

Reply

Marsh Posté le 09-12-2002 à 21:08:28    

Bon, on va faire simple. Voici l'arborescence utilisée :

|-- images
|   `-- decors
|       |-- b_bonnespages.gif
|       |-- b_encours.gif
|       |-- b_enquestion.gif
|       |-- b_equipe.gif
|       |-- b_intervention.gif
|       |-- b_menu_b.gif
|       |-- b_menu_h.gif
|       |-- b_menu_v.gif
|       |-- b_publications.gif
|       |-- b_quisommesns.gif
|       |-- b_references.gif
|       |-- bas.gif
|       |-- logo.gif
|       |-- raccourcis.gif
|       `-- recherche.gif
|-- index.html
`-- styles.css


Le fichier index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Copas : Conseil en Pratiques et Analyses Sociales</title>
 
  </head>
 
   <body>
      <div id="main">
 <div id="titre"><img src="images/decors/logo.gif" height="105" width="206" alt="Logo Copas" /><img src="images/decors/recherche.gif" height="105" width="263" alt="Fond recherche" /><img src="images/decors/raccourcis.gif" height="105" width="311" alt="Boutons divers" /><!-- Découper cette image en trois pour chaque bouton -->
   <form id="recherche" action="recherche">
     <div>
       <input id="texte" type="text" name="champRecherche" title="Rechercher..." /> <input id="ok" type="submit" value="OK" />
     </div>
   </form>
 
 </div>
 
 <div id="menu">
   <img class="decorationMenu" src="images/decors/b_menu_h.gif" height="40" width="134" alt="Bordure supérieure du menu" />
   <div id="maj"><b>MAJ</b> : 24 septembre</div>
   <a href="#"><img src="images/decors/b_quisommesns.gif" width="134" height="30" alt="Qui sommes nous ?" /></a>
   <a href="#"><img src="images/decors/b_intervention.gif" width="134" height="30" alt="Interventions" /></a>
   <a href="#"><img src="images/decors/b_enquestion.gif" width="134" height="30" alt="En questions" /></a>
 
   <a href="#"><img src="images/decors/b_bonnespages.gif" width="134" height="30" alt="Bonnes pages" /></a>
   <a href="#"><img src="images/decors/b_encours.gif" width="134" height="30" alt="En cours" /></a>
   <a href="#"><img src="images/decors/b_references.gif" width="134" height="30" alt="Références" /></a>
   <a href="#"><img src="images/decors/b_publications.gif" width="134" height="30" alt="Publications" /></a>
   <a href="#"><img src="images/decors/b_equipe.gif" width="134" height="30" alt="Équipe" /></a>
   <p><b>Tel</b> 03 28 04 54 24<br /><b>Fax</b> 03 28 04 54 25</p>
 
   <p>2 bis, rue des Jardins 59800 LILLE</p>
   <img class="decorationMenu" src="images/decors/b_menu_b.gif" height="19" width="134" alt="Bordure inférieure du menu" />
 </div>
 <div id="contenu">
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
 
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
 
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
 
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
 
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
   <p>plop</p>
 </div>
 <div id="piedDePage">
   <div id="auteur">Design et code Rainckill</div>
 
   Copyright <b>COPAS</b> ©
 </div>
      </div>
 
  </body>
 
</html>


La feuille de styles, styles.css :

body {  
  background-color: white;
  color: black;
  text-align: center;
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: small;
}
 
div#main {  
  margin-left: auto;
  margin-right: auto;
  width: 782px;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  text-align: left;
}
 
div#titre {  
  position: relative;
  line-height: 0;
}
 
div#titre form {
  position: absolute;
  margin: 0;
  top: 30px;
  left: 335px;
}
 
div#titre input {  
  height: 18px;
  border: 1px solid silver;
  background-color: #eee;
  line-height: 1em;
  color: #36c;
  font-weight: bold;
}
 
input#texte {  
  width: 80px;
}
 
input#ok {  
  width: 25px;
}
 
div#menu {  
  float: left;
  width: 135px;
  color: #808080;
  font-size: x-small;
  background-image: url(images/decors/b_menu_v.gif);
  background-repeat: repeat-y;
}
 
div#menu a {
  display: block;
}
 
div#menu b {
  text-decoration: underline;
}
 
div#menu div, div#menu p {  
  padding-left: 2px;
  width: 120px;
}
 
img.decorationMenu {
  display: block;
}
 
div#maj {  
  padding-top: 30px;
  padding-bottom: 10px;
}
 
div#contenu {  
  margin-left: 135px;
  text-align: center;
}
 
div#piedDePage {  
  height: 19px;
  padding-top: 5px;
  background-image: url(images/decors/bas.gif);
  background-repeat: repeat-x;
  color: white;
  font-size: x-small;
}
 
div#auteur {  
  float: right;
 }
 
a img {  
  border: 0;
}


Je peux pas faire mieux là...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 09-12-2002 à 23:24:00    

Je m'excuse... Car je viens de me rendre compte de ou été le probleme...
 
La feuille de style n'été aps placé au bon endroit O_o ...  Elle été placé dans Copas  Conseil en Pratiques et Analyses Sociales_fichiers ce qui est normal, alors que le code disait quelle devait se trouver à la meme racine que index.htm...  
 
J'avais ne pas avoir assuré sur ce coup là :(
 
Je m'en excuse...
 
/me s'en va heureux tout de meme car tout marche maintenant  :pt1cable:  
 
Merci encore gm_superstar  :jap:  :jap:  :jap:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed