Sujet: Re: [CSS/float] un truc qui marche sur IE mais pas sur Firefox
De: use.link.in.signature (l' arobase) ddress.invalid (Patrick 'Zener' Brunet)
Groupes: fr.comp.infosystemes.www.auteurs
Organisation: Posted through ALPHANET (
http://www.alphanet.ch/)
Date: 31. Aug 2008, 07:47:24
Bonjour SAM.
"SAM" <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit dans le message
de news: 48b9cab4$0$886$ba4acef3@news.orange.fr...
Patrick 'Zener' Brunet a écrit :
Je me heurte à un problème en faisant ce pourquoi CSS est
normalement conçu: faire une nouvelle charte graphique pour
un site sans adapter le contenu HTML.
Je dis bien: sans avoir à modifier le contenu HTML.
En l'occurence, la structure de ce contenu est imposée, et
correspond à un ordre de lecture logique en mode pur texte,
à l'attention des lecteurs vocaux pour déficients visuels.
Donc ça ça impose l'ordre des blocs fonctionnels, mais il y a une seconde
raison pour ne pas même rajouter de conteneurs, voir plus bas.
J'ai fait une maquette simplifiée (un seul fichier HTML):
http://cjoint.com/?iExIMk2Cam (valide 21 jours).
Mon Safari fait comme Fx (IE nous blague encore sur ce coup !)
Certes, je voyais mal IE servir de référence :o)
OK pour FX.3 et Safari.3 avec :
#menu { float: left; }
<div id="outter">
<div id="menu">
<div id="menu1">Menu 1</div>
<div id="menu2">Menu 2</div>
</div><!-- menu -->
<div id="inner">
<div id="innerfloat">Inner float</div>
<p>Tagada</p>
(etc ...)
</div><!-- outer -->
Certes, mais pour ça il faut "deviner" à l'avance qu'un jour on aura besoin
de float'er ensemble les deux menus, et prévoir un sous-conteneur pour ce
cas. Déjà le DIV "inner" ne devrait pas exister: c'est un pur emballage du
"contenu hors navigation", qui fait double emploi avec le principe
d'extraction des éléments de navigation.
Dans une autre charte graphique (qui est celle de mon site perso), seul le
menu1 est float'é, et le menu2 (sommaire de la page) apparaît comme une
section h2+contenu supplémentaire en tête de "inner float".
Je pourrais aussi envisager une autre charte où menu1 serait float'é à
gauche et menu2 à droite, le "inner float" coulant librement au milieu, tout
ça avec le même contenu (c'est le but de CSS, non ?).
Le pauvre DIV "menu" va se retrouver le Q entre deux chaises là...
Bref, à l'époque des Joomla et autres Yoplaboom dans lesquels on professe le
principe de "modules" fonctionnels qui sont simplement enfilés pour former
le flot, permettant ensuite de les disposer librement par CSS indépendante,
j'ai soudain un doute:
- Est-ce que ça nous condamne à tout faire par position absolue (donc aussi
avec des dimensions estimées à partir du strlen du contenu) ?
J'ai repéré une page bien pratique:
http://tinyurl.com/5wxvfb pointant vers:
http://ddata.over-blog.com/xxxyyy/0/38/68/97/CSS-mise-en-page/demo-float.htm
l
En jouant avec, bien que je ne puisse pas reproduire exactement le même cas,
il semble bien que le principe soit que tout ce qui n'est pas clear'é
remonte le plus haut possible dans son container.
Comme le font mes P...
Mais pas un float apparemment :-@
Si c'est vraiment nécessaire, je devrai rajouter une nouvelle techno dans
laquelle tout le layout est appelé, composant par composant, par un
maître-script PHP fourni dans le répertoire de la charte graphique.
Ca me permettrait effectivement d'injecter des conteneurs sur mesure pour
"aider" la CSS. Mais ça constituerait aussi un constat d'échec pour la
philosophie de CSS...
Bref je dois trouver un workaround en pur CSS.
Par exemple un truc pour empiler mes deux menus:
- sans utiliser de clear pour le second,
- qui soit fiable en design élastique (ça ne doit pas se juxtaposer quand la
page est plus large),
- sans positionner le "inner" en absolu, car c'est lui qui dimensionne le
"outter" verticalement, et la hauteur des menus est imprévisible.
Pas simple, pourtant ça avait l'air si basique...
Merci pour ton soutien :)
--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur
http://zener131.eu/ContactMe