Centrer 2 images et un div sur une ligne

**stdonat** · 19/01/2013, 11h57

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

**Muchos** · 19/01/2013, 12h53

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.

**stdonat** · 19/01/2013, 12h57

Vous avez surement raison... ci dessous:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Muchos** · 19/01/2013, 13h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**stdonat** · 19/01/2013, 14h15

Merci c'est superbe mais pourquoi en rajoutant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Muchos** · 20/01/2013, 01h36

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

**stdonat** · 20/01/2013, 10h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 20/01/2013, 11h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**stdonat** · 20/01/2013, 12h12

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)

**NoSmoking** · 20/01/2013, 13h39

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?

**stdonat** · 20/01/2013, 13h50

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 ?

**NoSmoking** · 20/01/2013, 14h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 20/01/2013, 14h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**stdonat** · 20/01/2013, 16h12

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 ?

**NoSmoking** · 20/01/2013, 20h11

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

**stdonat** · 20/01/2013, 20h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**NoSmoking** · 20/01/2013, 22h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**stdonat** · 21/01/2013, 09h52

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.

Centrer 2 images et un div sur une ligne

Centrer un élément en CSS

Discussions similaires

Partager

Partager