FLOAT agissant d'une classe sur un DIV distant

Question

Pages :

Groumphy

13 Nov 2004 à 09:14

Bonjour à tous et à toutes,

Je reprends un sujet que j'avais posté sur Média-Box , auquel ElMoustiko m'avait aidé mais sans grand succès (non pas que ses réponses n'étaient pertinante mais mon étude du CSS se fait de plus en plus difficile...).

Bon le fait est le suivant : Je suis occupé à faire un site XHTML / CSS valide W3C - WAAI-AAA - Bobby AAA - Accessibilité pour tous niveau 3 ... Il s'agit d'un site personnel dédié à faire dévelloper (un zeste je l'espère) mes connaissances sur les standard.

Le problème que je rencontre est le suivant : je désire faire aligner à coté d'une image du texte. J'ai donc lu avec attention les tutoriaux CSS de AlsaCréations.com et j'ai découvert plusieurs méthode pour pouvoir aligner le texte à coté d'une image (a savoir les marges et les FLOAT).

J'adopte donc ces éléments afin de pouvoir réaliser ce que je désire.
Je crée donc une classe couplée à l'image comprenant le FLOAT:LEFT; et une autre avec le texte texte comprenant des MARGIN-LEFT et MARGIN-RIGHT permettant de ne pas empietter sur l'image.

Mon code est donc le suivant :

	

#corps img { 
   border: 1px solid #000000; 
   /* margin: 3px; */ 
} 
#corps .image { 
   float: left; 
   margin: 3px; 
} 
#corps .texte { 
   /*float: right;*/ 
   /*width: 60%;*/ 
   margin-left: 20px; 
   margin-right: 20px; 
}

Donnant le résultat espéré à savoir :
http://users.skynet.be/digital-nation/tmp/align_ok.JPG

Le résultat est donc présent. J'ai aussi crié trop vite victoire, car le FLOAT:LEFT de l'image interopère dans le DIV se trouvant dans mon bas de page et donc décale le texte vers la droite !

http://users.skynet.be/digital-nation/tmp/pbl_pp.JPG

Lorsque je supprime donc le FLOAT:LEFT; de l'image, cela redevient un alignement normal comme demandé dans le CSS. A savoir, un simple MARGIN de quelques pixels.

Evidemment, pris d'un lucidité compréhensible, je tente l'inverse ... Le FLOAT:RIGHT; sur le texte et un MARGIN sur l'image... Mais le tempo est identique.

ElMoustiko m'a donné le conseil de mettre CLEAR:BOTH sur le paragraphe suivant (pour exemple...). Suivant donc son conseil dans toute son ardeur, ... Et le coeur plein d'espoir se dégonfla bien vite !
Le résultat escompté n'était pas présent !

Nous avons fais de même avec des DISPLAY:BLOCK, mais là aussi sans succès...

J'ai donc changé l'optique, et essayé de voir ce qui clochait dans la CSS ... Mais je n'ai rien trouvé !

Hum ... J'ai aussi essayé de tripatouiller (car j'en avais un peu marre) sur les différents DISPLAY:BLOCK et CLEAR:BOTH sur les différents DIV, paragraphe etc. et toujours sans succès.

J'ai de nouveau réinitialisé la CSS et la page ... Et j'ai juste inséré le problème ...
Vous pourrez voir le résultat à l'adresse suivante

Chose autrement bizarre, pour une fois ( ! ! ) ce n'est pas IE qui me pose problème mais bien Opéra ...

Alors messieurs, dames, à votre bon débogage je fais appel.

Je vous en remercie ...

Groumphy

P.S. : je suis un peu dur de "comprenur" Smiley biggrin

Modifié le 13 Nov 2004 - 09:18

Stephan

13 Nov 2004 à 09:52

Une piste de solution :

Le code HTML


<div>
<img src="" width="" height="" alt="" /><div class="texteadroitedelimage"></div>
</div>

Le code CSS


img { 
   float: left; 
}

div.texteadroitedelimage { 
   margin-left: value; /* la largeur de l'image + distance entre les deux */
}

Modifié le 13 Nov 2004 - 09:52

Olivier

13 Nov 2004 à 11:36

Je te renvoi le code que j'avais fait :


