Centrer 2 images et un div sur une ligne

Version imprimable

19/01/2013, 11h57
stdonat

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
19/01/2013, 12h53
Muchos

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.

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

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:

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>

19/01/2013, 14h15
stdonat

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 ?
20/01/2013, 01h36
Muchos

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

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

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:

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.

Citation:

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 :aie:

20/01/2013, 12h12
stdonat

1 pièce(s) jointe(s)

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)
20/01/2013, 13h39
NoSmoking

Citation:

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?
20/01/2013, 13h50
stdonat

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 ?

Citation:

Envoyé par stdonat

...il faut que je modifie le code java pour ...

http://www.developpez.com/template/kit/kitwarning.png javascript != java

Dans ta fonction Ini tu modifies la structure en intégrant un encapsulage par une balise A.
Code:

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'; }

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:

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';
}

20/01/2013, 16h12
stdonat

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 ?
20/01/2013, 20h11
NoSmoking

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

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.

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:

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>

21/01/2013, 09h52
stdonat

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.:ccool: