Float et image

Version imprimable

Float et image

Bonjour a tous,
je viens vous voir car je rencontre un petit probleme dans mon css :

Donc je travaille avec deux bloc : le menu et le "corps" meme de la page. Le bloc menu est disposé en flottant a gauche.
Ensuite dans le coprs même de ma page, je met une image flottante a gauche. Et je veux ecrire une partie de texte a droite de l'image, et une autre dessous.
Code:

1 2 3 4 5 6 7 8 9 <div id="menu"> <p> blablabla mon menu </p> </div> <div id="corps"> <img src="image.jpg" class="imageflottante" alt="image" /> <p> mon texte a droite de l'image </p> <p class="sousimage"> mon texte sous l'image </p> </div>
Css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 #menu { float: left } .imageflottante { float: left; } .sousimage { clear: left; }
Et le probleme que je rencontre, c'est que mon texte se met certes sous l'image, mais va carrement sous le menu.
J'obtiens :

MM PHOTO Texte a droite
E E PHOTO
N N PHOTO
U U
MM
E E
N N
U U Texte dessous

Alors que je veux evidement le texte juste sous la photo et ne pas avoir un espace de 20cm. Une idée svp ?

27/03/2011, 10h37
ornitho13
Salut,

met ceci :
Code:

1 2 3 4 #corps{ float: left }
quand tu fais un clear, cela s'applique également par rapport au menu (ce qui engendre ton problème).
27/03/2011, 20h58
duncan66

Merci pour ta réponse, mais quand je rejoute ca, c'est carrément tout le bloc de la page qui passe sous le menu :

MM
E E
U U
MM
E E
N N
U U
----PHOTO Texte a droite
----PHOTO
----Texte dessous

(le bloc est carrement en dessous, mais décaler a droite de l'espace du menu, si c est clair ^^)
27/03/2011, 21h13
ornitho13

Bizarre, je n'ai pas ce problème...
Aurais tu une page où on pourrait voir ton problème?
ou alors tous le code html et css de ta page (y compris menu et contenu).

le problème que tu as maintenant, semble venir du padding ou du margin.

Bonjour,

Tu peux nous dire sous quel(s) navigateur(s) le problème se produit ?

Sinon, pour faire ce type de mise en page, j'utilise plutôt le positionnement absolu du menu avec une marge gauche du corps.

Ça donne quelque chose comme ci-dessous

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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">
	<head>
		<title>CSS</title>
 
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
 
			body, html {
				height: 100%;
				width: 100%;
			}
 
			#menu {
				left: 0;
				position: absolute;
				top: 0;
				width: 200px;
			}
 
			#corps {
				margin-left: 200px; /* même valeur que la largeur du menu */
			}
 
			.imageflottante {
				float: left;
			}
 
			.sousimage {
				clear: left;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<p> blablabla mon menu </p>
		</div>
		<div id="corps">
			<img src="image.jpg" class="imageflottante" alt="image" />
			<p> mon texte a droite de l'image </p>
			<p class="sousimage"> mon texte sous l'image </p>
		</div>
	</body>
</html>

Bon développement ;)

27/03/2011, 23h54
duncan66

Problème apparement résolu merci beaucoup :)

Donc rajout du float left dans le corps, et apres c'était un probleme de marge et de largeur :)