<!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" xml:lang="fr" lang="fr">
	<head>
		<title>Photo et float</title>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		
		<style type="text/css">
		div.galerie h2
		{
			font-size: 0.9em ;
		}
		
		div.galerie p
		{
			float: left ;
		}
		
		div.galerie p img
		{
			float: left ;
		}
		
		p#footer
		{
			clear: both ;
			border: 2px solid blue ;
		}
		</style>
	</head>

	<body>
	<h1>Essai avec image, float, et pied de page</h1>
		<div class="galerie">
			<h2>Leurre d'une réalité de tous les jours, je voyais la lumière&#8230; Les yeux fermés.</h2>
			<p>
			<img src="arbre.jpg" alt="Arbre" />Au bord de la mésaventure, j'ai erré sur les chemins qui se perdaient&thinsp! A ceux qui m'ont aidé, merci, de tout coeur. Je leurs laisse le loisir de pouvoir découvrir les textes ci-après&#8230; Ceux qu'ils ont lus, ceux qu'ils ont partagés au sommet des peines rencontrées, mutuellement réconciliés&thinsp!</p>
			<p><small>Source de l'image&thinsp;: Patrick Verdier. </p>
		</div>
		
		<p id="footer">Pied de page</p>
	</body>
</html>

Qui fonctionne parfaitement...
Je sais pas comment tu te débrouilles :s

Groumphy

14 Nov 2004 à 10:04

J'ai essayé les deux solutions ... En retravaillant le fichier à 0 ...

Hors lorsque je couple la solution de ElMoustiko seule, en effet, il n'y a pas de problème !! Mais lorsque je l'adapte à la page déjà créé, cela poste problème.

J'ai donc encadré dans le DIV #corps le texte et l'image par un DIV #galery (par exemple) sur lequel j'ai créé la CLASSE .galery ... J'ai aussi modifié les propriétés avec FLOAT etc. comme demandé, cependant le résultat reste inchangé ...

Par la suite, j'ai eu une idée (oui oui ca m'arrive), j'ai continué dans la voie de ElMoustiko et ai pris aussi exemple sur la solution de Stefan.
J'ai donc fais un mélange des deux (a savoir l'imbrication d'un nouveau DIV sur une nouvelle classe et modification du DIV #piedpage avec un CLEAR:BOTH) mais là non plus le résultat à été inchangé (j'ai eu par contre un décalage plus grand dans l'interligne global du DIV #piedpage ; du à l'action du CLEAR:BOTH) ...

Donc malheureusement, cela ne fonctionne pas Smiley decu

J'ai aussi laissé mes bricoles en lignes ... (la dernière, concaténation du mélange Smiley smile

) ...

Si vous le désirez je puis remettre le fichier original ?

Mais bon ... Ici je ne m'en sors pas ... Smiley fouille

Olivier

14 Nov 2004 à 12:48

Prend ma solution qui fonctionne, et brode autour (sans imbriquer 36000 div, ça sert à rien), et tu devrais t'en sortir, et si ça se met à déconner, regarde étape par étape où ça foire.

Groumphy

14 Nov 2004 à 16:13

ElMoustiko a écrit :
Prend ma solution qui fonctionne, et brode autour (sans imbriquer 36000 div, ça sert à rien), et tu devrais t'en sortir, et si ça se met à déconner, regarde étape par étape où ça foire.

Hum ben justement ... avant de faire toute l'imbrication, j'ai fais EXACTEMENT ce que tu avais marqué...

A savoir :
- Attribuer la classe au DIV.
- Création de deux nouvelles classes dépendant du FLOAT.
- Modification du code source par un P avec CLEAR:BOTH.
- Attribution d'un CLEAR:BOTH sur le DIV du pied de page
etc.

(En bref j'ai repris ce que tu avais dis précédemment) Smiley cligne

Et je peux t'assurer que j'ai vérifié ... Revérifié ... Et encore revérifié !
Mais rien n'y fais ! Je t'assure que tes explications sont claire, compréhensible ... Et j'ai compris comment faire (là t'es un des premiers à l'avoir réussi du premier coup Smiley eek

) ou alors je suis un peu "bête" ? Smiley fou

Hum désolé mais là j'ai tout bien suivis avant de briquer à ma manière ...
Heu d'ailleur je vais enlever le code modifier sinon je vais me tromper sur ma prochaine modification Smiley biggrin

Olivier

14 Nov 2004 à 16:15

Sans rire, je comprend pas comment tu fais... t'as un code pondu tout cuit qui marche et t'arrive pas à le refaire Smiley eyecrazy

Je peux rien pour toi mon pauvre Smiley biggrin

!!

Là c'est moi qui ne doit pas comprendre, je vois même pas ce qui cloche dans ton machin...

Groumphy

16 Nov 2004 à 19:11

ElMoustiko a écrit :
Sans rire, je comprend pas comment tu fais... t'as un code pondu tout cuit qui marche et t'arrive pas à le refaire

Hum ben si j'arrive a le refaire ... Mais il ne fonctionne pas ... Ca je comprend pas ! Il fonctionne sur ton code, mais pas sur le mien. Est-il possible qu'une valeur CSS d'origine interragisse sur les valeurs que je rajoute ?

