Discussion :

[stefane26]

Bonjour
Je suis en train de réaliser un site extensible pour affiche sur mobile, après avoir réglé mon premier problème de header fixe, son dimensionnement et le le dimensionnement du début du site voir : http://www.developpez.net/forums/d13...e-header-fixe/, j'ai un nouveau soucis
J'ai crée un bouton sur mon header afin d'afficher directement le menu (situé en bas du site) à l'aide d'un signet.
Mais la première ligne du menu se "cache" sous le header.
Comment indiquer que le signet ne doit pas s'afficher en haut de page mais quelques millimètre en dessous.
Voir le site ci-dessous
http://www.meteo-montelo.fr/mobile

Merci
Stéphane

[miss_socrates]

Je ne visualise pas bien le souci, surtout s'il y a un menu apparemment caché en dessous (si j'ai bien compris).
Il faudrait nous mettre une liste des éléments qui doivent apparaitre et leur ordre de haut en bas.
Si ce menu doit être décalé (vers le bas je suppose), il suffit de placer une marge au-dessus du type:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

margin-top: 10px;

Sorry si je n'ai pas bien compris.

[stefane26]

Bonjour et merci pour l'aide
Mon explication est en effet très confuse, je joints l'image ci-dessous qui sera probablement plus parlante :



En fait, j'ai déjà un margin-top afin que le début de la page s'affiche en dessous du header, mais lorsque j’atteins le signet, le margin-top n'a plus d'action

Stéphane

[miss_socrates]

Merci, j'ai compris où était le problème. Pas mal de choses à dire vu qu'il y a pas mal de dysfonctionnements :

1) Le problème d'affichage ne concerne que Internet explorer, il n'y a pas de souci d'affichage sur Firefox ni sur Opera, ni sur Chrome. Et encore, le problème se pose sur smartphone et Iphone mais pas sur la Samsung Galaxy Tab ni sur Ipad ni sur Kindle portrait.
Vérifier néanmoins si le tag du signet est bien défini sur Accueil et non sur Climatologie.

2) Le site est assez peu fourni (une grande page juste pour 2 mots par ligne) ce n'est pas très esthétique (je veux dire qu'on a l'impression de voir une page (presque) vide.

3) Je n'ai pas bien compris pourquoi mettre un signet, ce qui n'est pas une pratique très courante sur les sites ni pourquoi mettre le menu en bas de page, alors qu'il serait à mon avis plus judicieux de le mettre en haut en dessous du header, entre le header et le corps de page, non pas verticalement mais horizontalement. L'internaute verrait directement les options possibles du menu et pourrait cliquer facilement dessus et cela étofferait la 1e page.

4) Gros souci à mon sens: selon les standards, il y a 58 erreurs de html et de mise en page : ceci pourrait aussi expliquer les différences d'affichages sur les différents navigateurs. En outre, il manque des indications fondamentales comme le type d'encodage et le type de caractères. On peut comprendre dès lors que certains navigateurs peuvent être 'perturbés' pour l'affichage.
En outre, gros soucis de mise en page: éléments non alignés etc.
Bref une page au graphisme peu attirant.

4) Pourquoi ne pas utiliser des modèles de site qui permettront de gérer facilement les données à mettre à jour comme un traitement de textes ou une base de données, par ex. avec un cms? Il faut aussi penser la structure du site en se demandant ce que les internautes pourront voir, dans quel ordre et quelle importance et quelles données doivent être mises à jour, quand? combien de fois? lesquelles? etc.

[Candygirl]

Merci, j'ai compris où était le problème.

Je n'en ai pas vraiment l'impression au vu de ta réponse

1) Le problème d'affichage ne concerne que Internet explorer, il n'y a pas de souci d'affichage sur Firefox ni sur Opera, ni sur Chrome.

Le problème concerne n'importe quel navigateur dès le moment où la hauteur est assez restreinte pour le faire apparaître.

2) Le site est assez peu fourni (une grande page juste pour 2 mots par ligne) ce n'est pas très esthétique (je veux dire qu'on a l'impression de voir une page (presque) vide.

Il s'agit d'une version mobile.

