[CSS][Nioub] affichage de morceaux d'images

affichage de morceaux d'images [CSS][Nioub] - HTML/CSS - Programmation

Marsh Posté le 04-02-2005 à 03:00:18    

J'ai un menu fait a base d'images que je veux afficher les unes à la suite des autres, collées et sans espace.
pb : que ce soit sous ie ou ff, il me met des espaces entre chaque image
Comment bien coller tout ?
J'ai lu les tutos de openweb, j'ai essayé quelques trucs mais ca ne change rien.
 
mon css :

Code :
  1. /* fichier CSS2 */
  3. div.cadregeneral
  4. {
  5. width: 100%;
  6. height: 55px;
  7. background-color: #66ffff;
  8. text-align: center;
  9. margin: 0;
  10. }
  12. div.partiehaute
  13. {
  14. width: 940px;
  15. height: 1000px;
  16. background-color: #ffffff;
  17. float: left;
  18. margin: 0;
  19. }
  21. div.cadrecentral
  22. {
  23. width: 780px;
  24. height: 450px;
  25. margin: 0;
  26. }
  28. div.partiegauche
  29. {
  30. width: 150px;
  31. height: 450px;
  32. background-color: #ff0000;
  33. float: left;
  34. margin: 0;
  35. }
  37. div.partiemilieu
  38. {
  39. width: 480px;
  40. height: 450px;
  41. background-color: #00ff00;
  42. float: left;
  43. margin: 0;
  44. }
  46. div.partiedroite
  47. {
  48. width: 150px;
  49. height: 450px;
  50. background-color: #ff0000;
  51. float: right;
  52. margin: 0;
  53. }
  55. div.element
  56. {
  57. margin: 0;
  58. }


 
et le source html (un extrait, c'est le header.inc.php) :

Code :
  1. <div class = "partiehaute">
  2. <div class="element">
  3.   <img src="images/index_01.jpg" width="211" height="152" alt="index_01" />
  4.  <img src="images/index_02.jpg" width="722" height="152" alt="index_02" />
  5. </div>
  8. </div>


 
En vous remerciant  :jap:


Message édité par l3eleg le 04-02-2005 à 03:00:34
Reply

Marsh Posté le 04-02-2005 à 03:00:18   

Reply

Marsh Posté le 04-02-2005 à 03:10:49    

Avec le css que tu fourni, tu colles les div entre eux, pas les images.
Les images ont des marges propes, que tu dois modifier dans le css si tu veux les coller.

Reply

Marsh Posté le 04-02-2005 à 11:21:09    

ok merci je vais chercher de ce coté :)

Reply

Marsh Posté le 04-02-2005 à 11:32:47    

http://css.maxdesign.com.au/listamatic/  << pour apprendre à faire des menus stpmerssi


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

Marsh Posté le 04-02-2005 à 12:01:35    

Masklinn a écrit :

http://css.maxdesign.com.au/listamatic/  << pour apprendre à faire des menus stpmerssi


 
oué mais dans mon cas j'ai besoin de coller les images les unes a coté des autres  :) je pourrais utiliser la technique qui permet de mettre une seule image en image de fond, mais j'aurais des problèmes de police je pense vu que la police des images n'est pas "classique"

Reply

Marsh Posté le 04-02-2005 à 12:19:19    

j'ai rajouté ceci :
 

Code :
  1. img.titre
  2. {
  3. margin: 0;
  4. padding: 0;
  6. }


 
avec un appel qui va bien dans le code html précédent mais j'ai toujours cet espace  :sweat:

Reply

Marsh Posté le 04-02-2005 à 12:38:35    

l3eleg a écrit :

oué mais dans mon cas j'ai besoin de coller les images les unes a coté des autres  :) je pourrais utiliser la technique qui permet de mettre une seule image en image de fond, mais j'aurais des problèmes de police je pense vu que la police des images n'est pas "classique"


 :heink:  
 

<ul id="menu">
    <li><a id="index_01"><span>Nom_lien1</span></a></li>
    <li><a id="index_02"><span>Nom_lien2</span></a></li>
</ul>


#menu {
    list-style: none;
}
 
#menu li {
    float: left;
}
 
#menu span {
    display: none;
}
 
#index_01 {
    display: block;
    width: 221px;
    height: 152px;
    background: url(images/index_01.jpg) no-repeat;
}
 
#index_02 {
    display: block;
    width: 722px;
    height: 152px;
    background: url(images/index_02.jpg) no-repeat
}


 [:spamafote]


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

Marsh Posté le 04-02-2005 à 12:48:04    

Les images apparaissent les unes en dessous des autres et pas a coté les unes à coté des autres  :heink:  
est ce du à la balise li ?
merci de perdre du temps pour moi en tout cas  :D


Message édité par l3eleg le 04-02-2005 à 12:55:21
Reply

Marsh Posté le 04-02-2005 à 13:01:38    

l3eleg a écrit :

Les images apparaissent les unes en dessous des autres et pas a coté les unes à coté des autres  :heink:  
est ce du à la balise li ?
merci de perdre du temps pour moi en tout cas  :D


laisse moi deviner, t'aurais pas une surface d'affichage inférieure à 943px de large? :whistle:


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

Marsh Posté le 04-02-2005 à 13:03:39    

Masklinn a écrit :

