Incorporer une div dans une div

Version imprimable

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:

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:

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.

18/07/2008, 12h06
Bovino

Citation:

les mettre "croisé"

???

Tu veux faire quoi au juste ?
18/07/2008, 13h06
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:

1 2 Apud has gentes, quarum ... <img src="../../Site 2008/Images/Adherents/Dirigeants/Dirigeant---OPA.jpg" width="200" height="175" alt="" />
D'autre part penser à baliser tes paragraphes de texte par
18/07/2008, 18h10
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+
18/07/2008, 18h39
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:

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

Merci les gars pour vos réponses.
Cela fontionne comme je le voulais.
:king:
A bientôt
21/07/2008, 14h21
FraK

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