Votre question

Problème HTML ou CSS.

Tags :
  • CSS
  • Html
  • float
  • Programmation
Dernière réponse : dans Programmation
28 Mars 2012 10:06:26

La div id "tableau" du site ne veut pas prendre en compte le style CSS donné ni le faite d'être contenu dans une autre div id "contenu" et je ne trouve pas l'erreur(s). Pouvez-vous m'aider ?

Voici le code HTML :

  1. <div id="contenu">
  2. <div id="produit">
  3. <ul id="MenuBar1" class="MenuBarVertical">
  4. <li><a href="#">BROCHURES</a> </li>
  5. <li><a href="#">DÉPLIANTS</a></li>
  6. <li><a href="#">FLYERS</a> </li>
  7. </ul>
  8. </div>
  9.  
  10. <div id="video">
  11. <embed src="images/salon.wmv" width="640" height="360"></embed>
  12. </div>
  13.  
  14. <div id="tableau">
  15. <table width="809" border="0" align="center" cellspacing="15" bgcolor="#FFFFFF">
  16. <br>
  17. <tr><td width="380"><p align="left"><a href="creationgraphique.html">
  18. <img src="images/creation graphique.jpg"style="margin-bottom: 3px;" alt="" width="380" height="175" border="0" /></a><br />
  19. <span class="Style43">CREATION GRAPHIQUE</span class="Style43"><br />
  20. <span class="Style44">Conseil en communication promotionnelle et institutionnelle</span><span class="Style44"><br />
  21. </span></p> </td>
  22.  
  23.  
  24. <td width="380"><p align="left"><a href="impressionnumerique.html">
  25. <img src="images/impression num.jpg"style="margin-bottom: 3px;" alt="" width="380" height="175" border="0" /></a><br />
  26. <span class="Style43">IMPRESSION NUMERIQUE</span> <span class="Style69">JUSQU'A 260 cm de Large</span><br />
  27. <span class="Style44">Panneaux, adhésifs, bâches, affiches, résines dômes, stickers...</span></p> </td>
  28. </tr>
  29.  
  30. <tr>
  31. <td height="261"><p align="left"><a href="impressiontraditionnelle.html">
  32. <img src="images/impression trad.jpg"style="margin-bottom: 3px;" alt="" width="380" height="175" border="0" /></a><br />
  33. <span class="Style43">IMPRESSION TRADITIONNELLE OFFSET<br />
  34. </span><span class="Style44">Catalogues, brochures, dépliants, cartes de visite ...</span></p></td>
  35. <td><p align="left"><a href="structurepliable.html"><img src="images/structure pliable.jpg"style="margin-bottom: 3px;" alt="" width="380" height="175" border="0" /></a><br />
  36. <span class="Style43">STRUCTURES PLIABLES</span><br />
  37. <span class="Style44">Stands, totems, roll-up...</span></p></td>
  38. </tr>
  39. <tr>
  40. <td height="261"><p align="left"><a href="marquagevehicule.html">
  41. <img src="images/habillage vehicule.jpg"style="margin-bottom: 3px;" alt="" width="380" height="175" border="0" /></a><br />
  42. <span class="Style43">MARQUAGE VEHICULE </span class="Style43"><br />
  43. <span class="Style44">Tous types de véhicules</span><span class="Style44"><br /> </td>
  44. <td><p align="left"><a href="signaletique.html"><img src="images/signaletique.jpg"style="margin-bottom: 3px;" alt="" width="380" height="175" border="0" /></a><br />
  45. <span class="Style43">SIGNALETIQUE</span class="Style43"><br />
  46. <span class="Style44">Marquage partiel ou intégral en découpe d'adhésifs/impression découpe</span> </td>
  47. </tr>
  48. </table></div>
  49. </div>
  50. </div>


