[Résolu]Div flottant, Clear both ; mauvaise compréhension

Bonjour,

Ayant parcouru le forum avec beaucoup d'attention, j'ai rencontré beaucoup de problème parlant de mauvais (re)positionnement lors de l'utilisation d'un DIV ayant l'attribut FLOAT...

Je me suis donc moi-même pris au jeu et apparement je suis tombé moi-même dans un panneau insolvable (à mon niveau).

De fait, j'ai une structure HTML simple :
1. conteneur,
2. conteneur > en-tête,
3. conteneur > corps,
4. conteneur > menu,
5. conteneur > pied de page.

Un cas très classique il va de soi (remarquez simplement mon choix d'avoir placé le menu sous le corps).

Mon problème survient principalement lorsque je veux placer le menu sur la droite du corps...

Pour ce faire, j'ai donc définis le corps comme ceci :

#texte {
	width: 60%;
	float: left;
	margin-right: 20px;
}

Que je traduis de la manière suivante : je te donne 60% de la largeur du conteneur (fixé à760px), tu flottes à gauche et à ta propre largeur tu rajoutes sur la droite une marge de 20px. (Hum, corrigez-moi si je me trompe).

De fait, je continue par la définition du menu comme ceci :

#menu {
	width: 230px;
	margin-left: 65%;
	clear: both;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #69F;
}

Que je traduit de cette manière : le menu a une largeur de 230px, une bordure à droite de 1px en pointillé et d'une couleur bleue légère et tu as une marge à partir de la gauche de 65% (qui devrait englober donc la marge du document...) et vu que le document est flottant à gauche tu iras t'y placer tout en indiquant que l'élément suivant ne dois pas agir en conséquence sur le float. (corriger-moi toujours si je me trompe).

Hors, d'après ce que je fais et traduis ici, mon menu reste désespérement en bas du corps... Etonnant dirais-je.

Ne désespérant pas, je me suis rué sur un de mes sites adorés (et à vous aussi d'ailleur !) : OpenWeb.eu.org (et cette page çi et l'exemple adéquat).

Par après, je me suis donc rendus comme tout bon élève discipliné vers YoYoDesign.org et plus particulièrement le chapitre concernant les flottants et ses deux suivants...

Par le forum, j'ai pu profiter de cette URI avec plaisir mais sans succès.

Hors, je n'ai pas trouvé où j'avais fait mon erreur !
Pouvez-vous m'informer quel est le défaut dans ma logique de pensée ?

Si vous me le permettez, je vous donne l'adresse du cas où j'ai ceci :
1. la page en question : le carnet de test du Groumphy,
2. la CSS associée au carnet de test : la CSS ;

Merci de vos explications.

Groumphy
Modifié par Groumphy (08 Mar 2006 - 07:45)

Groumphy a écrit :

#menu {
	width: 230px;
	margin-left: 65%;
	clear: both;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #69F;
}

Que je traduit de cette manière : le menu a une largeur de 230px, une bordure à droite de 1px en pointillé et d'une couleur bleue légère et tu as une marge à partir de la gauche de 65% (qui devrait englober donc la marge du document...) et vu que le document est flottant à gauche tu iras t'y placer tout en indiquant que l'élément suivant ne dois pas agir en conséquence sur le float. (corriger-moi toujours si je me trompe).

Effectivement, je pense que là tu te trompes.
Je ne suis moi-même pas très clair pour ce qui est des marges et des éléments flottants. Il se peut que la marge de droite de ton contenu (s'il n'est pas lui-même flottant) ne soit pas prise en compte par ton menu flottant placé à droite, par exemple. Par contre, il me semble qu'une marge appliquée à un élément flottant réserve un espace vide. Donc si ton menu était en premier dans le code, ça repousserait ton contenu de la largeur du menu + la largeur de la marge du menu... soit en gros de toute la largeur, et paf, passage à la ligne !

Deuxièmement, autre grosse erreur : l'emploi de la propriété clear.

