Centrer 2 images et un div sur une ligne [Résolu]

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.

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

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

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?

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

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 :

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.

19/01/2013, 11h57	#1
stdonat Invité régulier Inscription : décembre 2010 Messages : 22 Détails du profil Informations personnelles : Sexe : Localisation : France, Drôme (Rhône Alpes) Informations forums : Inscription : décembre 2010 Messages : 22 Points : 5 Points : 5	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
	00

19/01/2013, 12h53	#2
Muchos Membre Expert Jonathan Renoult Étudiant Inscription : décembre 2011 Messages : 901 Détails du profil Informations personnelles : Nom : Jonathan Renoult Âge : 27 Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Étudiant Secteur : Arts - Culture Informations forums : Inscription : décembre 2011 Messages : 901 Points : 1 919 Points : 1 919	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. __________________ Pour être aidé, donnez vos codes source svp ! ( balise # ) - - - Debug the Web together!
	00

19/01/2013, 14h15	#5
stdonat Invité régulier Inscription : décembre 2010 Messages : 22 Détails du profil Informations personnelles : Sexe : Localisation : France, Drôme (Rhône Alpes) Informations forums : Inscription : décembre 2010 Messages : 22 Points : 5 Points : 5	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 ?
	00

20/01/2013, 01h36	#6
Muchos Membre Expert Jonathan Renoult Étudiant Inscription : décembre 2011 Messages : 901 Détails du profil Informations personnelles : Nom : Jonathan Renoult Âge : 27 Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Étudiant Secteur : Arts - Culture Informations forums : Inscription : décembre 2011 Messages : 901 Points : 1 919 Points : 1 919	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é. __________________ Pour être aidé, donnez vos codes source svp ! ( balise # ) - - - Debug the Web together!
	00

20/01/2013, 13h50	#11
stdonat Invité régulier Inscription : décembre 2010 Messages : 22 Détails du profil Informations personnelles : Sexe : Localisation : France, Drôme (Rhône Alpes) Informations forums : Inscription : décembre 2010 Messages : 22 Points : 5 Points : 5	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 ?
	00

20/01/2013, 16h12	#14
stdonat Invité régulier Inscription : décembre 2010 Messages : 22 Détails du profil Informations personnelles : Sexe : Localisation : France, Drôme (Rhône Alpes) Informations forums : Inscription : décembre 2010 Messages : 22 Points : 5 Points : 5	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 ?
	00

20/01/2013, 20h11	#15
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 264 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 264 Points : 9 120 Points : 9 120	montres nous ton code actuel, je pense que c'est dans la synthèse qu'il y a une faille.
	00

21/01/2013, 09h52	#18
stdonat Invité régulier Inscription : décembre 2010 Messages : 22 Détails du profil Informations personnelles : Sexe : Localisation : France, Drôme (Rhône Alpes) Informations forums : Inscription : décembre 2010 Messages : 22 Points : 5 Points : 5	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email