Float et image

**duncan66** · 27/03/2011, 03h12

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 :

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

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 :

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

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 ?

**ornitho13** · 27/03/2011, 09h37

Salut,

met ceci :

Code :

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

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).

**duncan66** · 27/03/2011, 19h58

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 ^^)

**ornitho13** · 27/03/2011, 20h13

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.

**Nesmontou** · 27/03/2011, 21h27

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 :

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

**duncan66** · 27/03/2011, 22h54

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

Float et image

CSS

Discussions similaires

Partager

Partager