Mettre un texte à droite de l'image CSS

Version imprimable

20/01/2015, 16h28
garance.tosello

Mettre un texte à droite de l'image CSS

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

Yop!

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

Code:

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.

21/01/2015, 10h47
garance.tosello

Ne m'abandonne pas stp / Problème d'affichage

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 :P
21/01/2015, 11h11
numew
Pour centrer un texte en css il suffit d'utiliser "text-align:center;"

Par exemple :
Code:

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

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

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:

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:

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:

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>

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

Code:

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>

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

2/ Ajoute :
Code:

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:

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

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

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

Code:

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

21/01/2015, 22h38
Invité
Il te manque :
Code:

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.
22/01/2015, 00h00
garance.tosello

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