Probleme d'affichage css (retour a la ligne)

Probleme d'affichage css (retour a la ligne) - HTML/CSS - Programmation

Marsh Posté le 22-06-2005 à 19:12:57    

bonjour jai un probleme qui me tracace avec  css et jarrive pas a trouver le probleme
 
voici en haut ce que jai avec css et en bas le resultat esconté  
 
[img=http://img262.echo.cx/img262/5902/sa1ly.th.jpg]
 
Voici le code en css :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd"><head>
  3. <title>essai3</title>
  4. <meta name="keywords" content="" />
  5. <meta name="description" content="" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. </head>
  11. <style type="text/css">
  13. body {
  14. font-family: Verdana, Arial, Helvetica, sans-serif;
  15. font-size: 0.8em;
  16. margin: 0;
  17. padding: 0;
  18. }
  20. #header1 {
  21. background-image: url('index_02.gif');
  22. height: 93px;
  23. width: 780px;
  24. }
  27. #header2 {
  28. background-image: url('bk.gif');
  29. height: 22px;
  30. width: 780px;
  31. }
  34. #header2_1 {
  35. float: right; /* alignement du logo à droite */
  36. border: 0;
  37. width: 326px;
  38. height: 22px;
  39. }
  41. #header2_2 {
  42. border: 0;
  43. width: 139px;
  44. height: 22px;
  45. }
  47. #header2_3 {
  48. float: left; /* alignement du logo à gauche */
  49. border: 0;
  50. width: 139px;
  51. height: 22px;
  52. }
  54. #header3 {
  55. background-image: url('index_07.gif');
  56. width: 780px;
  57. height: 9px;
  58. }
  60. #header4 {
  61. background-image: url('bk2.gif');
  62. width: 780px;
  63. height: 20px;
  64. }
  67. a.image1 { /* définition de la classe "image" de la balise <a> */
  68.      display: block; /* la balise a doit être en bloc */
  69.      width: 125px; /* largeur de l'image réactive */
  70.      height: 20px; /* hauteur de l'image réactive */
  71.      background-image: url(08.gif); /* source de l'image de départ */
  72.      background-repeat: no-repeat;
  73.      }
  75.      a.image1:hover { /* définition de la classe "image" de la balise <a> au survol */
  76.      background-image: url(08-over.gif); /* source de l'image d'arrivée */
  77.      }
  78. a.image2 { /* définition de la classe "image" de la balise <a> */
  79.      display: block; /* la balise a doit être en bloc */
  80.      width: 96px; /* largeur de l'image réactive */
  81.      height: 20px; /* hauteur de l'image réactive */
  82.      background-image: url(10.gif); /* source de l'image de départ */
  83.      background-repeat: no-repeat;
  84.      }
  86.      a.image2:hover { /* définition de la classe "image" de la balise <a> au survol */
  87.      background-image: url(10-over.gif); /* source de l'image d'arrivée */
  88.      }
  89. a.image3 { /* définition de la classe "image" de la balise <a> */
  90.      display: block; /* la balise a doit être en bloc */
  91.      width: 118px; /* largeur de l'image réactive */
  92.      height: 20px; /* hauteur de l'image réactive */
  93.      background-image: url(11.gif); /* source de l'image de départ */
  94.      background-repeat: no-repeat;
  95.      }
  97.      a.image3:hover { /* définition de la classe "image" de la balise <a> au survol */
  98.      background-image: url(11-over.gif); /* source de l'image d'arrivée */
  99.      }
  100. a.image4 { /* définition de la classe "image" de la balise <a> */
  101.      display: block; /* la balise a doit être en bloc */
  102.      width: 166px; /* largeur de l'image réactive */
  103.      height: 20px; /* hauteur de l'image réactive */
  104.      background-image: url(12.gif); /* source de l'image de départ */
  105.      background-repeat: no-repeat;
  106.      }
  108.      a.image4:hover { /* définition de la classe "image" de la balise <a> au survol */
  109.      background-image: url(12-over.gif); /* source de l'image d'arrivée */
  110.      }
  111. a.image5 { /* définition de la classe "image" de la balise <a> */
  112.      display: block; /* la balise a doit être en bloc */
  113.      width: 154px; /* largeur de l'image réactive */
  114.      height: 20px; /* hauteur de l'image réactive */
  115.      background-image: url(14.gif); /* source de l'image de départ */
  116.      background-repeat: no-repeat;
  117.      }
  119.      a.image5:hover { /* définition de la classe "image" de la balise <a> au survol */
  120.      background-image: url(14-over.gif); /* source de l'image d'arrivée */
  121.      }
  122. a.image6 { /* définition de la classe "image" de la balise <a> */
  123.      display: block; /* la balise a doit être en bloc */
  124.      width: 118px; /* largeur de l'image réactive */
  125.      height: 20px; /* hauteur de l'image réactive */
  126.      background-image: url(16.gif); /* source de l'image de départ */
  127.      background-repeat: no-repeat;
  128.      }
  130.      a.image6:hover { /* définition de la classe "image" de la balise <a> au survol */
  131.      background-image: url(16-over.gif); /* source de l'image d'arrivée */
  132.      }
  134. </style>
  136. <body>
  138. <div id="header1">
  139. </div>
  141. <div id="header2">
  143.  <img src="index_04.gif" class="header2_1" alt="logo" />
  144.  <div id="header2_2"/>
  145.  <img src="index_06.gif" class="header2_3" alt="logo" />
  146. </div>
  148. <div id="header3">
  149. </div>
  151. <div id="header4">
  152.  <a class="image1" href="">
  153.  <a class="image2" href="">
  154.  <a class="image3" href="">
  155.  <a class="image4" href="">
  156.  <a class="image5" href="">
  157.  <a class="image6" href="">
  158. </div>
  160. </body>
  161. </html>


 
 
