Discussion :

[zooffy]

Bonjour à tous.

Je viens vers vous parce que je maîtrise très mal le CSS et je pense que je dois louper un truc simple mais je tourne depuis trois plombes dessus et je pige toujours pas.
Je voudrais mettre du texte sur al gauche de mon image, donc je mets un float:left et ça marche, mais je comprends pas pourquoi mes images en dessous viennent aussi se coller à gauche de celle d'au-dessus alors que j'ai mis un <br>.
J'ai testé avec des clear et ça ne marche pas.

Voici mon code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="divGlobalRotation" style="">
 
    <span style=""><img src="http://esport.ozouf.com/PersoRotation/Perso41.png" alt="Malfurion" style="border-width:0px;float:left;" /><span style="">Malfurion<br>Soutien<br>Warcraft<br><br>Dernière sortie le  : 17 mai 2016<br>Il est sorti 14 depuis le début des rotations<br></span></span>
    <span style=""><img src="http://esport.ozouf.com/PersoRotation/Perso30.png" alt="Valla" style="border-width:0px;float:left;" /><span style="">Valla<br>Assassin<br>Diablo<br><br>Dernière sortie le  : 17 mai 2016<br>Il est sorti 9 depuis le début des rotations<br></span></span><br />
    <span style=""><img src="http://esport.ozouf.com/PersoRotation/Perso35.png" alt="Diablo" style="border-width:0px;float:left;" /><span style="">Diablo<br>Guerrier<br>Diablo<br><br>Dernière sortie le  : 03 mai 2016<br>Il est sorti 7 depuis le début des rotations<br></span></span><br />
    <span><img src="http://esport.ozouf.com/PersoRotation/Perso18.png" alt="Thrall" style="border-width:0px;float:left;" /><span style="">Thrall<br>Assassin<br>Warcraft<br><br>Dernière sortie le  : 26 avr 2016<br>Il est sorti 7 depuis le début des rotations<br></span></span><br />
    <span><img src="http://esport.ozouf.com/PersoRotation/Perso39.png" alt="Lt Morales" style="border-width:0px;float:left;" /><span style="">Lt Morales<br>Soutien<br>StarCraft<br><br>Dernière sortie le  : 03 mai 2016<br>Il est sorti 6 depuis le début des rotations<br></span></span><br />
    <span><img src="http://esport.ozouf.com/PersoRotation/Perso50.png" alt="Xul" style="border-width:0px;float:left;" /><span style="">Xul<br>Spécialiste<br>Diablo<br><br>Dernière sortie le  : 10 mai 2016<br>Il est sorti 3 depuis le début des rotations<br></span></span><br />
    <span><img src="http://esport.ozouf.com/PersoRotation/Perso33.png" alt="Chen" style="border-width:0px;float:left;" /><span style="">Chen<br>Guerrier<br>Warcraft<br>(débloqué au niveau 5)<br>Dernière sortie le  : 26 avr 2016<br>Il est sorti 5 depuis le début des rotations<br></span></span><br />
    <span><img src="http://esport.ozouf.com/PersoRotation/Perso36.png" alt="Rexxar" style="border-width:0px;float:left;" /><span style="">Rexxar<br>Guerrier<br>Warcraft<br>(débloqué au niveau 7)<br>Dernière sortie le  : 26 avr 2016<br>Il est sorti 5 depuis le début des rotations<br></span></span><br />
    <span><img src="http://esport.ozouf.com/PersoRotation/Perso10.png" alt="Zeratul" style="border-width:0px;float:left;" /><span style="">Zeratul<br>Assassin<br>StarCraft<br>(débloqué au niveau 12)<br>Dernière sortie le  : 12 avr 2016<br>Il est sorti 4 depuis le début des rotations<br></span></span><br />
    <span><img src="http://esport.ozouf.com/PersoRotation/Perso47.png" alt="Sgt Marteau" style="border-width:0px;float:left;" /><span style="">Sgt Marteau<br>Spécialiste<br>StarCraft<br>(débloqué au niveau 15)<br>Dernière sortie le  : 17 mai 2016<br>Il est sorti 7 depuis le début des rotations<br></span></span></div>

Pouvez vous m'aider à faire en sorte que les images soient l'une en dessous de l'autre et le texte à gauche de chaque image ?
Je verrais plus tard pour al mise en forme du texte avec le Span qui lui ait attaché.
Et je ne peux pas utiliser autre chose que des Span pour faire cela à cause du framework en amont.

Merci pour votre aide.

[Invité]

Bonjour,

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
<style>
#divGlobalRotation > span { 
   display:inline-block;box-sizing:border-box; border:1px solid #ccc;
   margin:0.5%; width:99%;/* 1 par ligne - ou 24% (4/ligne) - ou 32.33% (3/ligne) - ou 49% (2/ligne) */
}
#divGlobalRotation > span > img { 
   float:left; display:inline-block;padding:0;border:0;box-sizing:border-box; width:50%; 
}
#divGlobalRotation > span > span { 
   float:left; display:inline-block;padding:10px;box-sizing:border-box; width:50%; 
}
</style>