Voici les CSS correspondants :

  1. #video {
  2. margin-left: 200px;
  3. float: left;
  4. width: 640px;
  5. border: 3px solid #000;
  6. }
  7. #contenu {
  8. width: 1206px;
  9. margin-left: auto;
  10. margin-right: auto;
  11. }
  12. #produit {
  13. float: left;
  14. width: 200px;
  15. }
  16.  
  17. #tableau {
  18. margin-top: 70px;
  19. float: left;
  20. margin-left: 100px;
  21. }


Merci

Autres pages sur : probleme html css

a c 232 L Programmation
28 Mars 2012 11:37:14

Salut,

Plein de problèmes dans ton code déjà :

  • Ligne 16: on ne peut pas mettre d'élément dans un <table> directement (sauf <tr> ou <tbody>, <thead>, <tfooter>
  • Il faut mettre des espaces entre les attributs (spécialement dans tes img, où il n'y a pas d'espace entre les attributs src et style).
  • Les <p> ouverts ligne 40 et 44 ne sont pas fermés



  • Et je vois pas le problème que tu as.
    28 Mars 2012 12:53:15

    D'abord merci d'avoir répondu.
    Le tableau ce n'est pas moi qui l'ai fait et il fonctionne.

    Bref, j'essaie de t'expliquer un peu mieux mon souci : la div du tableau est inclus dans le div du contenu mais si j'agrandi par exemple la hauteur de la div contenu le tableau se positionne en dessous comme s'il ne faisait pas parti du contenu et en plus la div tableau ne tient pas compte du CSS qui lui est attribué mais cela doit faire parti du même problème.

    J'espère que c'est plus claire, en tout cas je m'arrache les cheveux depuis hier...
    Merci de l'aide que tu pourras m'apporter
    Contenus similaires
    a c 232 L Programmation
    28 Mars 2012 13:09:45

    clef-des-champs a dit :
    D'abord merci d'avoir répondu.
    Le tableau ce n'est pas moi qui l'ai fait et il fonctionne.

    Peut-être qu'il fonctionne, mais il n'est pas valide d'un point de vue syntaxique. Ce qui peut entrainer des différences de rendu entre les navigateurs (il y a déjà beaucoup de différences de rendu, mais avec du code invalide, c'est encore pire...)
    Donc je te conseillerais de corriger ces quelques problèmes.

    clef-des-champs a dit :
    Bref, j'essaie de t'expliquer un peu mieux mon souci : la div du tableau est inclus dans le div du contenu mais si j'agrandi par exemple la hauteur de la div contenu le tableau se positionne en dessous comme s'il ne faisait pas parti du contenu et en plus la div tableau ne tient pas compte du CSS qui lui est attribué mais cela doit faire parti du même problème.

    Je ne sais pas à quoi tu t'attends, mais c'est normal en l'état que ton tableau se positionne en dessous.
    Tu as une div contenu qui fait 1206px de largeur.
    Dans cette div, tu as:
    - une div produit qui fait 200px de largeur
    - une div video qui fait 640px de largeur et qui a un margin-left de 200px (soit 840px en tout)
    - une div tableau qui fait 809px de largeur et qui a un margin-left de 100px (soit 909px en tout)

    Donc pour que les 3 divs produit, video et tableau tiennent sur la même ligne, il faudrait que ta div contenu fasse au moins 200 + 840 + 909 = 1949px
    Et vu que la div contenu ne fait que 1206px, le tableau passe forcément en dessous, vu qu'il n'y a pas de place.

    Edit: j'ai un peu arrangé le code pour mettre des couleurs pour que tu vois ce que ça donne.
    En rouge: la div produit
    En bleu: la div vidéo
    En vert : la div tableau
    En jaune: la div contenu

    Comme tu peux le voir, il n'y a pas assez de jaune pour que le vert puisse aller à côté du bleu et du rouge...

    28 Mars 2012 13:24:25

    je comprend, je vais le corriger.

    Pour ce qui est de l'autre problème je comprend tes explication mais en fait mon menu de gauches est beaucoup plus long que ça mais je l'ai simplifié pour le forum... en fait je ne veux pas ces 3 éléments sur la même ligne, je voudrai que le menu (brochures, dépliants, flyers...) reste à gauche et que la video et le tableau soit l'un en dessous de l'autre à droite du menu.

    Merci pour ta disponibilité
    28 Mars 2012 13:25:37

    PS : je ne sais pas comment mettre une image dans ma réponse pour te montrer...
    a c 232 L Programmation
    28 Mars 2012 13:45:59

    Pour mettre une image, il faut en uploader sur un service d'hébergement d'images (casimages, imageshack, ...) et insérer l'URL de l'image dans le forum.

    Mais je pense que je vois ce que tu veux.

    Il te faut une structure dans ce genre :
    1. <div id="contenu">
    2. <div id="produit">
    3. ....
    4. </div>
    5. <div id="droite">
    6. <div id="video">....</div>
    7. <div id="tableau">....</div>
    8. </div>
    9. </div>


    Avec le CSS :
    1. #contenu {
    2. width: 1206px;
    3. margin:0 auto;
    4. background-color:yellow;
    5. }
    6. #produit {
    7. float:left;
    8. width:200px;
    9. background-color:red;
    10. }
    11. #droite {
    12. float:left;
    13. width: 1006px;
    14. background-color:orange;
    15. }
    16. #video {
    17. width:640px;
    18. border:3px solid black;
    19. background-color:blue;
    20. }
    21. #tableau {
    22. margin-top:70px;
    23. background-color:green;
    24. }


    (j'ai pas testé, mais ça doit être qlq chose comme ça...)
    28 Mars 2012 14:18:16

    C'est que j'avais fait aussi ça ne donnais rien sauf un détail donc j'ai fait comme tu m'as dit mais ça ne marche toujours pas :


    Voilà ce que je voudrai mais je pense que tu l'as compris :
    28 Mars 2012 14:20:13

    Ce que je ne comprends pas c'est pourquoi la div vidéo se place correctement et non le tableau alors qu'ils sont inscrit dans le même contenu !
    Là tu doit en avoir marre d'essayer de m'aider... enfin j'espère pas
    Merci en tous cas
    a c 232 L Programmation
    28 Mars 2012 14:25:08

    La raison c'est certainement parce que la div du tableau est trop large par rapport à l'espace disponible.
    Soit la largeur que tu as définie est trop grande, soit tu as oublié de spécifier une largeur (n'oublie pas aussi que la marge gauche compte aussi)
    28 Mars 2012 14:39:39

    C'est pour ça que j'ai essayé avec une photo plus petite des fois aussi que ce soit le tableau qui foire et voilà ce que ça donne malgré le fait que je lui ai attribué un CSS avec des marges en haut et gauche et il n'en met pas du tout...
    Qu'en penses-tu ?
    a c 232 L Programmation
    28 Mars 2012 15:13:21

    C'est difficile de se faire une idée comme ça. Tu pourrais uploader ton fichier html + css sur le net que je puisse voir ça en live ?

    Si tu n'as pas d'hébergeur web, que tu mettes ça dans un zip et que tu l'uploades chez un hébergeur de fichiers (rapidshare, ...)
    a c 232 L Programmation
    28 Mars 2012 15:35:33

    Alors :
    - il faut que tu mettes le #contenu2 en float:left, pour qu'il soit correctement à côté de #produit
    - supprime le float:left du #video qui n'en a pas besoin avec la nouvelle organisation

    Et ça devrait être bon. (je parle du index.html, le index_test.html a l'air d'être comme ce que t'avais fait au départ)
    28 Mars 2012 16:50:59

    MERCI BEAUCOUP OmaR ! ça marche enfin
    J'étais entrain de refaire la page en entier et même le tableau... remarque pour le tableau ce n'est pas plus mal je saurai le faire comme ça.
    Merci encore et @+
    Tom's guide dans le monde
    • Allemagne
    • Italie
    • Irlande
    • Royaume Uni
    • Etats Unis
    Suivre Tom's Guide
    Inscrivez-vous à la Newsletter
    • ajouter à twitter
    • ajouter à facebook
    • ajouter un flux RSS