Block agrandi en suivant un lien

[Flyounet]

Bonjour,

Sur une page XHTML/CSS, j'ai le modèle suivant :

+--------------------------------------------------+
|---------------------- Top -----------------------|
+--------------------------------------------------+
+------------------------++------------------------+
|------ Conteneur  ------||------ Navigation ------|
| +--------------------+ || +--------------------+ |
| |----- Billets ------| || |------- Boxes ------| |
| +--------------------+ || |                    | |
| +--------------------+ || |                    | |
| |--- Commentaires ---| || |                    | |
| +--------------------+ || +--------------------+ |
+------------------------++------------------------+
+--------------------------------------------------+
|---------------------- Down ----------------------|
+--------------------------------------------------+

Or lorsque je passe le pointeur sur un lien de #Commentaires le block s'agrandit sur la droite. Puis si je le fais sur #Billets celui-ci aussi s'agrandit.

Url de test : http://design.flyou.net/blog.flyounet.net/index2.htm

Je n'arrive pas à trouver comment corriger ce problème. Quelqu'un peut-il m'aider ?

Merci.

N.B. : Y a-t-il un rapport avec le fait que je n'arrive pas à avoir mon block #Down à la bonne place ?

[Sylvain Trovalet]

Ma réponse va te paraitre surprenante car je déteste IE mais il n'empêche que tu devrais tester ton site sous d'autres navigateurs que mozilla et tu serais un peu surpris du résultat., j'avoue ne pas avoir installé opéra (honte à moi).

bon il faut sûrement chercher dans ce code ci :

.b_header {
 margin: 0 3.6em 1.2em 0;
 border-bottom: 1px #606060 solid;
 border-left: 1px #606060 solid;
 border-right: 1px #606060 solid;
 padding: 3px 1.2em 5px 1.2em;
 background: #fffae8;
 text-align: left;
 -moz-border-radius : 0 0 12px 12px;
 vertical-align: middle;
}

.b_header h3 {
 font-size: 0.8em;
 margin: 0px;
 padding: 0px;
}

.b_header a:hover, .b_footer a:hover {
 font-weight: bold;
 padding-top: 1px;
 padding-bottom: 1px;
 padding-left: 20px;
 padding-right: 20px;
 border-top: 1px #606060 solid;
 border-bottom: 1px #606060 solid;
 background: #cccccc none 0% 0%;
 color: #ffffff;
 text-decoration: none;
 width: 100px;
 -moz-border-radius : 12px;
 font: normal 0.8em/1.4em Verdana, Arial, Helvetica, sans-serif, monospace;
}

sûrement une différence avec le cas hover

Bon je regarderais plus tard là je dois aller manger

[Flyounet]

J'ai consulté le site sous IE, j'ai même pendant quelques temps utilisé IE7 (que j'ai abandonné, car l'utilisation de content le fait planté). Avant de faire quelque chose sous IE, je voudrais déjà qu'il fonctionne correctement sur navigateur alternatif...

Je vais regarder la partie indiquée en revenant de manger, merci.

[Sylvain Trovalet]

au lieu de

 padding-top: 1px;
padding-bottom: 1px;
padding-left: 20px;
padding-right: 20px;

essaie

padding: 0px;

P.S. Mon ordre de test:

- mozilla firefox

- validateur W3C

- validateur WDG

- Internet Explorer

- Lynx

-etc...

[Flyounet]

Le résultat est identique, l'agrandissement se fait toujours.

De plus cela "change" la mise en forme des liens.

[Flyounet]

Houlà.

Si on passe le curseur sur un des liens des commentaires, le #Commentaires grandi.

Le #Billets ne peut grandir que si le #Commentaires est grandi.

Le fait de passé le curseur sur le lien "stats" (tout en bas) réduit l'ensemble.

Il y a vraiemnt quelque chose que je ne comprends pas là

[LaurentDenis]

L'origine du problème est une simple erreur d'utilisation du float dans:

#Conteneur{
 background : transparent;
 display: block;
 float: left;
 margin: 0 20em 0 0;
 padding : 0 0.4em 0 0.4em;
 text-align : left;
}

En effet, un flottant doit avoir une largeur explicite spécifiée par la propriété width (voir http://www.w3.org/TR/REC-CSS2/visuren.html#floats )

Faute de largeur spécifiée, il se trouve que FireFox/Mozilla applique (abusivement) le float en lui calculant une largeur à partir de sa marge droite... mais la modification de largeur du lien contenu dans un h3 remet en cause ce calcul. Le tout est remis en place quand tu survoles un lien du footer, le calcul étant à nouveau réactualisé.

En ne codant que pour Mozilla/FireFox, tu joues en fait sur un bug de celui-ci qui devrait ignorer le float.

Conclusion: développez vos CSS simultanément dans 2 navigateurs implémentant bien CSS, pour que les bugs de l'un soient immédiatement repérable d'après le comportement de l'autre. Le couple FireFox / Opera donne d'excellents résultats dans cette démarche.

Sinon, pour que le résultat soit moins catastrophique dans IE, la suppression des sélecteurs d'enfant (>) inutiles fera déjà beaucoup.

Modifié 7 Octobre 2004 par LaurentDenis

[LaurentDenis]

Ah... Je me demandais pourquoi Opera appliquait le float qu'il ne devrait pas appliquer. En fait, il ne l'applique pas, mais le fait que la colonne de droite soit elle-même flottante et dotée d'une largeur suffit, avec le jeu des marges, à aboutir à donner l'apparence de deux colonnes flottantes...

En fait, c'est l'utilisation des 2 float qui est à revoir, avec:

- un float:left + largeur pour le conteneur

- un flux + marge gauche pour la colonne de droite

Au passage, le display:block sur les float est inutile: un flottant devient automatiquement un élément bloc.

Modifié 7 Octobre 2004 par LaurentDenis

[Flyounet]

Merci je vais essayer avec cela.

Cependant, un question me taraude pourquoi n'ai-je pas ce problème sur cette page : http://design.flyou.net/blog.flyounet.net/index.htm qui utilise la même CSS ?

[LaurentDenis]

Mystère et boules de gommes

J'avoue renoncer à chercher, car pour tout te dire, je découvre à chaque nouveau regard une bizarrerie de plus dans ta CSS:

#Navigation {
 background: transparent;
 display: block;
 float: right;
 margin: 0.4em 0 0 0;
 padding : 0 0.4em 0 0.4em;
 position: absolute;
 right: 0;
 text-align: left;
 width: 20em;
}

Que veux-tu faire exactement ?

- un float ?

- une position:absolute ?

Les deux sont incompatibles. Ici, le float est annulé par la position absolue...

Il faut se souvenir que CSS n'a que 3 schémas de positionnement. Un élément ne peut être exclusivement que:

- soit en flux (ce qui inclut aussi la position relative lorsqu'elle est seule)

- soit en float (ce qui inclut aussi float+position relative)

- soit en positionnement absolu (ce qui comprend position:absolute et position:fixed)

Lorsqu'on se retrouve dans une de ces 3 erreurs classiques :

- mélanger les règles de 2 schémas (float+position:absolute)

- ou faire un float sans largeur spécifiée

- ou vouloir qu'un positionnement absolu réagisse à la dimension des autres éléments (en ne les chevauchant pas, le cas typique étant la colonne qui chevauche le pied de page)

... c'est qu'il y a une erreur quelque-part

[Flyounet]

Merci à Monsieur LaurentDenis, j'ai relu vos docs sur OpenWeb, et j'ai enfin corrigé mon problème en repartant de quasiment zéro.