N.B. Pour mettre le texte à gauche de l'image: remplacer les float:left; par float:right;

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div id="divGlobalRotation">
 
    <span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso41.png" alt="Malfurion" />
		<span>Malfurion<br>Soutien<br>Warcraft<br><br>Dernière sortie le  : 17 mai 2016<br>Il est sorti 14 depuis le début des rotations</span>
	</span><!--
    --><span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso30.png" alt="Valla" />
		<span>Valla<br>Assassin<br>Diablo<br><br>Dernière sortie le  : 17 mai 2016<br>Il est sorti 9 depuis le début des rotations</span>
	</span><!--
    --><span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso35.png" alt="Diablo" />
		<span>Diablo<br>Guerrier<br>Diablo<br><br>Dernière sortie le  : 03 mai 2016<br>Il est sorti 7 depuis le début des rotations</span>
	</span><!--
    --><span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso18.png" alt="Thrall" />
		<span>Thrall<br>Assassin<br>Warcraft<br><br>Dernière sortie le  : 26 avr 2016<br>Il est sorti 7 depuis le début des rotations</span>
	</span><!--
    --><span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso39.png" alt="Lt Morales" />
		<span>Lt Morales<br>Soutien<br>StarCraft<br><br>Dernière sortie le  : 03 mai 2016<br>Il est sorti 6 depuis le début des rotations</span>
	</span><!--
    --><span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso50.png" alt="Xul" />
		<span>Xul<br>Spécialiste<br>Diablo<br><br>Dernière sortie le  : 10 mai 2016<br>Il est sorti 3 depuis le début des rotations</span>
	</span><!--
    --><span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso33.png" alt="Chen" />
		<span>Chen<br>Guerrier<br>Warcraft<br>(débloqué au niveau 5)<br>Dernière sortie le  : 26 avr 2016<br>Il est sorti 5 depuis le début des rotations</span>
	</span><!--
    --><span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso36.png" alt="Rexxar" />
		<span>Rexxar<br>Guerrier<br>Warcraft<br>(débloqué au niveau 7)<br>Dernière sortie le  : 26 avr 2016<br>Il est sorti 5 depuis le début des rotations</span>
	</span><!--
    --><span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso10.png" alt="Zeratul" />
		<span>Zeratul<br>Assassin<br>StarCraft<br>(débloqué au niveau 12)<br>Dernière sortie le  : 12 avr 2016<br>Il est sorti 4 depuis le début des rotations</span>
	</span><!--
    --><span>
		<img src="http://esport.ozouf.com/PersoRotation/Perso47.png" alt="Sgt Marteau" />
		<span>Sgt Marteau<br>Spécialiste<br>StarCraft<br>(débloqué au niveau 15)<br>Dernière sortie le  : 17 mai 2016<br>Il est sorti 7 depuis le début des rotations</span>
	</span>
</div>

[zooffy]

Merci beaucoup pour ton aide.

Je capte pas bien le principe avec les > dans le nom des classes mais je vais tenter de trouver un tuto pour comprendre ça.

Par contre mes images sont énormes avec ça, en tout cas elles n'ont pas la taille que je leur ait donné à la fabrication.

Et surtout je comprends pas pourquoi mettre un Right si c'est pour le mettre à gauche, c'est pas très logique.

Encore merci pour ton aide.

[Jacques Beauregard]

Coucou,

Et surtout je comprends pas pourquoi mettre un Right si c'est pour le mettre à gauche, c'est pas très logique.

Encore merci pour ton aide.

Le float:right sur les images pour qu'elles soient à droite, et donc que ton texte soit à gauche.
Tu as mis des float:left sur tes images.

[Invité]

Bonjour,

1/ Voir : Les sélecteurs en CSS3 - II. Rappel

E > F : Correspond à tout élément F aussi un enfant de l'élément E. (en clair : F est enfant direct de E)

2/ Pourquoi float:right;
Pour inverser les 2 colonnes image/texte (sans avoir à modifier le HTML).

Sinon, en laissant float:left;, il faut modifier le HTML (mettre le span "texte" avant l'image).

3/ Pourquoi mettre :

Code :

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

1
2
	</span><!--
    --><span>

Pour annuler l'espace dû à la propriété display:inline-block / display:inline

sinon, il faut écrire :

Code :

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

	</span><span>

[zooffy]

Merci beaucoup pour toutes ces précisions.

Bonne journée à tous.

[Innersmile34]

Le mieux c'est de se servir du float pour ce qu'il ete prevu a la base et se servir des flexbox qui font enfin le travail de centrer sur les deux axes en plus.renseigne toi y'a de bons tuto