Piwigo.org

Charlie · 2007-09-20 18:36:00

Grâce au Wiki et au forum, j'ai grandement avancé dans la construction de mon site (encore peu de photos).

Il me reste un problème à résoudre : Quand j'ouvre ma galerie, les menus à droite (accueil, spéciales, etc...) sont bien positionnés à quelques pixels du bord. Mais, dès que ma souris passe sur un lien quelconque, la boîte de menu se déplace et ce colle sur la marge, effet très peu agréable.
Remarque : Quand je suis dans les menus Administration (quelque soit la page) le phénomène est identique.

Quand je rafraîchis l'écran (F5), tout se remet en place.

Ma galerie : http://jmdehalle.free.fr
Version : 1.7

Si vous pouvez m'aider, merci !

Julatof · 2007-09-20 20:40:40

Salut,

Bizarre, chez moi, sur Firefox 2, comme sur IE6, ça ne fait pas ton problème.
Par contre il y en a d'autres.
Mais attention, je ne suis pas un expert. J'ai juste pris la source de ta page et regardé un peu.

Apparemment, dans ton yoga/index.tpl, tu as voulu commenter ce qui est ci-dessous, mais tu n'as pas refermé le commentaire, ce qui fait un petit bug seulement sous Firefox (il est tatillon)

<div id="content">
<div class="titrePage">
<ul class="categoryActions">
 <---------- cette ligne là, t'as pas refermée. Conséquence, un petit signe de commentaire ("-->") qui apparaît dans ta barre de titre accueil, juste après le bouton du calendrier, et surtout, c'est pas le même bouton du calendrier qui s'affiche. Sous IE, c'est "afficher à plat les machins", sous FF, c'est "afficher un calendrier par date d'ajout", donc ce que tu as tenté de commenter je crois.

Bref, tente déjà de refermer ce commentaire, ça arrangera ça.
Pour le reste, comme le bug se fait pas chez moi, je vois pas, faudrait vérifier dans tes templates. Apparemment, tu as aussi (comme moi) enlevé pas mal de choses dans la menubar, tu dois avoir une erreur de syntaxe. D'autant plus qu'en voyant la source, j'ai l'impression que tu as voulu laisser le quickconnect, mais il n'apparaît pas, ni sous FF, ni sous IE...

Enfin, dans ta page category, tu as encore des commentaires à moitié fait. Si j'ai bien compris, tu voulais mettre dans la barre du haut "plus vues, date d'ajout, etc.", ou ou les enlever, je ne sais pas, mais sous IE, il n'y a rien, juste ton bouton "afficher à plat", et sous FF, il y a juste écrit "plus vues, dates d'ajout, etc.", puis le même bouton calendrier que sur la page d'index...
Je parle de là :
<div id="content">
<div class="titrePage">
<ul class="categoryActions">

<!-- <li> </li>
<!-- <li>
<!-- Ordre de tri:
<!-- <select onchange="document.location = this.options[this.selectedIndex].value;">
<!-- <option value="index.php?/category/1&image_order=0" SELECTED>Par défaut</option>
<!-- <option value="index.php?/category/1&image_order=2" >Plus vues</option>
<!-- <option value="index.php?/category/1&image_order=3" >Date de création</option>
<!-- <option value="index.php?/category/1&image_order=4" >Date d'ajout</option>
<!-- <option value="index.php?/category/1&image_order=5" >Nom du fichier</option>
<!-- </select>
<!-- </li>

Dernière modification par Julatof (2007-09-20 20:59:19)

galain · 2007-09-20 21:59:07

Salut Charlie

Pour ton problème de menu instable, c'est typiquement le genre de choses qu'on règle en modifiant le HasLayout de certains éléments.

En l'occurrence tu peux doter #the_page de "layout" (avec width ou zoom ou...)
Par exemple :

Code:

#the_page {zoom: 1}

ps : tu aurais pu préciser directement quel est le navigateur touché par le problème.

Dernière modification par galain (2007-09-20 21:59:56)

Charlie · 2007-09-20 22:33:31

Je te remercie pour tes éléments de réponse. J'ai effectivement corrigé tous les commentaires que j'avais oublié de refermer. J'ai (essayé) vérifié la syntaxe des autres fichiers. Ca a l'air correct.
MAIS le phénomène précité (je cause bien !) continue.

Autres pistes ?

Merci

Dernière modification par Charlie (2007-09-20 22:34:16)