laisse moi deviner, t'aurais pas une surface d'affichage inférieure à 943px de large? :whistle:


 
Je suis un nioub mais c'est la première chose que j'ai vérifié  :D
en l'occurence c'est plus grand bien sur ...


Message édité par l3eleg le 04-02-2005 à 13:07:06
Reply

Marsh Posté le 04-02-2005 à 13:03:39   

Reply

Marsh Posté le 04-02-2005 à 13:20:18    

l3eleg a écrit :

Je suis un nioub mais c'est la première chose que j'ai vérifié  :D
en l'occurence c'est plus grand bien sur ...


 
tu ne m'en voudras pas, j'espère, de ne pas te croire quand j'obtiens ça ([1] [2] [3]) avec cette page


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

Marsh Posté le 04-02-2005 à 13:24:48    

en effet ca ne vient pas du code que tu m'as donné :)
mais du <div> que j'utilise pour contenir tout mon header ... bizarre pourtant la taille est bonne  :heink:  
je vais chercher un peu merci de ton aide en tout cas


Message édité par l3eleg le 04-02-2005 à 13:26:57
Reply

Marsh Posté le 04-02-2005 à 18:29:28    

De retour, j'ai pas mal progressé, tout est pratiquement mis en forme, grâce à votre aide. Je rencontre encore quelques soucis, particulièrement au niveau du positionnement de plusieurs blocs les uns a coté des autres.
 
Je m'explique : j'ai mon bloc header qui est en haut, lui pas de soucis.
En dessous sur la gauche, un bloc menu de gauche et collé à lui le bloc de contenu si on veut.
 
Je ne parviens à bien positionner le bloc du milieu par rapport à celui de gauche, j'ai utilisé le positionnement relatif pour résoudre une partie des problèmes mais ca ne fonctionne pas sous internet explorer 6 donc je me dis qu'il y a surement une meilleure solution.
 
Source HTML :  

Code :
  1. <body>
  2.  <ul id="menu">
  4.     <li><a id="index_01"><span>Nom_lien1</span></a></li>
  5.    <li><a id="index_02"><span>Nom_lien2</span></a></li>
  6.    <li><a id="index_03"><span>Nom_lien3</span></a></li>
  7.    <li><a id="index_04"><span>Nom_lien4</span></a></li>
  8.    <li><a id="index_05"><span>Nom_lien5</span></a></li>
  9.    <li><a id="index_06"><span>Nom_lien6</span></a></li>
  11.    <li><a id="index_07"><span>Nom_lien7</span></a></li>
  12.    <li><a id="index_08"><span>Nom_lien8</span></a></li>
  13.    <li><a id="index_09"><span>Nom_lien9</span></a></li>
  14.    <li><a id="index_10_01"><span>Nom_lien10_01</span></a></li>
  15. </ul>
  16.  <ul id="centre">
  17.     <li><a id="index_24"><span>Nom_lien24</span></a></li>
  19.     <li><a id="index_12"><span>Nom_lien12</span></a></li>
  20.     <li><a id="index_10_02"><span>Nom_lien10_02</span></a></li>
  21.     <li><a id="index_23"><span>Nom_lien24</span></a></li>
  22.     <li><a id="index_14"><span>Nom_lien12</span></a></li>
  23.     <li><a id="index_10_03"><span>Nom_lien10_02</span></a></li>
  24.     <li><a id="index_22"><span>Nom_lien24</span></a></li>
  26.     <li><a id="index_21"><span>Nom_lien12</span></a></li>
  27.     <li><a id="index_10_04"><span>Nom_lien10_02</span></a></li>
  28. </ul>
  29. <ul id="menu_gauche">
  30.     <li><a id="index_11"><span>Nom_lien11</span></a></li>
  31.    <li><a id="index_13"><span>Nom_lien13</span></a></li>
  32.    <li><a id="index_15"><span>Nom_lien15</span></a></li>
  34.    <li><a id="index_16"><span>Nom_lien16</span></a></li>
  35.    <li><a id="index_17"><span>Nom_lien17</span></a></li>
  36.    <li><a id="index_18"><span>Nom_lien18</span></a></li>
  37.    <li><a id="index_19"><span>Nom_lien19</span></a></li>
  38.    <li><a id="index_20"><span>Nom_lien20</span></a></li>
  39. </ul>
  40. </body>


 
source css :

Code :
  1. /* fichier CSS2 */
  3. #menu {
  4.     list-style: none;
  5.     width: 933px;
  6. }
  8. #menu li {
  9.     float: left;
  10. }
  12. #menu span {
  13.     display: none;
  14. }
  16. #menu_gauche {
  17.     list-style: none;
  18.     width: 211px;
  19. position: relative;
  20.    bottom: 498px;
  21. }
  23. #menu_gauche li {
  24.     float: left;
  25. }
  27. #menu_gauche span {
  28.     display: none;
  29. }
  31. #centre {
  32.     list-style: none;
  33.     width: 723px;
  34. position: relative;
  35.    left: 211px;
  36. }
  38. #centre li {
  39. float: left;
  40. }
  42. #centre span {
  43.     display: none;
  44. }
  46. #index_01 {
  47.     display: block;
  48.     width: 211px;
  49.     height: 152px;
  50.     background: url(images/index_01.jpg) no-repeat;
  51. }

Reply

Marsh Posté le 06-02-2005 à 23:30:56    

:cry:

Reply

Sujets relatifs:

Leave a Replay

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