Discussion :

[sabrimi]

Bonsoir à tous,

Avant, j'avais fait un tableau pour afficher des images et du texte à côté, tout allait très bien.

J'ai supprimé le tableau et ai voulu le remplacer par des div, figure, etc.

La 1ére image/texte s'affiche bien, par contre, je n'arrive pas à aligner la 2ème sous la 1ère.

A tout hasard, je vous mets les codes !

CSS :

Code css :

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
.exemple-simple-de-tests figure img{
margin-left:50px;
float:left;
width:180px;
border:1px solid #dcdcdc;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;
(...)
}
.exemple-simple-de-tests figcaption{
float:left;
padding-left:20px;
font-weight:bold;
}
.bouton {
cursor:pointer;
display:inline-block;
font-size:1em;
line-height:24px;
min-width:71px;
padding:7px 5px;
color:#000000;
text-align:center;
border:1px solid rgb(0,51,153);
border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
background: url(../images/deco/bouton-tail.jpg);
background-repeat: repeat-x;
(...)
}
/*.bouton a:hover {cursor:pointer}*/
.bouton:hover {background: url(../images/deco/bouton-tail2.jpg);}

HTML5 :

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
			<div class="exemple-simple-de-tests">
				<figure>
				  <img src="img/test_observation.jpg" alt="" />
					<figcaption>
						Exemple d'observation. <br /><span class="bouton">Affichage de l'exemple</span><a href="observation.php"></a>
					</figcaption>
				</figure>
			</div>
 
            <br />
            <br />
 
			<div class="exemple-simple-de-tests">
				<figure>
				  <img src="img/test_logique.jpg" alt="" />
					<figcaption>
						Exemple de logique. <br /><span class="bouton">Affichage de l'exemple</span><a href="logique.php"></a>
					</figcaption>
				</figure>

Voilà en gros ce que ça donne :


Merci d'avance de vos astuces.

Cordialement.
Sabrimi

[rodolphebrd]

Bonjour,

peut-être qu'en plaçant un clear sur le deuxième figure : <figure style="clear:left;"> .

Exemple en ligne

[Invité]

Bonjour,

Code css :

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

.exemple-simple-de-tests { clear:both; overflow:hidden; }

[sabrimi]

Merci beaucoup les gars, ça fonctionne impec.
Je n'avais pas pensé à mettre ces 2 opérateurs.