Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 18 sur 18
  1. #1
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2010
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations forums :
    Inscription : décembre 2010
    Messages : 34
    Points : 15
    Points
    15

    Par défaut Centrer 2 images et un div sur une ligne

    Bonjour.
    Mettre un titre parleur n'est pas frorcement la chose la plus simple...et je n'ai pas beaucoup de connaissance en CCS...
    Voilà mon probléme, du moins ce que je souhaiterai faire!
    Aligner sur une meme ligne et répartie de façon uniforme:
    Une image (avec un lien hypertexte), un Div (dans lequel avec du Js je fais défilé des images) et une autre image (avec également un lien hypertexte).
    Pour le moment J'arrive a alligner 3 images mais pour cela j'utilise margin-right: auto; et margin-left: auto; mais ça ne marche pas avec IE.

    Merci pour vos lumiéres

  2. #2
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 348
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 348
    Points : 2 985
    Points
    2 985

    Par défaut

    Montrez-nous votre code ou la page en question, car vous avez l'air de faire un peu n'importe quoi ^^

    Pour info, vous pouvez aligner ce genre d'élément avec la propriété FLOAT.

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2010
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations forums :
    Inscription : décembre 2010
    Messages : 34
    Points : 15
    Points
    15

    Par défaut

    Vous avez surement raison... ci dessous:
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <style type="text/css">
    .image
    	{
    	float: left;
    	border: 1px solid #000000;
    	text-align: center;
    	height: 150px;
    	width: 150px;
    	margin-left: 25px;
    	margin-top:1px;
    	}
    .image2
    	{
    	margin-right: auto;
    	margin-left: auto;
    	border: 1px solid #000000;
    	height: 150px;
    	width: 150px;
    	margin-top:1px;
    	}
    .image3
    	{
    	float: right; 
    	margin-right: 25px;
    	margin-top:-168px;
    	border: 1px solid #000000;
    	height: 150px;
    	width: 150px;
    	}
    }
    </style>
    </head>
     
    <body>
     
    <p class="image"><a href="lien1"><img src="../Img1.jpg" ></a></p>
    <p class="image2" align="center"><a href="lien2"><img src="../Img2.jpg" ></a></p>
    <p class="image3"><a href="lien1"><img src="../Img3.jpg" ></a></p>
     
    </body>
    Merci

  4. #4
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 348
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 348
    Points : 2 985
    Points
    2 985

    Par défaut

    Votre code ne ressemble pas beaucoup à ce que vous vouliez faire…
    Néanmoins, je me permets des corrections et des suggestions. Ici, FLOAT ne correspond pas vraiment à votre problème, alors j'ai utilisé INLINE-BLOCK:

    Code html :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    <!doctype html>
    <html lang="fr-FR">
    <head>
    	<meta charset="UTF-8" />
    	<title>Mes images alignées</title>
    	<style type="text/css">
    .bandeau {
    text-align: center;
    }
    .image
    {
    display: inline-block; /* des blocs en ligne ;) Permet l'alignement horizontal */
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    margin: 1px 25px;
    line-height: 150px; /* technique possible pour aligner verticalement */
    }
    	</style>
    </head>
    <body>
    <div class="bandeau">
    	<a class="image" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/reply.gif" /></a>
    	<a class="image" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/reply.gif" /></a>
    	<a class="image" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/reply.gif" /></a>
    </div>
    </body>
    </html>

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2010
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations forums :
    Inscription : décembre 2010
    Messages : 34
    Points : 15
    Points
    15

    Par défaut

    Merci c'est superbe mais pourquoi en rajoutant
    Code :
    .bandeau {text-align: center;height:150;overflow:hidden;}
    mes images continuent à s'afficher les unes au dessus des autres lorsque la largeur de la fenêtre diminue ?

  6. #6
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 348
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 348
    Points : 2 985
    Points
    2 985

    Par défaut

    C'est le comportement normal : avec 3 éléments de 200 px sur la même ligne (sans margin-padding-border), si la fenêtre fait moins de 600 px, les boîtes se déplacent vers là où il y a de la place

    NOTA: height:150 ne veut rien dire. Il faut donner une unité.

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2010
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations forums :
    Inscription : décembre 2010
    Messages : 34
    Points : 15
    Points
    15

    Par défaut

    Merci Muchos tu as bien sur tout a fait raison un hauteur sans unité ne veux rien dire...
    Avec tous cela mon probléme avance mais n'est tojours pas résolu.
    Voici mon code, qui pour moi fonctionne bien en terme de positionnement hormis le vertical que je n'arrive pas a alligner...Bon il est vrai aussi que j'utilise une version6 de DreamWeaver qui ne posséde pas tous les attributs possible...margin-padding-border inconnu au bataillon!

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    <!doctype html>
    <html lang="fr-FR">
    <head>
    <meta charset="UTF-8" />
    <title>Mes images alignées</title>
    <script type="text/javascript">
             var pag=["reply","newthread"];
          var tim=50;  // temps de pause en millisecondes entre les appels à Nxt
          var wIm=170; // largeur en pixels des images
          var hIm=150; // hauteur en pixels des images
          var dIm=26;   // espace en pixels entre les images défilantes
          var wZn=250; // largeur de la zone des images défilantes
          var pas=2;   // décalage des images à chaque appel à la fonction Nxt
     
          var tmr,nIm=pag.length; // timer et nombre d'images
          var wTt=nIm*(wIm+dIm);  // largeur totale des images
          var xNx=hIm;            // est décrémenté de 'pas' à chaque appel à Nxt
     
          function Nxt() {
             var i,x=xNx;
             for (i=0; i<nIm; i++){
                if (x-wIm<=wZn) document.getElementById('im'+i).style.left=(x-wIm)+'px';
                if ((x+=wIm+dIm) >= wTt) x -= wTt;
             }
             if ((xNx-=pas) < 0) xNx += wTt;
          }
     
          function Clk(i) { 
             window.open('Pag/'+pag[i]+'.html','_self');
          }
     
    	function Ini() { 
             var i,s='',e=document.getElementById('imd');
             for (i=0; i < nIm; i++) s += "<img id='im"+i+"' onclick='Clk("+i+")' title='"+pag[i]
                +"' style='position:absolute; left:9999px; top:5px; cursor: pointer;border: thick solid #0000FF;' src='http://www.developpez.net/forums/images/buttons/"+pag[i]+".gif'/>";
             e.style.width=wZn+'px'; e.style.height=hIm+'px'; e.innerHTML=s;   
          }
       </script>
    <style type="text/css">
     
    .bandeau {
    	text-align: center;
    	overflow: hidden;
    	height: 300px;//Une valeur de 150px serait suffisante si les 3 "blocs s'allignés"
    }
    .image1{
    	display: inline-block;
    	width: 150px;
    	height: 150px;
    	border: 1px solid #FF0000;
    	top: -150px;
    	margin-bottom: 50px;
    	line-height: 150px;
    }
    .image2{;
    	display: inline-block;
    	border: 1px solid #FF0000;
    	position: relative;
    	overflow:hidden;
    	line-height: 150px;
    	margin-left: 100px;
    	margin-right: 100px;
    }
    .image3{
    	display: inline-block; 
    	width: 150px;
    	height: 150px;
    	border: 1px solid #000;
    	margin-bottom: 50px;
    	line-height: 150px;
    }
    	</style>
    </head>
    <body>
    <div class="bandeau">
    	<a class="image1" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/newthread.gif" />1</a>
    	<div class="image2" id='imd'  onmouseover='clearInterval(tmr)' onmouseout='tmr=setInterval("Nxt()",tim)' ></div>
    	<a class="image3" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/reply.gif" /></a>
    </div>
    <p>&nbsp;</p>
      <script>
    	Ini();
    	tmr=setInterval("Nxt()",tim);
    	</script>
    </body>
    </html>
    Voili Voilou...Merci de votre attention

  8. #8
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    6 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 6 986
    Points : 12 556
    Points
    12 556

    Par défaut

    Bonjour,
    il te faut changer la structure de la DIV contenant le déroulement, tes images en position:absolute sont hors du flux, donc le line-height est inopérant.
    Code html :
    1
    2
    3
    4
    5
    6
    <div class="image2" id='imd'>
        <a href="" id="img0"><img src=""></a>
        <a href="" id="img1"><img src=""></a>
        <a href="" id="img2"><img src=""></a>
        <a href="" id="img3"><img src=""></a>
    </div>
    et dans ce cas tu déplace non pas les images mais les liens qui eux auront un line-height.

    Il te reste bien sûr la possibilité de les centrer en javascript, comme tu l'utilises.

    Bon il est vrai aussi que j'utilise une version6 de DreamWeaver qui ne posséde pas tous les attributs possible...margin-padding-border inconnu au bataillon!
    permets moi quand même d'en douter

  9. #9
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2010
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations forums :
    Inscription : décembre 2010
    Messages : 34
    Points : 15
    Points
    15

    Par défaut

    Ouh Là... j'avoue ne pas te comprendre....du tout! désolé mais compétance sont plus que limités!

    PS: Je comprends que tu doute de DreamWeaver, peut etre existe-t il des options que je n'a pas reussi a installer, toujours est il qie meme "display: inline-block;" il semble ne pas connaitre!(voir Pj)
    Images attachées Images attachées

  10. #10
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    6 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 6 986
    Points : 12 556
    Points
    12 556

    Par défaut

    toujours est il qie meme "display: inline-block;" il semble ne pas connaitre!
    ce n'es pas ce qui est indiqué, il te propose quand même de l'utiliser il suffit de répondre OUI.

    Pour le reste que ne comprends tu pas, la structure à obtenir ou le code javascript de centrage à ajouter?

  11. #11
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2010
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations forums :
    Inscription : décembre 2010
    Messages : 34
    Points : 15
    Points
    15

    Par défaut

    Ce que je ne comprens pas... Ben en rajoutant ton code j'ai toujours le meme probléme, donc si je te suis il faut que je modifie le code java pour recentrer tous cela sauf que je ne vois pas comment ni ou ?

  12. #12
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    6 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 6 986
    Points : 12 556
    Points
    12 556

    Par défaut

    Citation Envoyé par stdonat
    ...il faut que je modifie le code java pour ...
    javascript != java


    Dans ta fonction Ini tu modifies la structure en intégrant un encapsulage par une balise A.
    Code javascript :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function Ini() {
      var i, s = '', e=document.getElementById('imd');
      for( i=0; i < nIm; i++){
        s += '<a href ="" id="im' +i +'">';
        s += '<img i_d="im' +i +'" onclick="Clk(' +i +')" title="'+ pag[i];
        s += '" src="http://www.developpez.net/forums/images/buttons/' +pag[i] +'.gif"/>';
        s += '<\/a>';
      }
      e.innerHTML = s;
      e.style.width  = wZn +'px';
      e.style.height = hIm +'px';
    }

  13. #13
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    6 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 6 986
    Points : 12 556
    Points
    12 556

    Par défaut

    Si non pour un centrage auto de l'image dans l'élément et ce sans passer par un encapsulage, là on n'est plus dans le CSS mais dans le javascript et il faut remettre l'image en position absolute comme tu l'avais au début.
    Code javascript :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function centreVertical( obj){
      // get hauteur du parent
      var hautParent = obj.parentNode.offsetHeight;
      // get hauteur de l'image
      var hauteur = obj.height;
      // centrage vertical
      obj.style.top = (( hautParent -hauteur) /2) +'px';
    }
    function Ini() {
      var i, s = '', e=document.getElementById('imd');
      for( i=0; i < nIm; i++){
        s += '<img id="im' +i +'" onload="centreVertical(this)" onclick="Clk(' +i +')" title="'+ pag[i];
        s += '" src="http://www.developpez.net/forums/images/buttons/' +pag[i] +'.gif"/>';
      }
      e.innerHTML = s;
      e.style.width  = wZn +'px';
      e.style.height = hIm +'px';
    }

  14. #14
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2010
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations forums :
    Inscription : décembre 2010
    Messages : 34
    Points : 15
    Points
    15

    Par défaut

    C'est vrai je manque de rigueur! Java et Javascript ce n'est pas la même chose!
    J'ai bien essayer des 2 propositions mais ne resolvent rien, pire elle supprime le défilement de mes images.
    Je ne pense pas avoir oublier quelques choses, j'ai seulement remplacer dans les 2 cas la fonction ini par tes propositions.
    Il doit manquer quelques choses ..mais ou ?

  15. #15
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    6 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 6 986
    Points : 12 556
    Points
    12 556

    Par défaut

    montres nous ton code actuel, je pense que c'est dans la synthèse qu'il y a une faille.

  16. #16
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2010
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations forums :
    Inscription : décembre 2010
    Messages : 34
    Points : 15
    Points
    15

    Par défaut

    Je précise vaux mieux deux fois qu'une que je souhaite que les 2 images fixe "avec le bord rouge" soit sur la même ligne que la fenêtre bleu dans lesquelles défile des images...reste donc 2 point a régler puisque les images ne défilent plus et les 3 "cadres" ne sont pas alignés!
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    <!doctype html>
    <html lang="fr-FR">
    <head>
    <meta charset="UTF-8" />
    <title>Mes images alignées</title>
    <script type="text/javascript">
             var pag=["reply","newthread"];
          var tim=50;  // temps de pause en millisecondes entre les appels à Nxt
          var wIm=170; // largeur en pixels des images
          var hIm=150; // hauteur en pixels des images
          var dIm=26;   // espace en pixels entre les images défilantes
          var wZn=250; // largeur de la zone des images défilantes
          var pas=2;   // décalage des images à chaque appel à la fonction Nxt
     
          var tmr,nIm=pag.length; // timer et nombre d'images
          var wTt=nIm*(wIm+dIm);  // largeur totale des images
          var xNx=hIm;            // est décrémenté de 'pas' à chaque appel à Nxt
     
          function Nxt() {
             var i,x=xNx;
             for (i=0; i<nIm; i++){
                if (x-wIm<=wZn) document.getElementById('im'+i).style.left=(x-wIm)+'px';
                if ((x+=wIm+dIm) >= wTt) x -= wTt;
             }
             if ((xNx-=pas) < 0) xNx += wTt;
          }
     
          function Clk(i) { 
             window.open('Pag/'+pag[i]+'.html','_self');
          }
     
    function Ini() {
      var i, s = '', e=document.getElementById('imd');
      for( i=0; i < nIm; i++){
        s += '<a href ="" id="im' +i +'">';
        s += '<img i_d="im' +i +'" onclick="Clk(' +i +')" title="'+ pag[i];
        s += '" src="http://www.developpez.net/forums/images/buttons/' +pag[i] +'.gif"/>';
        s += '<\/a>';
      }
      e.innerHTML = s;
      e.style.width  = wZn +'px';
      e.style.height = hIm +'px';
    }
       </script>
    <style type="text/css">
     
    .bandeau {
    	text-align: center;
    	overflow: hidden;
    	height: 300px;//Une valeur de 150px serait suffisante si les 3 "blocs s'allignés"
    }
    .image1{
    	display: inline-block;
    	width: 150px;
    	height: 150px;
    	border: 1px solid #FF0000;
    	top: -150px;
    	margin-bottom: 50px;
    	line-height: 150px;
    }
    .image2{;
    	display: inline-block;
    	border: 1px solid #000;
    	position: relative;
    	overflow:hidden;
    	line-height: 150px;
    	margin-left: 100px;
    	margin-right: 100px;
    }
    .image3{
    	display: inline-block; 
    	width: 150px;
    	height: 150px;
    	border: 1px solid #FF0000;
    	margin-bottom: 50px;
    	line-height: 150px;
    }
    	</style>
    </head>
    <body>
    <div class="bandeau">
    	<a class="image1" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/newthread.gif" />1</a>
    <div class="image2" id='imd'>
        <a href="" id="img0"><img src=""></a>
        <a href="" id="img1"><img src=""></a>
        <a href="" id="img2"><img src=""></a>
        <a href="" id="img3"><img src=""></a>
    </div>
    	<a class="image3" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/reply.gif" /></a>
    </div>
    <p>&nbsp;</p>
      <script>
    	Ini();
    	tmr=setInterval("Nxt()",tim);
    	</script>
    </body>
    </html>
    merci.

  17. #17
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    6 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 6 986
    Points : 12 556
    Points
    12 556

    Par défaut

    1/ les commentaires en CSS se matérialise comme ceci /* le commentaire */.

    2/ Le bandeau doit avoir une line-height de la même valeur que sa height
    Code :
    1
    2
    3
    4
    5
    6
    .bandeau {
      text-align:center;
      overflow:hidden;
      height:150px;
      line-height:150px;  /* Une valeur de 150px serait suffisante si les 3 "blocs s'allignés */
    }
    3/ il manque un alignement vertical pour le éléments contenus pour que cela soit opérationnel.
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .common{
      display:inline-block;
      vertical-align:middle;
      width:150px;
    }
    /* sans oublier */
    .image1, .image3{
      border:1px solid #FF0000;
    }
    4/ pour que les images puissent se déplacer il faut que leur contenant soit en position:absolute;.
    Code :
    1
    2
    3
    .image2 a{
      position:absolute;
    }
    5/ mais dans ce cas il faut que leur conteneur soit en position:relative pour être le référent.
    Code :
    1
    2
    3
    4
    5
    6
    7
    .image2{
      position:relative;
      overflow:hidden;
      margin-left:100px;
      margin-right:100px;
      border:1px solid #000;
    }
    En conclusion:
    avec ce code HTML cela devrait fonctionner
    Code html :
    1
    2
    3
    4
    5
    <div class="bandeau">
      <a class="image1 common" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/newthread.gif" />1</a>
      <div class="image2 common" id='imd'></div>
      <a class="image3 common" href="#"><img alt="Proposer une réponse" src="http://www.developpez.net/forums/images/buttons/reply.gif" />2</a>
    </div>

  18. #18
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    décembre 2010
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations forums :
    Inscription : décembre 2010
    Messages : 34
    Points : 15
    Points
    15

    Par défaut

    Merci beaucoup.
    Non seulement ça marche, mais en plus les explications sont très claires.

    Merci pour cette solution et pour ce cours de CSS.

+ Répondre à la discussion
Cette discussion est résolue.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •