Image à côté d'un texte

**Nitrox06** · 08/05/2009, 14h43

Bonjour

,

Mon problème est simple : Je voudrais insérer une image dans ma balise "maincontent" et je voudrais mettre un texte à côté sur ce modèle : http://www.monsterup.com/upload/1241786141436.png

J'ai tout essayé

(ce que je pouvais bien sûr), le problème, c'est que quand j'insère l'image, le texte descend en dessous, je n'arrive pas à le mettre à côté !!!

Si vous pouviez m'aider pour ça...

Merci à tous,

Nitrox

**12monkeys** · 08/05/2009, 14h49

Bonjour

On veux bien t'aider, mais si tu nous mettais le code que tu as essayé ce sera plus facile...

**Nitrox06** · 08/05/2009, 14h54

Ok, alors voici le HTML :

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
<div id="mainContent"><h1>Ansichtskarten sind Ansichtssache</h1><br/> <br/><br/>
  
<div id="fleur"><img src="IMAGES_DESIGN_SITE/fleur.jpg" alt="Fleur"/></div>


  <div id="presentation">
  
<p>Dass die <em>Collection Krackenberger</em> nun schon über Jahrzehnte hinweg ein verlässlicher Partner für den Fachhandel ist, ist in unserer heutigen, schnellebigen Zeit geradezu ungewönlich.</p>
<p>Wir entwickeln fotografisch hochwertige Gruss- und Glückwunschkarten, Servietten, Schreib-, Adress- und Notizbücher für anspruchsvolle Firmen im In- und Ausland.</p>
<p>Foto-Design-Produkte sind für uns keine billigen "Eintagsfliegen", wir glauben an Qualität und sind stolz auf unsere jahrlang gut verkäuflichen "Kassiker".</p>
<p>Gerade in einer Zeit, in der Grüsse und Glückwunsche allzuschnell übers Internet verschickt werden, schätzen unsere Kunden wieder die besondere Wärme einer handgeschriebenen Botschaft.
</p>
<p>Die <em>Collection Krackenberger</em> steht sit Jahren für eine Produktpalette die allen Beteiligten Freude bereitet.</p>
<p>Wir wünschen uns eine Zusammenarbeit mit ihnen, in welcher noch viele gemeinsame brilliante Ideen entstehen.</p>

<div id="signature"><img src="IMAGES_DESIGN_SITE/signature.png" alt="Signature" /></div>


 
  </div>

Et voici le CSS :

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
#presentation p{
 
	margin-right:80px;
	margin-top : -30px;
	text-align:justify;
	font-size:14px;
	color:#333;
	margin-left: 140px;
}
#fleur {
	width: 102px;
	height: 373px;
	float:left;
	padding-left: 28px;
	padding-top: 18px;
}

**12monkeys** · 08/05/2009, 15h17

Alors div est une balise de type block par opposition aux balises de type en ligne (comme span). Ce qui entraine un retour à la ligne automatique. De même pour les balises <p>

Pour contrer ça attribut un float:left à l'image...

Placer un margin-top : -30px; sur chaque balise p va faire que toutes tes lignes seront écrites les une sur les autres...

De même pour les autres marges, pourquoi de pas les attribuer à #presentation

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<title>Testes</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="all" />
<style type="text/css">
#presentation {
        margin-right:80px;
        margin-left: 140px;
}
#presentation p{
        text-align:justify;
        font-size:14px;
        color:#333;
}
img { float:left; }
</style>
</head>
 
<body>
 
  <div id="presentation">
  <img src="img1.jpg" alt="Fleur"/>
<p>Dass die <em>Collection Krackenberger</em> nun schon über Jahrzehnte hinweg ein verlässlicher Partner für den Fachhandel ist, ist in unserer heutigen, schnellebigen Zeit geradezu ungewönlich.</p>
<p>Wir entwickeln fotografisch hochwertige Gruss- und Glückwunschkarten, Servietten, Schreib-, Adress- und Notizbücher für anspruchsvolle Firmen im In- und Ausland.</p>
<p>Foto-Design-Produkte sind für uns keine billigen "Eintagsfliegen", wir glauben an Qualität und sind stolz auf unsere jahrlang gut verkäuflichen "Kassiker".</p>
<p>Gerade in einer Zeit, in der Grüsse und Glückwunsche allzuschnell übers Internet verschickt werden, schätzen unsere Kunden wieder die besondere Wärme einer handgeschriebenen Botschaft.</p>
<p>Die <em>Collection Krackenberger</em> steht sit Jahren für eine Produktpalette die allen Beteiligten Freude bereitet.</p>
<p>Wir wünschen uns eine Zusammenarbeit mit ihnen, in welcher noch viele gemeinsame brilliante Ideen entstehen.</p>
  </div>
 
</body>
</html>

**Nitrox06** · 08/05/2009, 15h46

J'y suis arrivé :-)

Je me suis inspiré de ton modèle, mais j'ai pas pu m'empêcher de rajouter un <div> pour le texte

Voici pour les autres :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 <div id="presentation">
  <img src="IMAGES_DESIGN_SITE/fleur.jpg" alt="Fleur"/>
  <div id="textepresentation">
<p>Dass die <em>Collection Krackenberger</em> nun schon über Jahrzehnte hinweg ein verlässlicher Partner für den Fachhandel ist, ist in unserer heutigen, schnellebigen Zeit geradezu ungewönlich.</p>
<p>Wir entwickeln fotografisch hochwertige Gruss- und Glückwunschkarten, Servietten, Schreib-, Adress- und Notizbücher für anspruchsvolle Firmen im In- und Ausland.</p>
<p>Foto-Design-Produkte sind für uns keine billigen "Eintagsfliegen", wir glauben an Qualität und sind stolz auf unsere jahrlang gut verkäuflichen "Kassiker".</p>
<p>Gerade in einer Zeit, in der Grüsse und Glückwunsche allzuschnell übers Internet verschickt werden, schätzen unsere Kunden wieder die besondere Wärme einer handgeschriebenen Botschaft.
</p>
<p>Die <em>Collection Krackenberger</em> steht sit Jahren für eine Produktpalette die allen Beteiligten Freude bereitet.</p>
<p>Wir wünschen uns eine Zusammenarbeit mit ihnen, in welcher noch viele gemeinsame brilliante Ideen entstehen.</p>
<div id="signature"><img src="IMAGES_DESIGN_SITE/signature.png" alt="Signature" /></div>
</div>

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
#presentation {
	margin-right:80px;
	margin-left:20px;
 
}
 
#presentation p{
 
	text-align:justify;
	margin-top:-30px;
	font-size:14px;
	color:#333;
	}
#textepresentation{
	margin-left: 103px;
	margin-top:-385px;
}

Pour ceux qui veulent voir le résultat : http://www.monsterup.com/upload/1241790338239.png

Merci !

**12monkeys** · 08/05/2009, 16h52

Tu est malade

tu est atteint de divite aigue

Pour transposer la célèbre expression : "trop de div tue les div"...

Sérieusement il n'est pas bon d'utiliser trop de div, il faut faire un code sémantiquement propre, c'est à dire utiliser les balises appropriées aux endroits où il faut... Et ne pas mettre des div partout par exemple ou en mettre quand il ne faut pas...

Un peu de lecture : http://cssglobe.developpez.com/tutoriels/css/balises/.

Content de t'avoir aidé

Image à côté d'un texte

HTML

Vue hybride

Discussions similaires

Partager

Partager