Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème d'alignement

    12 décembre 2005 à 17:09:41

    bonjour, je cherche à faire une page avec 4 images, l'une à gauce et ensuite
    3 à côté, les unes en dessous des autres

    i image 2
    m
    a image 3
    g
    e image 4
    1

    j'ai essayé de jouer avec la propriété top pour les images 2 3 et 4 en mettant position à absolute, mais ça ne fonctionne pas

    Quel peut être le problème ?

    merci
    • Partager sur Facebook
    • Partager sur Twitter
      12 décembre 2005 à 17:13:00

      Utilises les float pour aligner tes cadres :)
      .image1 {
      display: block;
      float: left;
      }
      .image2 {
      margin-left: ; /* La taille de ton image1 */
      }
      .image3 {
      margin-left: ;
      }
      .image 4 {
      margin-left: ;
      }
      • Partager sur Facebook
      • Partager sur Twitter
        12 décembre 2005 à 17:14:08


        argh

        voilà ce que ça donne

        i
        m
        a
        g
        e
        1 image2 image3
        image4


        et le align:top sur l'image 2 ne fonctionne pas non plus :(
        • Partager sur Facebook
        • Partager sur Twitter
          12 décembre 2005 à 17:43:02

          Selon la taille des images 2 à 4, tu peux mettre un float left dans leur code css.
          • Partager sur Facebook
          • Partager sur Twitter
            12 décembre 2005 à 23:52:05

            bonjour,
            le code de base de spiky est bon mais pour faire passer les images a droite les unes au dessus des autres il te faut aussi avoir recours au float( ou les passer toutes en display:block; !?):

            <div id ="conteneur-image">
            <img class="un" src="image1.gif" alt="#" />
            <img class="deux" src="image2.gif" alt="#" />
            <img class="trois" src="image3.gif" alt="#" />
            <img class="cat" src="image4.gif" alt="#" />
            </div>

            en reprenant le css de spiky et en le surchargeant un peu.

            #conteneur-image {
            /* a toi de positionner le conteneur de tes images ou tu veut sur ta page de façon a les contenir dans une zone precise et eviter qu'elles aillent/s'ecartent jusquau bords de la page */
            width:/*largeur de image 1 + image 2 ou 3 ou 4 + eventuellement les marges */;
            /* position:absolute; *//* dans le cas ou les clear interfere avec d'autre elements de la page */
            }
            img {
            display: block;
            }
            .un {
            float:left;
            /* ajouter les marges pour les decoller eventuellement */
            }
            .deux {
            float:right;
            /* ajouter les marges pour les decoller eventuellement */
            }
            .trois {
            float:right;
            clear:right;/* pour passer sous l'autre */
            /* ajouter les marges pour les decoller eventuellement */
            }
            .cat {
            float:right;
            clear:right;/* pour passer sous l'autre */
            /* ajouter les marges pour les decoller eventuellement */
            }

            a partir de la je pense que tu as une base qui va te permettre d'arriver a obtenir ce que tu veut.

            (Je suis un eternel etourdi et j'ai peut-etre omis un truc, n'hesite pas a reposter si tu rencontre un bug ou souci).

            a plus
            • Partager sur Facebook
            • Partager sur Twitter

            fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

            Problème d'alignement

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown