Mettre un texte à droite de l'image CSS

**garance.tosello** · 20/01/2015, 16h28

Bonjour à tous,
Je me tire les cheveux depuis plusieurs heures, voir depuis plusieurs jours car je n'arrive pas à mettre du texte à droite de mon image !
Mon image et son texte doivent être centrés dans le contenu
Je pense que c'est assez simple mais vu ma nullité je n'y arrive pas.
J'ai essayé le float etc mais je n'y arrive pas.
Quelqu'un peu m'aider svp .
http://www.votre-faire-part.com/test...lanche-350.htm
http://www.votre-faire-part.com/test...-enveloppe.css
A savoir que sous cette image et son texte il y aura d'autres images et texte (pour éviter l'effet escalier que dois-je faire ?)
Help help

**ryan** · 20/01/2015, 19h16

Yop!

En isolant le problème du reste de la page, ça donne ceci:

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cartes simples et enveloppes blanches 350Gr ¦ Votre-faire-part.com</title>
<meta name="description" content="Des faire part photo et impressions de haute qualtite de haute qualité. Faire-part photo sous 24H" />
<meta name="keywords" content="faire part de naissance, faire part de bapteme, faire-part bapteme, carte de bapteme, faire part, faire-part baptême, faire part baptême, baptême" />
<meta name="robots" content="all" />
<link rel=stylesheet href='css/style.css' />
<link rel=stylesheet href='css/page.css' />
<link rel=stylesheet href='css/carte-enveloppe.css' />
</head>
<body>
<div id=principal>
 
 
    <div class="div_cart">
		<h2 align="center">POUR VOS FAIRE-PART</h2></div>
		<img src="http://www.babelio.com/users/QUIZ_Les-fleurs-et-la-litterature_9812.jpeg" class="impression" alt="" title="" style="width: 200px;vertical-align: top;"/>
		<div style='display: inline-block;'>
			<u>Dimension de la carte simple</u><br/>
			Format : 14 X 10.5 CM
			Grammage : 350 gr<br/><br/>
			<u>Caractéristique de l'enveloppe</u><br/>
			Format : 11.4 x 16.2 cm<br/>
			Grammage : 120 gr<br/>
		</div>
  </div>
 
 
</div>
</body>
</html>

Ce qui a changé:
- Le conteneur du texte est passé de p à div. Dans l'absolu, tu pourrais garder un p, c'est juste pour ne pas être ennuyé dans l'alignement vertical du texte par rapport à l'image.
- Tu peux voir que la div est en display: inline-block
- Pour l'image, ce qui est important dans son style, ce n'est pas la dimension width, mais c'est le vertical-align.

**garance.tosello** · 21/01/2015, 10h47

Ryan,
le texte ne s'affiche toujours pas à droite de l'image !
Look at
http://www.votre-faire-part.com/test...lanche-350.htm
http://www.votre-faire-part.com/test...-enveloppe.css

Ne me laisse pas tomber stp

**numew** · 21/01/2015, 11h11

Pour centrer un texte en css il suffit d'utiliser "text-align:center;"

Par exemple :

Code html :

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

1
2
3
4
<div style="text-align:center;">
<u>Dimension de la carte simple</u>
...etc.
</div>

Invité · 21/01/2015, 11h17

@numew
Il ne suffit pas de lire les textes en gras...

Bonjour,
Voilà UNE solution parmi d'autres.

il faut d'abord corrigé la structure même de la page.
Ensuite, englober chaque groupe "image/texte" dans un div.

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
<div class="contenu">
	<aside>
		.............
	</aside>
	<section>
		<h1>Cartes simples et enveloppes blanches 350Gr</h1>
		<h2 align="center">POUR VOS FAIRE-PART</h2>
		<div class="img-txt">
			<img class="impression" title="" alt="" src="cartes-enveloppes/carte-blanche-350-gr.jpg">
			<div class="texte">
				.............
				<hr class="clear">
			</div>
		</div>
		<div class="img-txt">
			<img class="impression" title="" alt="" src="cartes-enveloppes/carte-blanche-350-gr.jpg">
			<div class="texte">
				.............
				<hr class="clear">
			</div>
		</div>
	</section>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