ElMoustiko a écrit :
Je peux rien pour toi mon pauvre !!

Ne t'inquiète pas ... Je dors encore Smiley smile

Cependant ca m'ennuie, je comprend tout a fait ce que tu m'expliques, mais lorsque je le transpose à ma page, cela ne fonctionne pas ! Hors quand je crée une page avec les mêmes propriétés que la tienne, cela fonctionne ... J'ai relu les tuto CSS sur les valeurs que j'utilises ... Et je ne vois rien qui cloche.

ElMoustiko a écrit :

Là c'est moi qui ne doit pas comprendre, je vois même pas ce qui cloche dans ton machin...

Ben justement ... L'alignement sur le DIV du bas se fait par rapport aux FLOAT de l'image ... Tel est mon problème ... Et le fait de regonfler la DIV avec un CLEAR:BOTH ne fonctionne pas ! (par contradiction sur ton exemple ou tout fonctionne )
Smiley hum

Hum ... Désolé Smiley bawling

doomer

16 Nov 2004 à 21:11

J'ai trouvé ton probleme et teste cela fontionne.

Tu veux le code en privé ou pas ?

Igor

16 Nov 2004 à 21:14

@Doomer
Si tu as la solution, donnes là dans ce forum. Cela pourrait intérésser les autres membres, ne trouves tu pas ? Smiley cligne

doomer

16 Nov 2004 à 21:16

rajoutes dans ton #pied { clear:both;}

Puis dans ton #corps img{ float:left;}

je viens de tester ca fontionne

Groumphy

17 Nov 2004 à 10:10

@Doomer > Cette solution avais déja été proposée par ElMoustiko...

D'emblée je vous remercie de participer à cette quête de l'étrange.

Voici quelques PRINTSCREEN de ce que j'obtiens.

1 - Si j'adopte l'entièreté de la solution de ElMoustiko, les PRINTSCREEN sont identique à ceux du dessus.
Sous Opera
http://users.skynet.be/digital-nation/tmp/err_o1.JPG
Sous IE
http://users.skynet.be/digital-nation/tmp/err_ie1.JPG
2 - Si j'adopte un mélange entre la solution de Stefaan et ElMoustiko, le résultat est identique ...

3 - Si j'adopte la solution de Doomer, voici les PRINTSCREEN :
sous IE
http://users.skynet.be/digital-nation/tmp/err_ie.JPG
Sous Opera
http://users.skynet.be/digital-nation/tmp/err_o2.JPG

En général :
Le paragraphe qui se trouve en contact avec l'image se positionne bien ! Cependant le paragraphe suivant à ce dernier ne se positionne pas en FLOAT:LEFT (pourtant il n'y a pas de CLEAR:BOTH mis sur le paragraphe suivant), provoquant donc un espace entre les deux paragraphes.

Sur l'adaptation générale, si je met un CLEAR:BOTH sur le DIV #PIEDPAGE, cela fais un espace entre le dit DIV et le DIV #CORPS ... Rajoute aussi une barre de défilement (cela supprime donc les élément de 400px de hauteur que j'ai prédéfinis).

Donc malheureusement ce n'est pas encore le résultat ... Smiley decu

MissMonde

17 Nov 2004 à 16:17

Salut Groumphy,

voici ma suggestion :

à partir de la version qui est en ligne actuellement (mercredi 16heures, si tu ne l'as plus, j'en ai une copie)

il y a 2 choses à changer :

1. dans le code html

fais commencer ton paragraphe après l'image.
enlèves la balise ouvrante du paragraphe qui se trouve juste avant ton image et mets-la juste après.

2. dans la css

rajoute dans img {margin:3px;float:left;}

A+
Modifié le 17 Nov 2004 - 16:21

Groumphy

17 Nov 2004 à 17:09

Hello MissMonde,

Merci de ta réponse. Elle est fonctionnelle sur un problème, mais revient au problème initial ...

Ci-dessous le PRINTSCREEN sous Opera :

http://users.skynet.be/digital-nation/tmp/err_o3.JPG

Comme tu peux le voir, le DIV #PIEDPAGE subit encore le FLOAT:LEFT (de l'image ??) ... Hors, un CLEAR:BOTH à été mis sur le dernier P dans la balise SMALL ...

Le léger décallage de l'image peut facilement etre corrigé (donc pas de panique).

Cependant, sous IE il n'y a AUCUN FLOAT:LEFT qui se fait !!
Hum ... Désolé Smiley hum

MERCI déja pour ce bon avancement.

As-tu une autre idée ?

daitheflu

17 Nov 2004 à 19:26

Off topic mais j'y tiens : merci ElMoustiko tu viens de me donner une solution pour un problème sur lequel je sèche depuis 3-4 jours Smiley smile

