Problèmes avec un layout
Pierre Maurette
J'avais un layout qui fonctionnait "ￜ peu prￜs" et dont je me suis
rendu compte qu'il ï¿œtait devenu presque inmaintenable et que la
plaisianterie commenￜait ￜ me coￜter pas mal de temps. Pour info:
<URL:http://assembleur.maurette.free.fr/>
Lￜ, le menu latￜral est en javascript (pompￜ sur la toile). Il y avait
mï¿œme une version antï¿œrieure avec des angles arrondis pour tous les
navigateurs, en fait Opera et IE.
J'ai voulu nettoyer tout ￜa, j'en suis arrivￜ lￜ en virant le
javascript:
<URL:http://pierremaurette.dyndns.org/assembleur.maurette/index.php>
Dￜs que j'ai vu que ￜa merdait sous IE7, j'ai dￜcidￜ d'arrￜter et de
tout remettre ￜ plat. C'est ￜ dire de valider le layout pour un certain
nombre de navigateurs, avant de remonter vers le site rï¿œel. J'ai donc
fait une page minimale:
<URL:http://pierremaurette.dyndns.org/layout07/index.php>
Le code .css et .php est affichￜ sur la page (sans indentation), je
copie plus bas une version nettoyï¿œe d'un .css et d'un .html.
Ce que je sollicite c'est une approche, un site bien fait, que sais-je,
en tout cas pas nￜcessairement que vous fassiez le boulot ￜ ma place,
pour rï¿œsoudre les problï¿œmes rï¿œsiduels en gardant un code sain et
maintenable:
- Descendre la compatibilitￜ ￜ au moins IE6, voire IE5.5, ou proposer
un layout alternatif qui passerait "avec tout". J'aimerais sans
modifier le contenu des pages pouvoir au moins remonter en haut de page
ￜ partir de n'importe oￜ mￜme dans une trￜs longue page.
- Rï¿œsoudre impï¿œrativement un souci qui apparait dans Firefox
essentiellement: le clic dans la zone principale ￜ hauteur du menu
"fixￜ" ne doit pas ￜtre interceptￜ par les div de ce menu. Il faut
qu'on puisse cliquer sur des liens et des images .png qui ouvrent une
fenï¿œtre .swf, et qu'on puisse sï¿œlectionner du contenu pour
copier-coller.
- Presque dï¿œrisoire: que la div "menuside" puisse passer sous la div
"banner". Mais ce n'est vraiment pas important.
Merci pour vos suggestions.
Le CSS simplifiￜ:
* {
margin: 0;
padding: 0;
}
#outermenuside {
position: fixed;
display: block;
top: 115px;
width: 100%;
left:0;
}
#global, #innermenuside {
width: 925px;
margin: 0 auto;
text-align: left;
}
#global {
}
#menuside {
position:relative;
display: block;
left: -40px;
width: 100px;
}
#banner {
display: block;
height: 140px;
}
#page {
margin-left: 65px;
padding: 2px;
}
Le HTML simpliifiￜ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<div id="outermenuside">
<div id="innermenuside">
<div id="menuside">Le menu</div>
</div>
</div>
<div id="global">
<div id="banner">L'entï¿œte</div>
<div id="page">L'utile</div>
</div>
</body>
</html>
--
Pierre Maurette
Olivier Masson
> Ce que je sollicite c'est une approche, un site bien fait, que sais-je,
> en tout cas pas nￜcessairement que vous fassiez le boulot ￜ ma place,
> pour rï¿œsoudre les problï¿œmes rï¿œsiduels en gardant un code sain et
> maintenable:
> - Descendre la compatibilitￜ ￜ au moins IE6, voire IE5.5, ou proposer un
> layout alternatif qui passerait "avec tout". J'aimerais sans modifier le
> contenu des pages pouvoir au moins remonter en haut de page ￜ partir de
> n'importe oￜ mￜme dans une trￜs longue page.
Salut,
Descendre la compatibilitￜ ￜ IE6 et mￜme pire, IE5.5, ne signifiera
surement pas que ton code sera ￜpurￜ et parfait, bien au contraire
puisque plus tu descends dans les versions d'IE, plus tu as
d'imperfections cￜtￜ navigateur ￜ gￜrer.
Garder une compatibilitￜ IE6, pourquoi pas (moi j'ai arrￜtￜ) mais ce
sera toujours en parallï¿œle d'une version amï¿œliorï¿œe.
Donc feuille de style sￜparￜ, via commentaires conditionnels, pour IE6
d'une part, et IE7/8 d'autre part pour les petites problï¿œmes de
margin/padding.
Pas de position fixed pour IE6 dￜjￜ. Donc tu places en absolute avec un
top pour ne pas ï¿œtre sur ton header.
Avec un hack (pour pas s'emmerder avec un comm.cond.), ï¿œa donne ï¿œa :
#menu { position: absolute; top: 115px }
html>body #menu { position: fixed }
> - Rï¿œsoudre impï¿œrativement un souci qui apparait dans Firefox
> essentiellement: le clic dans la zone principale ￜ hauteur du menu
> "fixￜ" ne doit pas ￜtre interceptￜ par les div de ce menu. Il faut qu'on
> puisse cliquer sur des liens et des images .png qui ouvrent une fenï¿œtre
> .swf, et qu'on puisse sï¿œlectionner du contenu pour copier-coller.
Je n'ai pas ce problï¿œme.
Mais il faudrait ￜgalement donner la finalitￜ de tout ￜa car je ne
comprends par pourquoi tu mets un width: 100% alors que le menu est tout
ï¿œtroit.
Si tu as des problï¿œmes d'ordre d'affichage, tu mets essayer de mettre un
z-index ￜ 1 sur global (voire sur #global *) et ￜ 2 sur outermenuside
(voire sur #outermenuside *)
> - Presque dï¿œrisoire: que la div "menuside" puisse passer sous la div
> "banner". Mais ce n'est vraiment pas important.
Ah, faudra peut-ï¿œtre sortir banner de global alors si les z-index sont
aussi mal gￜrￜs que l'opacitￜ. Mais dans tous les cas, un z-index ￜ 3
pour #banner, que tu devras positionner alors en relative ou absolute.
SAM
>
> Pas de position fixed pour IE6 dￜjￜ. Donc tu places en absolute avec un
> top pour ne pas ï¿œtre sur ton header.
Ou bien j'ai loupￜ qque chose
ou bien je me mï¿œprends sur la faï¿œon dont IE6 devrait rï¿œagir
mais
le menu en absolute y reste bien en absolute
et ne scrolle pas avec la page (ne joue pas au fixed quoi)
> Avec un hack (pour pas s'emmerder avec un comm.cond.), ï¿œa donne ï¿œa :
> #menu { position: absolute; top: 115px }
> html>body #menu { position: fixed }
--
sm
Olivier Miakinen
>
> [<http://assembleur.maurette.free.fr/>]
> le menu en absolute y reste bien en absolute
> et ne scrolle pas avec la page (ne joue pas au fixed quoi)
Il fait tantï¿œt l'un tantï¿œt l'autre, selon la position de l'ascenseur
(grￜce ￜ <http://assembleur.maurette.free.fr/livres/commun/livres.js>
je suppose).
En fait il commence ￜ scroller avec la page, comme tout 'absolute' qui
se respecte, puis il devient 'fixed' aussitï¿œt qu'il se trouve tout en
haut...
SAM
Ha! non !
je ne faisait pas rￜfￜrence ￜ cette url
>> le menu en absolute y reste bien en absolute
>> et ne scrolle pas avec la page (ne joue pas au fixed quoi)
mais bien aux css d'Olivier Masson
> Il fait tantï¿œt l'un tantï¿œt l'autre, selon la position de l'ascenseur
> (grￜce ￜ <http://assembleur.maurette.free.fr/livres/commun/livres.js>
> je suppose).
supposant qu'alors l'artifice JS ï¿œtait exclus.
--
sm
Pierre Maurette
Bonjour,
J'avais un layout qui fonctionnait "ￜ peu prￜs" et dont je me suis
rendu compte qu'il ï¿œtait devenu presque inmaintenable et que la
plaisianterie commenￜait ￜ me coￜter pas mal de temps. Pour info:
<URL:http://assembleur.maurette.free.fr/>
Lￜ, le menu latￜral est en javascript (pompￜ sur la toile). Il y avait
mï¿œme une version antï¿œrieure avec des angles arrondis pour tous les
navigateurs, en fait Opera et IE.
J'ai voulu nettoyer tout ￜa, j'en suis arrivￜ lￜ en virant le
javascript:
<URL:http://pierremaurette.dyndns.org/assembleur.maurette/index.php>
Dￜs que j'ai vu que ￜa merdait sous IE7, j'ai dￜcidￜ d'arrￜter et de
tout remettre ￜ plat. C'est ￜ dire de valider le layout pour un certain
nombre de navigateurs, avant de remonter vers le site rï¿œel. J'ai donc
fait une page minimale:
<URL:http://pierremaurette.dyndns.org/layout07/index.php>
Bien qu'il y ait dￜjￜ des rￜponses, je corrige le message. Plutￜt que
laisser une machine en fontionnement, j'ai transfￜrￜ la /page minimale/
en:
<URL:http://assembleur.maurette.free.fr/test/>
dont je rappelle que c'est la seule sur laquelle porte les questions.
Les URL en http://pierremaurette.dyndns.org/... ne sont pas
permanentes.
Le code .css et .php est affichￜ sur la page (sans indentation), je
copie plus bas une version nettoyï¿œe d'un .css et d'un .html.
Ce que je sollicite c'est une approche, un site bien fait, que sais-je,
en tout cas pas nￜcessairement que vous fassiez le boulot ￜ ma place,
pour rï¿œsoudre les problï¿œmes rï¿œsiduels en gardant un code sain et
maintenable:
- Descendre la compatibilitￜ ￜ au moins IE6, voire IE5.5, ou proposer
un layout alternatif qui passerait "avec tout". J'aimerais sans
modifier le contenu des pages pouvoir au moins remonter en haut de page
ￜ partir de n'importe oￜ mￜme dans une trￜs longue page.
- Rï¿œsoudre impï¿œrativement un souci qui apparait dans Firefox
essentiellement: le clic dans la zone principale ￜ hauteur du menu
"fixￜ" ne doit pas ￜtre interceptￜ par les div de ce menu. Il faut
qu'on puisse cliquer sur des liens et des images .png qui ouvrent une
fenï¿œtre .swf, et qu'on puisse sï¿œlectionner du contenu pour
copier-coller.
- Presque dï¿œrisoire: que la div "menuside" puisse passer sous la div
"banner". Mais ce n'est vraiment pas important.
Merci pour vos suggestions.
Pierre Maurette
> Le 24/12/2009 08:53, Pierre Maurette a ï¿œcrit :
>
>> Ce que je sollicite c'est une approche, un site bien fait, que sais-je,
>> en tout cas pas nￜcessairement que vous fassiez le boulot ￜ ma place,
>> pour rï¿œsoudre les problï¿œmes rï¿œsiduels en gardant un code sain et
>> maintenable:
>> - Descendre la compatibilitￜ ￜ au moins IE6, voire IE5.5, ou proposer un
>> layout alternatif qui passerait "avec tout". J'aimerais sans modifier le
>> contenu des pages pouvoir au moins remonter en haut de page ￜ partir de
>> n'importe oￜ mￜme dans une trￜs longue page.
>
> Salut,
>
> Descendre la compatibilitￜ ￜ IE6 et mￜme pire, IE5.5, ne signifiera surement
> pas que ton code sera ￜpurￜ et parfait, bien au contraire puisque plus tu
> descends dans les versions d'IE, plus tu as d'imperfections cￜtￜ navigateur ￜ
> gï¿œrer.
> Garder une compatibilitￜ IE6, pourquoi pas (moi j'ai arrￜtￜ) mais ce sera
> toujours en parallï¿œle d'une version amï¿œliorï¿œe.
> Donc feuille de style sￜparￜ, via commentaires conditionnels, pour IE6 d'une
> part, et IE7/8 d'autre part pour les petites problï¿œmes de margin/padding.
>
> Pas de position fixed pour IE6 dￜjￜ. Donc tu places en absolute avec un top
> pour ne pas ï¿œtre sur ton header.
>
> Avec un hack (pour pas s'emmerder avec un comm.cond.), ï¿œa donne ï¿œa :
> #menu { position: absolute; top: 115px }
> html>body #menu { position: fixed }
OK, en fait j'avais utilisￜ l'inverse, ou presque inverse, avec * html.
Je pense que je vais simplement me replier sur une feuille style
"universitaire US" pour tous les navigateurs ￜ problￜme. En fait, le
seul qui me chagrine un peu, c'est IE6 ￜ cause de Windows 2000. Mais
Windows 2000 supporte jusqu'aux derniï¿œres versions de Firefox, alors...
>> - Rï¿œsoudre impï¿œrativement un souci qui apparait dans Firefox
>> essentiellement: le clic dans la zone principale ￜ hauteur du menu
>> "fixￜ" ne doit pas ￜtre interceptￜ par les div de ce menu. Il faut qu'on
>> puisse cliquer sur des liens et des images .png qui ouvrent une fenï¿œtre
>> .swf, et qu'on puisse sï¿œlectionner du contenu pour copier-coller.
>
> Je n'ai pas ce problï¿œme.
Je l'ai mal expliquￜ, alors. Je rappelle que ￜa ne concerne que:
<URL:http://pierremaurette.dyndns.org/layout07/index.php>
qui est devenu:
<URL:http://assembleur.maurette.free.fr/test/index.php>
On ne peut pas cliquer sur l'image .png ni sï¿œlectionner du texte en
face du menu latï¿œral, sur aucun navigateur sauf Opera et partiellement
IE.
> Mais il faudrait ￜgalement donner la finalitￜ de tout ￜa car je ne comprends
> par pourquoi tu mets un width: 100% alors que le menu est tout ï¿œtroit.
> Si tu as des problï¿œmes d'ordre d'affichage, tu mets essayer de mettre un
> z-index ￜ 1 sur global (voire sur #global *) et ￜ 2 sur outermenuside (voire
> sur #outermenuside *)
Je veux positionner #menuside en fixed en vertical, mais par rapport ￜ
#global en horizontal. Faire varier la largeur de la fenï¿œtre sur la
page de test minimale pour constater. De plus je ne suis pas contre une
certaine souplesse par rapport ￜ #global (largeur fixe comme ici,
marges fixes, etc.).
Donc je positionne un #outermenuside en fixed, width 100% (et left 0
pour IE7 !).
Ensuite je veux positionner #menuside par rapport ￜ #global, je vais
donc en appliquant le mￜmes rￜgles ￜ #global et ￜ #innermenuside faire
en sorte qu'horizontgalement #innermenuside soit ￜ #outermenuside ce
que #global est ￜ body. Il ne me reste plus qu'ￜ placer #menuside en
relatif dans #innermenuside.
>> - Presque dï¿œrisoire: que la div "menuside" puisse passer sous la div
>> "banner". Mais ce n'est vraiment pas important.
>
> Ah, faudra peut-ï¿œtre sortir banner de global alors si les z-index sont aussi
> mal gￜrￜs que l'opacitￜ. Mais dans tous les cas, un z-index ￜ 3 pour #banner,
> que tu devras positionner alors en relative ou absolute.
Je verrais ï¿œa plus tard. Je me doutais bien qu'il me faudrait un
masque, que ce soit #banner ou un autre, qui soit "positionnￜ" pour
utiliser z-index. Mais ￜa ressemble aussi ￜ une source d'emmerdes.
Merci ￜ vous, merci ￜ tous, en passez un bon Noￜl,
--
Pierre Maurette