Signet et header fixe

Version imprimable

21/10/2013, 07h51
stefane26

Signet et header fixe

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 :oops:
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
21/10/2013, 20h29
miss_socrates

Signet

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:

margin-top: 10px;

Sorry si je n'ai pas bien compris.
23/10/2013, 11h52
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 :

http://nsm08.casimages.com/img/2013/...8811664773.png

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
26/10/2013, 09h58
miss_socrates

Signet

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.
26/10/2013, 21h49
Candygirl

Citation:

Envoyé par miss_socrates

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

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

Citation:

Envoyé par miss_socrates

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.

Citation:

Envoyé par miss_socrates

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.

Citation:

Envoyé par miss_socrates

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.

Citation:

Envoyé par miss_socrates

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.
27/10/2013, 08h32
miss_socrates

Signet

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.

Citation:

Envoyé par Candygirl

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

Citation:

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:

Citation:

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

Citation:

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.

Citation:

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.
27/10/2013, 10h27
rodolphebrd

1 pièce(s) jointe(s)

Bonjour,

Le bouton "signet" ( qui, d'ailleurs, renvoie de façon peu intuitive vers le menu fixe ) lorsqu'il est cliqué génère bien le problème constaté et ce depuis n'importe quel navigateur.

miss_socrates : parle-t-on de la même chose ? ;)

Ce que souhaite stefane26 c'est que au clic le menu apparaisse au niveau du bord inférieur du header comme cela :

Pièce jointe 129553

Dans ce cas le lien vers la discussion que suggère Candygirl est tout à fait désigné. :ccool:
27/10/2013, 15h54
Candygirl

Citation:

Envoyé par 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.

Je n'ai pas remis en cause tout ton travail ou critiquer les conseils que tu donnes, mais j'ai relevé que, d'après moi, tu n'avais pas compris la problématique exposée d'où un HS de tes propos qui ne répondent pas à la question de base.

Par contre j'aurais dû souligner que tes remarques sur la validité du code étaient tout à fait pertinentes. :oops: Et je peux comprendre qu'elles aient pu perturber ta bonne compréhension du problème de base.

Citation:

Envoyé par miss_socrates

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.

Qu'est-ce qui te permet d'affirmer qu'il n'y ait pas déjà une base de donnée derrière ce site ?

Citation:

Envoyé par miss_socrates

Je ne vois pas en quoi un cms serait plus lourd à gérer, même sur mobile.

Je n'ai pas dit plus lourd à gérer mais juste "plus lourd". Ce que je voulais dire par-là, c'est qu'un CMS est conçu pour pouvoir répondre à tout type de problématique au niveau de l'agencement des données ou du design. Le code est donc adapté en conséquence, pour maintenir une certaine souplesse, mais sera rarement minimaliste et optimal en regard d'un code pour un cas ciblé.

Citation:

Envoyé par miss_socrates

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

A mon avis, c'est précisément la source de la problématique évoquée ;)

Citation:

Envoyé par stefane26

après avoir réglé mon premier problème de header fixe
[...]
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.