VDigital · 2007-09-20 22:47:02

galain a écrit:
Salut Charlie

Pour ton problème de menu instable, c'est typiquement le genre de choses qu'on règle en modifiant le HasLayout de certains éléments.

En l'occurrence tu peux doter #the_page de "layout" (avec width ou zoom ou...)
Par exemple :
Code:
#the_page {zoom: 1}
ps : tu aurais pu préciser directement quel est le navigateur touché par le problème.

zoom ???

Où as-tu trouvé cette directive?
Quel navigateur gère cette directive?
Toute référence externe sera la bienvenue.

Merci.
8-)

galain · 2007-09-21 12:39:37

zoom est une propriété Microsoft non standard :
http://msdn2.microsoft.com/en-us/library/ms535169.aspx

Elle est une des propriétés à conférer le HasLayout :
http://msdn2.microsoft.com/en-us/library/ms533776.aspx

zoom avec la valeur 1 n'a pas d'autres effets que de donner à un élément le "layout".
zoom:1 a donc l'avantage sur les autres propriétés ayant cette qualité d'être "neutre" (évidemment pas le cas de position:absolute|fixed, width, height, float, display:inline-block. Sauf pour writing-mode) et donc peut être utilisé plus facilement pour débogage.
C'est un peu la même chose que le height:1% sauf qu'il faut se méfier des effets de ce dernier depuis qu'IE 7 gère mieux l'overflow.
Cette propriété est supporté depuis IE 5.5

Tout ceci (zoom et haslayout) ne concernant que Microsoft Internet Explorer, il faut mieux apporter les corrections sur une feuille de style importée depuis un commentaire conditionnel (ça tombe bien, PhpWebGallery utilise déjà ce système).
Cela permet également de conserver un code valide.

L'article certainement le plus intéressant sur le HasLayout :
http://www.satzansatz.de/cssd/onhavinglayout.html

Charlie, tu as testé ma solution ou tu n'avais pas vu mon message ?

Dernière modification par galain (2007-09-21 12:56:54)

Charlie · 2007-09-21 14:22:17

Désolé, je n'avais pas eu ton message.

Galin a dit :
En l'occurrence tu peux doter #the_page de "layout" (avec width ou zoom ou...)
Par exemple :
Code:
#the_page {zoom: 1}

J'ai mis ce code dans layout.css.
J'ai testé : Bravo, ça fonctionne. Plus de menus qui bougent.

PS : je n'ai pas pensé à préciser mon navigateur, ça ne m'est même pas venu à l'idée. Ferai gaffe la prochaine fois.

VDigital · 2007-09-21 15:20:40

galain a écrit:
zoom est une propriété Microsoft non standard :
http://msdn2.microsoft.com/en-us/library/ms535169.aspx

Elle est une des propriétés à conférer le HasLayout :
http://msdn2.microsoft.com/en-us/library/ms533776.aspx

zoom avec la valeur 1 n'a pas d'autres effets que de donner à un élément le "layout".
zoom:1 a donc l'avantage sur les autres propriétés ayant cette qualité d'être "neutre" (évidemment pas le cas de position:absolute|fixed, width, height, float, display:inline-block. Sauf pour writing-mode) et donc peut être utilisé plus facilement pour débogage.
C'est un peu la même chose que le height:1% sauf qu'il faut se méfier des effets de ce dernier depuis qu'IE 7 gère mieux l'overflow.
Cette propriété est supporté depuis IE 5.5

Tout ceci (zoom et haslayout) ne concernant que Microsoft Internet Explorer, il faut mieux apporter les corrections sur une feuille de style importée depuis un commentaire conditionnel (ça tombe bien, PhpWebGallery utilise déjà ce système).
Cela permet également de conserver un code valide.

L'article certainement le plus intéressant sur le HasLayout :
http://www.satzansatz.de/cssd/onhavinglayout.html

$oft...
J'ai jeté un oeil, j'analyserai ce que cela pourrait apporter à notre galerie ultérieurement.
Par contre, je reste convaincu que le pb de Charlie devrait se résoudre autrement.
Pour preuve, nos galeries en 1.7 ne rencontrent pas de problème sur l'affichage du menu même sous IE5.5, IE6 ou IE7.

La technique des <!-- multiples et non fermés que j'ai préconisé à une époque et depuis longtemps révolue, en est très certainement la cause tout comme l'a très bien analysé Julatof.

8-)

galain · 2007-09-21 19:16:43