.contenu > aside { float:left; width:23%; margin:0 1%; }
.contenu > section { float:left; width:73%; margin:0 1%; }
 
.img-txt { 
   display:inline-block; clear:both; border:1px solid #ccc; padding:15px; 
   margin:1% auto; /* c'est ce AUTO qui va centrer le groupe image+texte */ 
   overflow:hidden; /* important ici */
}
.img-txt img.impression { float:left; width:200px; }
.img-txt div.texte { float:left; width:400px; }}

Tu peux aussi améliorer la sémantique et la présentation des textes :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="texte">
	<h5><b>Dimension de la carte simple</b></h5>
	<ul>
                <li>Format : 14 X 10.5 CM</li>
		<li>Grammage : 350 gr</li>
        </ul>
	<h5><b>Caractéristique de l'enveloppe</b></h5>
	<ul>
                <li>Format : 11.4 x 16.2 cm</li>
		<li>Grammage : 120 gr</li>
        </ul>
        <hr class="clear">
</div>

**numew** · 21/01/2015, 11h45

Oups ! Je vais essayer de me rattraper. Si j'ai compris donc, je ferais plutôt ça :

Code html :

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

1
2
3
4
<div style="text-align:center;">
    <img style="vertical-align:top;" src="./cartes-enveloppes/carte-blanche-350-gr.jpg">
    <div style="display:inline-block;">Le texte...</div>
</div>

Invité · 21/01/2015, 21h45

Bonjour Garance,
1/ certaines balises ne sont pas fermées :
dans <aside> -> <h2>....</h2>.

2/ Ajoute :

Code css :

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

1
2
3
4
5
 
.contenu {
   overflow:hidden; /* cela va replacer les éléments float dans le flux */
   /* ....... */
}

AUTRE SOLUTION (meilleure !) :
ajouter une class "clearfix" sur les balises susceptibles de contenir des éléments flottants :

Code :

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

1
2
3
4
<div class="contenu clearfix">
.........
<footer class="clearfix">
.........

Code css :

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

1
2
3
4
5
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    clear: both;
}

**garance.tosello** · 21/01/2015, 22h11

Merci merci je vais garder ta solution et celle de @numew
c'est à dire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="text-align:center;">
    <img style="vertical-align:top;" src="cartes-enveloppes/carte-blanche-350-gr.jpg" />
    <div style="display:inline-block;text-align:left;">
    <ul>
    	<h5><b>Caractéristique de la carte</b></h5>
                <li>Format : 14 X 10.5 CM</li>
		<li>Grammage : 350 gr</li>
        </ul>
	<ul><h5><b>Caractéristique de l'enveloppe</b></h5>
                <li>Format : 11.4 x 16.2 cm</li>
		<li>Grammage : 120 gr</li>
        </ul></div>
</div>

et de la tienne je vais m'en servir pour une autre page.
Vous êtes 2 amours de mecs super généreux.
Je vous kiffe les gars !!
Merci merci merci merci merci

Invité · 21/01/2015, 22h38

Il te manque :

Code :

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

1
2
.contenu > aside { float:left; width:23%; margin:0 1%; }
.contenu > section { float:left; width:73%; margin:0 1%; }

N.B. "mélanger" des codes n'est pas l'idéal.....

Je t'invite quand même à lire les cours CSS.
C'est toujours mieux quand on comprend ce qu'on fait.

**garance.tosello** · 22/01/2015, 00h00

Oui tu as completement RAISON mais quand je fais je comprends plus au moins;
C'est juste le point de départ le + dur
Voilà j'ai tout corrigé.
Mille milliard de mercis

Mettre un texte à droite de l'image CSS

CSS

Discussions similaires

Partager

Partager