wiki.media-box.net a écrit :
Clear détermine si un élément peut se trouver sur la même bande horizontale qu’un élément flottant.

.
En gros, ton clear: both dit qu'il ne faut pas laisser d'élément flottant à gauche ou à droite (both signifiant: les deux). Là encore, je ne suis pas sûr de l'interaction avec les éléments flottants, mais à priori, même si ton bloc devait venir se mettre à droite, le clear:both; provoque un retour à la ligne avant et après le bloc.

Enfin, il me semble que pour placer un élément flottant à droite tout en le laissant en deuxième position dans le code, la seule solution est que l'élément précédent doit être flottant à gauche, et ton menu flottant à droite. Sinon, si seul le menu est flottant, alors il faudra le placer en premier dans le code.

Cf cette page :

http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html

(un petit test réalisé hier )
Modifié par mpop (24 Feb 2006 - 20:35)

Bonjour,

Merci de ces précisions. Je regarderais dès que j'ai un peu le temps. Pour l'instant, le W.E. est consacré au FOSDEM 2006 .

Mais je prend bonne note de tes conseils et que mon principal défaut vient du fait que la marge soit prise en compte à partir de l'élément sur lequel s'applique donc le flottant (mais cela me semble un peu contradictoire avec ceci).

Concernant la propriété CLEAR, je ferais attention et testerais alors un CLEAR orienté LEFT/RIGHT.
Et si je ne m'en sort pas dans les FLOAT RIGHT/LEFT avec le menu en seconde position, je suivrais donc ton conseil, de faire passer le menu en premier dans le code (tant pis pour mon petit test), en lui appliquant uniquement le FLOAT LEFT comme précisé (en supprimant donc aussi les marges).

Merci à toi,

Et à ce soir pour le résultat

G.

Bonjour, ou rebonjour,

Alors voila, je voulais juste signaler le problème comme résolus. Il était encore plus bête que je ne pensais, mais sans l'aide de MPop je n'aurais pu trouver. De fait, je l'en remercie.

Le problème se situait non pas QUE sur le DIV #MENU mais aussi sur le suivant #PIEDPAGE qui ne reprennais pas le CLEAR.

De fait, j'ai adapté la CSS #MENU avec un CLEAR INHERIT et le #PIEDPAGE avec un CLEAR BOTH...

Merci de vos lectures, de vos aides

Re-(re)-bonjour,

Eh bien après un bref enchantement, je puis dire que la solution apportée est bel et bien efficiente sour Opéra, Firefox mais pas encore sous I.E. v6 !

Je pense que le modèle de boite n'est pas des meilleurs... Avez-vous peut-être une idée ou je pourrais m'orienter pour ma recherche ? (si possible en français )

Merci,

G.

Bonjour,

Après quelques recherches, je ne suis malheureusement pas beaucoup avancé.

A vrai dire, au fur et à mesure de chercher j'ai l'impression de m'enfoncer et de m'enfoncer dans le problème.

J'ai trouvé quelques source d'information. Mais apparement je ne suis pas d'une limpidité exemplaire...

Est-ce que quelqu'un pourrait-il me fournir des sources d'information ? Des astuces ? Une solution (non je ne formaterais pas mon disque !) ? Du pourquoi du comment (et la résolution ou un indice) du placement du menu dans le bas sur Internet Explorer ? (alors que sous FF1.0, O7, etc... il se place bien à coté !).

Merci de vos conseils,

G.

Salut,

IE calcule la marge gauche du menu par rapport au bord droit de #texte. Je crois que c'est lié au haslayout donc la ressource c'est blog and blues sur ce terme. en attendant un margin-left:0; du menu pour IE résoud cet aspect.

Mais ce n'est pas le seul et ta feuille de style m'a bien pris la tête.

Il y a une chose plutôt mystérieuse dans tes styles c'est par exemple ceci :