Non, les commentaires ne sont pas la cause. Voici une simplification de la page de Charlie où persiste toujours le problème :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#the_page {
  position:relative;
}

#content {
  margin-left: 20em;
  background: #d3d3d3;
}

#menubar {
  width:18em;
  margin-left:1em;
  float:left;
  display:inline;
  background: orange;
}

a:hover {
  border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div id="the_page">
  <div id="menubar">
     menu flottant
  </div>
  <div id="content">
    <a href="#">lien à survoler</a>
  </div>
</div>
</body>
</html>

Comme c'est indiqué dans le lien que j'ai donné plus haut, un conteneur non doté de layout en position:relative avec des enfants dotés de layout (comme des flottants) peut causer des irrégularités. Ici le bug est déclenché par la modification qu'entraîne le survol du lien.

VDigital a écrit:
Pour preuve, nos galeries en 1.7 ne rencontrent pas de problème

Apparemment il n'y a pas de position:relative appliqué au conteneur #the_page dans la version d'origine. Ça explique pourquoi il n'y a pas ce bug

Dernière modification par galain (2007-09-21 19:24:43)

VDigital · 2007-09-21 19:25:54

galain a écrit:
Apparemment il n'y a pas de position:relative appliqué au conteneur #the_page dans la version par défaut. Ça explique pourquoi il n'y a pas ce bug

Merci pour l'exemple: je regarde ça.

Maintenant, pourquoi avoir besoin de position:relative sur #the_page dans la version de Charlie?
N'est-ce pas là une solution plus standard qui éviterait le besoin d'une feuille de style importée depuis un commentaire conditionnel ce qui me parait assez compliqué pour un non expert en css?

8-)

VDigital · 2007-09-21 19:34:50

VDigital a écrit:
Merci pour l'exemple: je regarde ça.

Le "Lien à survoler" ne bronche pas d'un pixel avec mon IE6. Merci Bilou comme d'hab.
Je regarderai ça sur une seconde machine si j'y pense.

8-)

galain · 2007-09-21 19:35:03

Je ne sais pas ce qu'elle fait là cette position:relative. Si elle n'a pas d'utilité, il suffit effectivement de la supprimer, mais j'ai supposé que ça devait quand même servir à quelque chose...

Pour les feuilles de style appelées depuis un commentaire conditionnel, elles existent déjà :

Code:

<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="template/yoga/fix-ie5-ie6.css">
<![endif]-->
<!--[if gt IE 6]>
  <link rel="stylesheet" type="text/css" href="template/yoga/fix-ie7.css">
<![endif]-->

Le code serait donc à mettre dans "fix-ie7.css"

VDigital · 2007-09-21 19:39:48

galain a écrit:
Le code serait donc à mettre dans "fix-ie7.css"

Sauf que ce n'est pas un fichier "local" et que nous le redistribuons donc les modifications effectuées disparaitront entre une 1.7.0 et sa release corrective 1.7.1 (quand elle sortira).
8-)

Sur le fond: je ne vois pas pourquoi Charlie ne supprimerai pas le position:relative et on aura gagné du temps et de la compatibilité.

8-)

galain · 2007-09-21 19:40:20

VDigital a écrit:
Le "Lien à survoler" ne bronche pas d'un pixel avec mon IE6..

Dans ce cas le problème se présente uniquement avec IE7

Piwigo.org

Annonce

#1 2007-09-20 18:36:00

Menus instables

#2 2007-09-20 20:40:40

Re: Menus instables

#3 2007-09-20 21:59:07

Re: Menus instables

Code:

#4 2007-09-20 22:33:31

Re: Menus instables

#5 2007-09-20 22:47:02

Re: Menus instables

galain a écrit:

Code:

#6 2007-09-21 12:39:37

Re: Menus instables

#7 2007-09-21 14:22:17

Re: Menus instables

#8 2007-09-21 15:20:40

Re: Menus instables

galain a écrit:

#9 2007-09-21 19:16:43

Re: Menus instables

Code:

VDigital a écrit:

#10 2007-09-21 19:25:54

Re: Menus instables

galain a écrit:

#11 2007-09-21 19:34:50

Re: Menus instables

VDigital a écrit:

#12 2007-09-21 19:35:03

Re: Menus instables

Code:

#13 2007-09-21 19:39:48

Re: Menus instables

galain a écrit:

#14 2007-09-21 19:40:20

Re: Menus instables

VDigital a écrit:

Pied de page des forums