Le Sun, 31 Aug 2008 00:01:38 +0200, Patrick 'Zener' Brunet a écritÂ***:

> Bonjour.
Hello
> Donc le but est d'empiler deux menus (en cyan et vert), de manière
> fiable dans un design élastique (donc pas de position absolue), tout en
> conservant ensuite une logique de placement naturelle dans le reste du
> contenu (partie jaune).
>
> Ce contenu est formé de plusieurs P, et en premier il y a une image (ici
> un div rouge) qui doit être float'é.
>
Un essai avec :

#inner
{
/*clear: none; */
background-color: yellow;
margin-left : 40ex ;/* IMPORTANT largeur des menus 1 et 2*/
}
et

#innerfloat
{
background-color: red;

position : relative ; /* relative au conteneur jaune */
top : 1ex ;

/* OU alors
display : in-line ;*/

width: 15ex;
height: 15ex;
margin: 2ex;
}

remplirait-il les conditions ?



--
mcc

Bonsoir.

"mcc" <mcc***invalid.fr> a écrit dans le message de news:
6eqqo5xs93.ln2***basilic.kerbernes.fr...
> Le Sun, 31 Aug 2008 00:01:38 +0200, Patrick 'Zener' Brunet a écrit :

> > Donc le but est d'empiler deux menus (en cyan et vert), de manière
> > fiable dans un design élastique (donc pas de position absolue), tout en
> > conservant ensuite une logique de placement naturelle dans le reste du
> > contenu (partie jaune).
> >
> > Ce contenu est formé de plusieurs P, et en premier il y a une image
> > (ici un div rouge) qui doit être float'é.
> >
> Un essai avec :
>
> #inner
> {
> /*clear: none; */
> background-color: yellow;
> margin-left : 40ex ;/* IMPORTANT largeur des menus 1 et 2*/
> }
> et
>
> #innerfloat
> {
> background-color: red;
>
> position : relative ; /* relative au conteneur jaune */
> top : 1ex ;
>
> /* OU alors
> display : in-line ;*/
>
> width: 15ex;
> height: 15ex;
> margin: 2ex;
> }
>
> remplirait-il les conditions ?
>

Merci. Pas mal essayé...

Donc avec la première solution:
- le "innerfloat" se place lÃ*** où on veut le mettre,
- par contre hélas les P ne coulent pas autour comme avec un float.

Avec display: inline:
- lÃ*** les dimensions sont ignorées, c'est pas terrible
(pour une image sans légende peut-être, mais bofff).

J'ai essayé avec display: inline-block (sans position):
- lÃ*** les dimensions sont prises en compte,
- mais les P restent en dessous, même en leur appliquant aussi cette option.
- ou alors il faudra estimer le nombre de P Ã*** décaler pour simuler un float,
bêêêrk !

De plus, dans la mesure où la partie spéciale du layout concerne les deux
menus, j'aimerais bien ne pas propager cette contrainte de design dans tout
le contenu du "inner" et pour toutes les pages.

Je pense que la seule solution de contournement qui soit raisonnablement
pratiquable est de trouver un moyen de remplacer le clear:left du "menu2".

Une position relative pourrait suffire pour ça, si je pouvais seulement
prévoir la hauteur du "menu1", mais elle dépend de son contenu qui varie
dynamiquement (expansion/condensation de noeuds).

Si je pouvais comprendre par quelle interprétation IE arrive Ã*** produire le
bon résultat, je pourrais essayer de la recréer en CSS valide...
A priori c'est pas une histoire de "HasLayout": j'ai tenté de rajouter du
border Ã*** tous les DIV et le "innerfloat" reste en place (même si les P vont
se cacher)...

Que c'est nuuuuuuuul ! :-(

--
Cordialement.
--
* Patrick BRUNET www.ipzb.fr
* E-mail: lien sur http://zener131.eu/ContactMe

Patrick 'Zener' Brunet a écrit :
>
> Donc avec la première solution:
> - le "innerfloat" se place lÃ*** où on veut le mettre,
> - par contre hélas les P ne coulent pas autour comme avec un float.
>
> Avec display: inline:
> - lÃ*** les dimensions sont ignorées, c'est pas terrible
> (pour une image sans légende peut-être, mais bofff).
>
> J'ai essayé avec display: inline-block (sans position):
> - lÃ*** les dimensions sont prises en compte,
> - mais les P restent en dessous, même en leur appliquant aussi cette option.

Bon ! outre que Fx est d'accord avec Safari,
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)

Si cet overflow gène IE (normalement : non) :
- le mettre Ã*** hidden
ou
- utiliser les commentaires conditionnels de M$

--
sm

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