Bonsoir.
"SAM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 48bc6fe6$0$863$ba4acef3@news.orange.fr...
Patrick 'Zener' Brunet a écrit :
[...]
Bon ! outre que Fx est d'accord avec Safari,
Pour citer Maître Coluche:
"C'est pas parce qu'ils sont nombreux à avoir tort qu'ils ont forcément
raison".
Non mais vous avez-vu de quoi ça a l'air ce truc ? C'est inepte...
la soluce non testée IE, mais déjà donnée au cours
de l'année, est :
overflow: auto;
pour le div 'inner'
Démos :
<http://cjoint.com/?jcaI2AbK1F>
<http://cjoint.com/?jcaLHSaSF1>
(code-source du cadre bas)
Tu y vas fort là !
En général, est-ce que tu es capable de prévoir la hauteur de tes menus et
surtout celle du contenu de la page ?
En fait, si on connaisait les dimensions des blocs, il y aurit encore plus
simple:
- on fait tout en position:absolute et plus de problème...
Alors en fait j'ai fait l'effort d'essayer en vraie grandeur ta première
solution (avec le DIV englobant les deux menus).
Remarque 1:
========
Pour les raisons que j'ai évoquées plus haut, ça nécessite a priori
d'injecter du contenu dépendant de la charte graphique.
De toute manière, pour faire des coins "Nifty Corners" ou autres, on est pas
mal obligés, a fortiori du fait du mauvais support des sélecteurs :before et
:after et compagnie...
Donc j'avais déjà sauté le pas du maître-script PHP fourni par la charte
graphique et qui assemble les blocs principaux en se réservant le droit d'y
insérer des containers, mais bon ce n'est tout de même pas une recompilation
ligne à ligne...
Remarque 2:
========
En fait cette histoire de container pose d'autres problèmes. J'avais déjÃ
évoqué les chartes alternatives mais ce point est couvert par la remarque 1.
Là je pense plutôt à des éléments qui n'apparaissent pas sur la maquette
mais qui vont aussi se retrouver piégés dans ce container parce que dans le
flot logique, ils viennent entre le menu1 (menu principal du site) et le
menu2 (sommaire de la page).
Il s'agit notamment du titre h1 de la page, mais il peut aussi y avoir des
choses telles que les FriendLogos de la page d'accueil de mon site perso...
Pour bien comprendre pourquoi ils doivent être là , lire la page sans CSS (en
s'imaginant qu'on en découvre la logique linéairement du fait d'une
transcription vocale)...
S'ils sont coincés dans le float:left, ça devient graphiquement
impraticable.
Ma solution:
========
J'ai refait une maquette plus élaborée qui met ces détails en évidence:
http://cjoint.com/?jctCAKOdpV (valide 21 jours)
Et donc elle montre l'astuce plus puissante que j'ai trouvée:
En fait je prévois d'insérer (grâce au maître-script) un DIV vide qui va se
retrouver dans le flot au-dessus du second menu (vert) et qui se fait
oublier...
Ensuite si j'en ai besoin dans une page, dans la variante CSS de cette page
je le dimensionne et je le float'e en transparent pour réserver la place
dans le texte, et il ne me reste plus qu'Ã positionner le faux-float
"innerfloat" par dessus en absolu. Visuellement l'illusion est parfaite.
Dans l'exemple il est float'é à gauche, mais à droite c'est tout aussi
facile.
Et l'ensemble reste totalement élastique et sans contrainte de hauteurs
fixes (normalement les menus sont dimensionnés par leur contenu).
Seuls défauts résiduels:
===============
1) Si ce float est plus haut que le menu principal (très peu probable),
alors (dans le cas en plus où il est à gauche) c'est lui qui chasse un peu
le second menu par le bas.
=> Si les couleurs sont choisies adroitement, c'est très supportable.
2) Comme vous le voyez, IE nous fait une petite crasse avec la référence de
la coordonnée left du "innerfloat", il faut donc une règle de correction,
mais ça on a l'habitude :-)
Si cet overflow gène IE (normalement : non) :
- le mettre à hidden
ou
- utiliser les commentaires conditionnels de M$
En fait j'ai trouvé beaucoup plus puissant: rajouter des valeurs d'attribut
class au BODY lors de la génération de la page en PHP, ce qui permet de
séléctionner des règles CSS spécifiques...
Ben voilà , si ça peut vous dépanner...
--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur
http://zener131.eu/ContactMe
