Float et image [Résolu]

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

27/03/2011, 19h58	#3
duncan66 Invité de passage Inscription : mars 2011 Messages : 3 Détails du profil Informations forums : Inscription : mars 2011 Messages : 3 Points : 0 Points : 0	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 ^^)
	00

27/03/2011, 20h13	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	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.
	00

27/03/2011, 22h54	#6
duncan66 Invité de passage Inscription : mars 2011 Messages : 3 Détails du profil Informations forums : Inscription : mars 2011 Messages : 3 Points : 0 Points : 0	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email