.entree ul {
	
	width: 80%;
	margin-right: 80px;
	margin-left: 80px;

En fait j'en suis presque arrivé à me demander comment une addition de largeur aussi peu gérable ne faisais pas craquer FF également.

Quoiqu'il en soit le problème est bien de cet ordre là pour IE, pour le vérifier il suffit de rajouter pour un test de vérification :

#texte * {
margin:auto 0;
}

à la fin des déclarations de style.

Tout rentre alors dans l'ordre pour IE (la question du margin-left du menu ayant été réglée bien évidemment)

Hello,

Merci de ta réponse si rapide et précise.
En effet, je n'ai même pas besoin de faire une définition de 0 sur les marges de #texte ... Et pour cause, je le diminue à 55% et cela fonctionne...

Toutefois, comme tu l'as fait remarquer, des éléments extérieurs jouent encore sur le #menu sur certaines pages.
Apparement je n'ai pas très bien compris la manière de faire ou de comment faire... Mais qu'importe, ne baissons pas les bras.

J'ai réussi à faire des idées... Maintenant il ne me reste plus qu'a les mettre en pratique.

Ma méthode sera donc la suivante :

1. reprendre le modèle de blog & blues,
2. repenser la CSS, et m'orienter vers un design compatible en tenant compte des modèle de boite selon les navigateurs,

De fait, le travail de départ (selon moi) a été mal fait... (Oui il faut parfois se critiquer !). J'ai pensé trop loin en négligeant la base de départ !

a) j'ai incorporé et développé le menu beaucoup trop tard,
b) j'ai appliqué les styles sur des fautes de mise en page (plutôt de non respet des modèles de boites),
c) j'ai voulu aller plus loin que je ne devais,

Par contre, j'ai pu déjà avoir des idées sur :

- une idée globale de présentation semi-flexible (certainement une des mises en pages les plus complèxes que l'on puisse inventer),
- avoir un "road-map" d'évolution afin de pouvoir retravailler les points faibles, fort, les idées etc... Tout en permettant une évolution décidée,

Merci donc de l'aide.

Evidement, vos commentaires et avis motivés sont TOUJOURS les bienvenus dans ce topics...

- dois-je donc établir résolus ? ou attendre que j'ai finis ce que j'ai dit -

G.

Bonjour,

Alors, je tenais à vous faire un petit suivis de ce que j'avais entrepris...

Mon défis était le suivant :

1. avoir une mise en page fixe sur la largeur (760px) et fluide sur la hauteur,
2. dans cette contrainte venais se fixer identiquement : 1 contenu à largeur variable et 1 menu à largeur fixe,
3. il ne devait pas y avoir de débordement du menu si le ce premier était plus long que le contenu vers le dessous du contenu,

Alors comme cité plus haut, je me suis vivement inspiré du modèle de blog-and-blues.

Je suis arrivé à la conclusion suivante :
1. définir un conteneur comprenant : l'en-tête, le contenu, le menu et le pied de page,
2. définir une largeur fixe de 760px au conteneur et le centrer,
3. définir une largeur et une hauteur fixe pour l'en-tête et le pied de page,
4. définir un contenu variable de 60% avec un FLOAT LEFT, incluant aussi un MARGIN RIGHT de 30px, et un MARGIN LEFT de 10px,
5. définir un menu d'une largeur de 150px, lui attribuer une classe définissant une marge de 65% en MARGIN LEFT et le reste des styles dans l'ID du menu.

Cela a donné le résultat 'brut' escompté.

Mais ce que je voulais vous faire partager c'est une image indiquant que c'est parfaitement compatible avec tant I.E. que des navigateurs standards.



Sur l'image, nous pouvons remarquer que malgré l'alignement du DIV CONTENEUR, l'intérieur est totalement différent (Cf. l'article de OpenWeb.

Le test a été fait avec Opera 8.52 et IE6.0 ... Evidement le résultat est totalement identique entre Opera, Firefox et tutti quanti...

Hum... Vivement que je refasse le test avec IE7 (troll)

Voici donc ce qui clos tout.

G.

P.S. : et merci à tous pour vos participations et lectures.