Image à côté d'un texte

Version imprimable

08/05/2009, 14h43
Nitrox06

Image à côté d'un texte

Bonjour :yaisse2:,

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é :aie: (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
08/05/2009, 14h49
12monkeys

Bonjour

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

Ok, alors voici le HTML :

Code:

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:

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;
}

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:

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>

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 :mouarf:

Voici pour les autres :

Code:

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:

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 !

08/05/2009, 16h52
12monkeys

Tu est malade :mrgreen: tu est atteint de divite aigue :mouarf:

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é :ccool:
08/05/2009, 17h28
Nitrox06

Oui je suis un grand malade,

Ce que tu me dis me touche, parce que j'aimerais faire un code propre même si c'est mon premier site web.

Pour le moment je vais laisser comme ça car je suis en retard, mais dès que le site est en ligne vous aurez accès au code et vous pourrez me prescrire des médicaments, je veux guérir :aie:

Je te remercie pour ton aide et transmettrai la nouvelle de sortie du site (d'ici un ou deux jours).