Merci pour votre aide.
 
 
edit : jai essayé la commande white-space: nowrap; sans résultat


Message édité par eagle84 le 22-06-2005 à 19:16:59

---------------
Feed-Back
Reply

Marsh Posté le 22-06-2005 à 19:12:57   

Reply

Marsh Posté le 22-06-2005 à 20:13:58    

[:mlc]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 22-06-2005 à 20:53:17    

je veux bien que les gens passent aux CSS, mais de cette manière non merci

Reply

Marsh Posté le 22-06-2005 à 21:16:18    

Pis des 'image1' 'imagex', ca veut rien dire ...


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 22-06-2005 à 21:38:51    

c'est simple de critiquer les gens surtout lorqu'on ne fournit aucune explication je vous rappelle quon est dans un forum donc si c'est pour rien dire la porte est par ici...
quand a image1 c'est les style des roolover si on peut les appeler comme telle dans css.


---------------
Feed-Back
Reply

Marsh Posté le 22-06-2005 à 21:43:04    

C'est sûr que quand on vient avec son code et ses problèmes, c'est frustrant de voir de telles réponses.
 
Maintenant, plaçons nous dans la peau de nous-mêmes, les habitués... Et bien sache qu'on reçoit ici au moins 20 bouts de codes encore pires que le tiens tous les jours, et qu'a chaque fois il nous faut refaire le même speech :(
 
Et ce soir là, nous sommes fatigués... Désolé... Je te répondrais demain, quand la fraîcheur sera revenue :jap:

Reply

Marsh Posté le 22-06-2005 à 21:53:36    

ok merci pour cette franchise florent


---------------
Feed-Back
Reply

Marsh Posté le 22-06-2005 à 21:56:49    

Hopla :) A demain alors

Reply

Marsh Posté le 22-06-2005 à 22:03:05    

A demain


---------------
Feed-Back
Reply

Marsh Posté le 22-06-2005 à 22:14:42    

Bon je te dirai juste pour commencer de mettre image partout comme classe.  
 
Ca t'évites de mettre 6 fois la meme chose dans la css.
 
Ensuite c'est une liste de lien, donc tu mets
 

Code :
  1. <ul>
  2. <li><a class="image" href="xxxx"></a></li>
  3. ...
  4. </ul>
  6. et dans la CSS
  8. .header4 ul
  9. {
  10. display:inline;
  11. }


 
Tu m'enlèves les largeurs définies à chaque fois aussi :o
 
Ca sera un début, ca marchera peut-etre pas encore, mais pour le reste, demain.
 
Hop, dodo.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Sujets relatifs:

Leave a Replay

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