Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2808 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°971223
l3eleg
cosmik connection
Posté le 04-02-2005 à 03:00:18  profilanswer
 

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
mood
Publicité
Posté le 04-02-2005 à 03:00:18  profilanswer
 

n°971225
cerel
Posté le 04-02-2005 à 03:10:49  profilanswer
 

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.

n°971400
l3eleg
cosmik connection
Posté le 04-02-2005 à 11:21:09  profilanswer
 

ok merci je vais chercher de ce coté :)

n°971408
masklinn
í dag viðrar vel til loftárása
Posté le 04-02-2005 à 11:32:47  profilanswer
 

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


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°971456
l3eleg
cosmik connection
Posté le 04-02-2005 à 12:01:35  profilanswer
 

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"

n°971479
l3eleg
cosmik connection
Posté le 04-02-2005 à 12:19:19  profilanswer
 

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:

n°971513
masklinn
í dag viðrar vel til loftárása
Posté le 04-02-2005 à 12:38:35  profilanswer
 

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]


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°971518
l3eleg
cosmik connection
Posté le 04-02-2005 à 12:48:04  profilanswer
 

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
n°971539
masklinn
í dag viðrar vel til loftárása
Posté le 04-02-2005 à 13:01:38  profilanswer
 

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:


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°971541
l3eleg
cosmik connection
Posté le 04-02-2005 à 13:03:39  profilanswer
 

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
mood
Publicité
Posté le 04-02-2005 à 13:03:39  profilanswer
 

n°971564
masklinn
í dag viðrar vel til loftárása
Posté le 04-02-2005 à 13:20:18  profilanswer
 

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


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°971566
l3eleg
cosmik connection
Posté le 04-02-2005 à 13:24:48  profilanswer
 

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
n°972202
l3eleg
cosmik connection
Posté le 04-02-2005 à 18:29:28  profilanswer
 

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. }

n°973661
l3eleg
cosmik connection
Posté le 06-02-2005 à 23:30:56  profilanswer
 

:cry:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
PHP/MySQL: liste déroulante, affichage automatique[HTML/CSS/PHP] problème de jonglage entre les css !
CSS & largeur de divProbleme avec CSS et Layout ou webdesign
une image qui se colle pas (CSS)Structure CSS
RollOver mais pas de lien (CSS).pop up / affichage
[CSS] Problème de background-colorTableau en CSS avec restriction...
Plus de sujets relatifs à : [CSS][Nioub] affichage de morceaux d'images

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.090 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)