Discussion :

[solorac]

Bonjour la Communauté,

Je cherche à incorporer une photo (div id="photo")dans du texte (div id="site").
Lorsque je prends soin de les mettre "croisé", cela ne fonctionne pas. Ma photo se trouve en dessous du texte.

Voiçi le code html :

Code :

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

1
2
3
4
5
6
7
8
9
<div id="site">
			<h1>LOREM IPSUM LOREM IPSUM</h1>
			<h2>(Lorem Ipsum Lorem Ipsum Lorem Ipsum)</h2><br>
 
Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.
 
			<div id="photo"> <img src="../../Site 2008/Images/Adherents/Dirigeants/Dirigeant---OPA.jpg" width="200" height="175" border="0")/>
			</div>
		</div>

Et voiçi le code de ma 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
17
18
19
20
21
body {background-color:#009900;font-family :eras medium ITC;font-size : 90%; color : black;} /* le code hexadecimal que tu veux mettre au fond */
 
#corps {position: relative; /*Pour la position*/
    margin-left: auto; /*Pour centrer*/
    margin-right: auto; /*idem*/
    width: 858px; /*la largeur de ton div*/
	height:1207px;
    text-align: auto; /* Texte aligner sur la gauche*/
    background-image: url(../../Site 2008/Images/images - Site/Corps-site.jpg);background-repeat: no-repeat;}	
#site{width: 720px;
	height:1000px;
    text-align: left;
	margin-top:130px;
	margin-left:130px;
	}	
 
 
h1 {font-family :eras bold ITC;font-size : 300%; color : black; text-align: center;line-height: 40px}
h2 {font-family :eras medium ITC;font-size : 65%; color : black; text-align: center;line-height: 0px}
#index{margin-top:150px;}
#photo{float:right;}

Merci à ceux qui pourront éclairer ma lanterne, chose dont je ne doute pas vu que je débute en css, il y a des particularités que je n'ai pas encore saisi.

[Bovino]

les mettre "croisé"

???

Tu veux faire quoi au juste ?

[Erwan31]

Bonjour,
les éléments de niveau block comme les div génèrent un retour chariot avant et aprés l'élément.
Tu dois donc placer ton image juste après le texte:

Code :

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

1
2
 
<p>Apud has gentes, quarum ... <img src="../../Site 2008/Images/Adherents/Dirigeants/Dirigeant---OPA.jpg" width="200" height="175" alt="" /></p>

D'autre part penser à baliser tes paragraphes de texte par <p></p>

[nicoarrf]

Si c'est pour le "float:right;" que tu as un problème il faut qu'il au dessus de ton texte dans ton html.
Actuellement le flux interprète d'abord le texte et ensuite ton image en float; donc il faut d'abord metre le float pour qu'il soit bien placé dans le flux.
A+

[Erwan31]

Oups en effet j'avais pas vu l'id photo.
Donc le balisage suivant sera a priori (le placement de l'img avant ou aprés le texte devra dépendre de la cohérence d'apparition du alt dans le code par rapport au texte si le alt n'est pas vide) plus adéquate:
tu n'as pas besion d'imbriquer ton image dans une div (division), autant lui attribuer l'id
directement. Attention tu as une parenthèse fermante en trop dans ton image.
Toujours indiquer les 4 attributs suivant dans une image: src, height, width et alt (alternative textuelle reprenant le contenu textuel de l'image
ou la décrivant si nécessaire à la compréhension du contenu ou apportant une info)

Code :

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

<p><img src="../../Site 2008/Images/Adherents/Dirigeants/Dirigeant---OPA.jpg" width="200" height="175" alt="" id="photo" /> Apud has gentes, quarum exordiens ...</p>

[solorac]

Merci les gars pour vos réponses.
Cela fontionne comme je le voulais.

A bientôt

[FraK]

penses a mettre le tag "résolus" sur ton topic :p