Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Problèmes avec un layout

5 réponses
Avatar
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>
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

5 réponses

Avatar
Olivier Masson
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 }


- 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.
Avatar
SAM
Le 12/24/09 10:54 AM, Olivier Masson a écrit :

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
Avatar
Olivier Miakinen
Le 24/12/2009 12:51, SAM a écrit :

[<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...
Avatar
SAM
Le 12/24/09 2:15 PM, Olivier Miakinen a écrit :
Le 24/12/2009 12:51, SAM a écrit :
[<http://assembleur.maurette.free.fr/>]





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
Avatar
Pierre Maurette
Olivier Masson, le 24/12/2009 a écrit :
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