Bonjour.
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.
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.
J'ai fait une maquette simplifiée (un seul fichier HTML):
http://cjoint.com/?iExIMk2Cam (valide 21 jours).
Bonjour.
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.
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.
J'ai fait une maquette simplifiée (un seul fichier HTML):
http://cjoint.com/?iExIMk2Cam (valide 21 jours).
Bonjour.
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.
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.
J'ai fait une maquette simplifiée (un seul fichier HTML):
http://cjoint.com/?iExIMk2Cam (valide 21 jours).
ne reste qu'à régler les détails pour IE
ne reste qu'à régler les détails pour IE
ne reste qu'à régler les détails pour IE
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.
>
> 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.
>
> 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 !)
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 -->
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.
>
> 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.
>
> 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 !)
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 -->
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.
>
> 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.
>
> 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 !)
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 -->
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 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 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.
Bonjour.
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'é.
Bonjour.
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'é.
Bonjour.
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'é.
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 ?
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 ?
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 ?
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.
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.
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.
Patrick 'Zener' Brunet a écrit :
> [...]
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$
Patrick 'Zener' Brunet a écrit :
> [...]
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$
Patrick 'Zener' Brunet a écrit :
> [...]
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$
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...
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...
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...
Patrick 'Zener' Brunet wrote:
> 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...
L'opposition entre la vue "page" de CSS et les modules indépendants
constituant une page de la majorité des cms ou applications en ligne est
une vraie épine à traiter pour les développeurs. Conserver une logique
qui va bien au "niveau page" n'est vraiment pas toujours simple...
Mais il existe déjà des moteurs de templates qui permettent de gérer
cette contradiction. C'est le cas de Wicket par exemple, où une page est
faite de différents composants, chacun étant dépendants, et le moteur
reconstituant le tout à la fin. On peut par exemple avoir une quinzaine
de form avec chacun leurs propriétés (contrôle de saisie, ...) alors que
ce qui sera renvoyé au client ne contiendra bien qu'un form HTML.
Patrick 'Zener' Brunet wrote:
> 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...
L'opposition entre la vue "page" de CSS et les modules indépendants
constituant une page de la majorité des cms ou applications en ligne est
une vraie épine à traiter pour les développeurs. Conserver une logique
qui va bien au "niveau page" n'est vraiment pas toujours simple...
Mais il existe déjà des moteurs de templates qui permettent de gérer
cette contradiction. C'est le cas de Wicket par exemple, où une page est
faite de différents composants, chacun étant dépendants, et le moteur
reconstituant le tout à la fin. On peut par exemple avoir une quinzaine
de form avec chacun leurs propriétés (contrôle de saisie, ...) alors que
ce qui sera renvoyé au client ne contiendra bien qu'un form HTML.
Patrick 'Zener' Brunet wrote:
> 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...
L'opposition entre la vue "page" de CSS et les modules indépendants
constituant une page de la majorité des cms ou applications en ligne est
une vraie épine à traiter pour les développeurs. Conserver une logique
qui va bien au "niveau page" n'est vraiment pas toujours simple...
Mais il existe déjà des moteurs de templates qui permettent de gérer
cette contradiction. C'est le cas de Wicket par exemple, où une page est
faite de différents composants, chacun étant dépendants, et le moteur
reconstituant le tout à la fin. On peut par exemple avoir une quinzaine
de form avec chacun leurs propriétés (contrôle de saisie, ...) alors que
ce qui sera renvoyé au client ne contiendra bien qu'un form HTML.