MissMonde

17 Nov 2004 à 20:08

Suite ...

Je n'ai qu'IE6 et Firefox 1.0, donc je ne sais pas ce que ça donnera dans Opéra.

Garde les modifications antérieures et :

1. enlève les width dans les paragraphes à 2 endroits de ta CSS :

p{} et #corps p{} si tu veux régler les marges, fais-le avec ...les marges.

2. small n'est pas une balise valable à ma connaissance, tu dois utiliser une classe ou un id auquel tu mets le nom small.

donc dans ton code, mets p class="small" et dans la css p.small {clear:both;}

qu'est-ce que ça donne ?

Groumphy

20 Nov 2004 à 15:13

MissMonde a écrit :
Suite ...

Youpieeee

(<small>tiens les smileys ont changé !</small>) ...

MissMonde a écrit :

Je n'ai qu'IE6 et Firefox 1.0, donc je ne sais pas ce que ça donnera dans Opéra.

Oh ne t'inquiète pas je n'ai que IE6 et Opéra ... Donc ca se complète ...

MissMonde a écrit :

Garde les modifications antérieures et :

Promis je touche pas !!

MissMonde a écrit :

1. enlève les width dans les paragraphes à 2 endroits de ta CSS :

p{} et #corps p{} si tu veux régler les marges, fais-le avec ...les marges.

Malgré que je ne comprend pas pourquoi le WIDTH gène je le fais aveuglément ... Hop voila ... Changé (ai pas encore rajouté les marges ...)

MissMonde a écrit :

2. small n'est pas une balise valable à ma connaissance, tu dois utiliser une classe ou un id auquel tu mets le nom small.

Et pourquoi SMALL n'est pas une balise valable ? Smiley eek

C'est une balise intransèque à une autre... (dans mon cas :

< p >< small > Mon texte < /small >< /p >

) ...

Enfin, là encore je réfléchis pas ... Et je modifie ... Classe crée, adaptée, etc. Voilaaa ...

MissMonde a écrit :

donc dans ton code, mets p class="small" et dans la css p.small {clear:both;}

Parfais ... Par facilité je crée une simple classe ... avec juste CLEAR:BOTH (que je modifierais par après si cela fonctionne !)

Smiley murf

(Je m'applique là)

MissMonde a écrit :

qu'est-ce que ça donne ?

Ben rien de convaincant ! En gros rien n'a changé dans la présentation. Il y a toujours ce fameux décalage vers la droite du texte dans le DIV #PIEDPAGE ...

J'ai suivis à la lettre ce que tu m'as dis ... Mais sans grand succès.
Heureusement que je suis pas le seul à ne pas comprendre là sinon je me pendrais bien avec mon cable téléphonique ... Smiley ravi

MissMonde

21 Nov 2004 à 16:48

Salut Groumphy,

Avec IE6 et FF1.0, il n'y a pas de décalage de texte.
Je ne comprends pas ton problème : si je vais voir à ton adresse,

a écrit :
J'ai de nouveau réinitialisé la CSS et la page ... Et j'ai juste inséré le problème ...
Vous pourrez voir le résultat à l'adresse suivante

il n'y a pas de décalage.

C'est peut-être avec Opéra qu'il y a un problème ?
Dans ce cas, je ne peux pas t'aider.

sinon, pour "small", dans ta css tu ne peux pas mettre :

small{...} parce que ce n'est pas une balise XHTML

par contre, tu peux donner ce nom à un id ou une classe et ça devient :

#small{...} ou .small{...}

Bon courage

Groumphy

21 Nov 2004 à 17:38

C'est ce que je trouve bizarre ... Sur IE6 / FireFox, il n'y a rien. Apparemment il n'y a que Opéra qui plante dans ce style.

Je n'ai pas pu tenter non plus sur Safari qui je pense plantera aussi.

Dans tous les cas, merci de ton aide.

Pourrais-tu m'indiquer des documents mentionnant que la balise SMALL n'est pas valide XHTML ? Car je n'en ai pas trouvé ...

Thanks,

Raphael

Administrateur

21 Nov 2004 à 17:48

Groumphy a écrit :

Pourrais-tu m'indiquer des documents mentionnant que la balise SMALL n'est pas valide XHTML ? Car je n'en ai pas trouvé ...

Elle est valide.
Mais c'est souvent la même chose : <small> fait partie des balises de mise en forme, donc déconseillées en HTML Strict et XHTML strict :
http://www.la-grange.net/w3c/html4.01/present/graphics.html#h-15.2 :

W3C a écrit :
Les éléments HTML suivants spécifient des informations de police. Bien qu'ils ne soient pas tous déconseillés, on décourage leur utilisation en faveur des feuilles de style.

Pages :

Sujet clos