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+