3) Je n'ai pas bien compris pourquoi mettre un signet, ce qui n'est pas une pratique très courante sur les sites ni pourquoi mettre le menu en bas de page, alors qu'il serait à mon avis plus judicieux de le mettre en haut en dessous du header

C'est une pratique courante à l'attention des mobiles. Après, on peut débattre si elle est judicieuse ou non.

4) Pourquoi ne pas utiliser des modèles de site qui permettront de gérer facilement les données à mettre à jour comme un traitement de textes ou une base de données, par ex. avec un cms? [...]

Un traitement de texte ? Un cms sera toujours plus lourd que du sur-mesure bien fait. Vu l'application ciblée présentée je trouve tes propos HS.

@stefane26

Laisser un élément en fixed sur un écran restreint est assez discutable (mais peut être défendable )puisqu'il "gaspille" la rare place à disposition.

Pour ton problème tu peux regarder sur cette discussion, où j'avais proposé une solution sans JS à l'aide d'un pseudo-élément :before associé à un margin négatif.

[miss_socrates]

Avant de critiquer, il faudrait peut-être vérifier, j'ai quand même passé pas mal de temps (plus d'1/2h) à tout tester et rédiger.

Le problème concerne n'importe quel navigateur dès le moment où la hauteur est assez restreinte pour le faire apparaître.

C'est FAUX!
j'ai testé sur tous les supports fixes (PC portables) et mobiles que j'ai mentionné: "Le problème d'affichage ne concerne que Internet explorer, il n'y a pas de souci d'affichage sur Firefox ni sur Opera, ni sur Chrome. Et encore, le problème se pose sur smartphone et Iphone mais pas sur la Samsung Galaxy Tab ni sur Ipad ni sur Kindle portrait." (j'ajoute qu'il n'y a pas de problème sur ces supports MEME AVEC INTERNET EXPLORER. Donc ce n'est pas vrai que c'est valable pour tous navigateurs.
De plus, il ne s'agit pas du tout d'un problème de hauteur restreinte comme tu le dis puisque le problème n'apparait pas sur tous les appareils et de plus, le menu étant vertical, il y aurait encore moyen de faire défiler l'écran vers le bas pour afficher la suite, or ce qui ne s'affiche pas ce NE sont PAS les derniers éléments du menu mais les 2 PREMIERS éléments du menu EN HAUT DE LA PAGE.
Il s'agit d'un problème sur Internet Explorer uniquement qui n'affiche le menu qu' à partir du 3e élément de menu et qui n'affiche pas les 2 premiers. Le problème vient (ou peut provenir) d'un mauvais encodage qui peut amener des problèmes d'affichage comme c'est aussi le cas pour les différentes données (paragraphes et h1 ou h2) non alignées et comme le prouvent les nombreuses erreurs d'encodage.

Pour le signet

C'est une pratique courante à l'attention des mobiles. Après, on peut débattre si elle est judicieuse ou non.

Normalement, le bouton remplace le menu trop grand et/ou permet d'afficher le menu (souvent verticalement) en ENTIER mais pas par signet. Mais je n'ai pas compris pourquoi un signet renvoie au 3e élément du menu ni pourquoi placer le menu en bas de page plutôt qu'en haut mais c'est vrai que cela peut se comprendre selon la structure du site. C'est pour cela que j'ai dit:

Il faut aussi penser la structure du site en se demandant ce que les internautes pourront voir, dans quel ordre et quelle importance

Un cms sera toujours plus lourd que du sur-mesure bien fait. Vu l'application ciblée présentée je trouve tes propos HS.

Puisqu'il s'agit de données climatologiques, il me semble préférable d'utiliser une base de données, qu'elle soit insérée dans un cms ou autre formule. Je ne vois pas en quoi un cms serait plus lourd à gérer, même sur mobile. D'autant que les templates de cms sont quasi d'office accompagnés d'une version responsive, ce qui prouve leur généralisation sur portables.
Mais libre à Stefane26 de juger ce qu'il préfère.

Laisser un élément en fixed sur un écran restreint est assez discutable (mais peut être défendable

Normal si le header doit rester en haut et visible. Mais ce n'est pas cela qui pose problème à mon avis.