Aide générale Problème / aide en CSS menu Html
Bonsoir.
Depuis des heures, je cherche à poser un border-bottom: 2px #000; mais impossible à le faire apparaitre.
Je cherche en effet à mettre une bordure "noire" en bas du "UL" pour départager le menu du reste du site
Exemple de ce que j'aimerai (voir la bordure noire en bas du menu, en montage photo, non apparente en vrai) :
Les fichiers CSS avec le header.tpl ou se trouve le menu :
css-menu.zip
En vous remerciant .. ( Vous verrez que j'ai tenté de bosser dessus en créant un "ul3" dans le css Default.Advanced.css. Ce "ul3" et sous cette forme dans le header.tpl <ul class="ul3"> .... </ul> ) Edité par m-ickael Le 28/03/2014 à 23h49
Depuis des heures, je cherche à poser un border-bottom: 2px #000; mais impossible à le faire apparaitre.
Je cherche en effet à mettre une bordure "noire" en bas du "UL" pour départager le menu du reste du site
Exemple de ce que j'aimerai (voir la bordure noire en bas du menu, en montage photo, non apparente en vrai) :
Les fichiers CSS avec le header.tpl ou se trouve le menu :
css-menu.zip
En vous remerciant .. ( Vous verrez que j'ai tenté de bosser dessus en créant un "ul3" dans le css Default.Advanced.css. Ce "ul3" et sous cette forme dans le header.tpl <ul class="ul3"> .... </ul> ) Edité par m-ickael Le 28/03/2014 à 23h49
Bonsoir,
possible, mais dans ce cas aux ul qui font les grand cadre faut leur appliquer une class CSS spécifique, par exemple
Cette class perso je la placerai dans ce fichier : dropdown.linear.columnar.css
juste après
Cordialement, janus57 Edité par janus57 Le 29/03/2014 à 11h22
possible, mais dans ce cas aux ul qui font les grand cadre faut leur appliquer une class CSS spécifique, par exemple
Code CSS :
ul.bordure-bas { border-bottom: 2px solid #000000; }
Cette class perso je la placerai dans ce fichier : dropdown.linear.columnar.css
juste après
Code CSS :
ul.dropdown-columnar li.hover ul, ul.dropdown-columnar li:hover ul { visibility: visible !important; }
Cordialement, janus57 Edité par janus57 Le 29/03/2014 à 11h22
Bonjour Janus57.
Comment dire .. Rapide et efficace, c'est juste parfait.
Je profite de ce sujet pour suggérer un autre problème, qui, je pense, beaucoup plus compliqué (optionnel) :
Lorsque je suis sous mobile, le menu apparait très bien, mais lorsque je clique sur "documents" par exemple, rien ne s'ouvre dessous .. Comment y remédier? Edité par m-ickael Le 29/03/2014 à 08h13
Comment dire .. Rapide et efficace, c'est juste parfait.
Je profite de ce sujet pour suggérer un autre problème, qui, je pense, beaucoup plus compliqué (optionnel) :
Lorsque je suis sous mobile, le menu apparait très bien, mais lorsque je clique sur "documents" par exemple, rien ne s'ouvre dessous .. Comment y remédier? Edité par m-ickael Le 29/03/2014 à 08h13
m-ickael:
Bonjour,
alors là sa dépend des navigateur mobile, car chaque navigateur mobile a ces spécificités, et du coup le navigateur mobile va dépendre de l'OS du portable/tablette.
Car il existe principalement androïde/iOS,mais au niveai des portable il existe d'autre OS.
En tout cas normalement pour ce genre de menus sous mobile il faut maintenir sont doigt un peu plus longtemps sur le menus pour qu'il s'ouvre.
Sinon je viens de remarquer que dans le fichier "dropdown.columnar.css" y a un charset UTF-8, je conseil très fortement de le virer vu que tous les PHPBoost ne sont pas en UTF-8 mais en ISO-8859-1
Cordialement, janus57
Bonjour Janus57.
Comment dire .. Rapide et efficace, c'est juste parfait.
Je profite de ce sujet pour suggérer un autre problème, qui, je pense, beaucoup plus compliqué (optionnel) :
Lorsque je suis sous mobile, le menu apparait très bien, mais lorsque je clique sur "documents" par exemple, rien ne s'ouvre dessous .. Comment y remédier?
Comment dire .. Rapide et efficace, c'est juste parfait.
Je profite de ce sujet pour suggérer un autre problème, qui, je pense, beaucoup plus compliqué (optionnel) :
Lorsque je suis sous mobile, le menu apparait très bien, mais lorsque je clique sur "documents" par exemple, rien ne s'ouvre dessous .. Comment y remédier?
Bonjour,
alors là sa dépend des navigateur mobile, car chaque navigateur mobile a ces spécificités, et du coup le navigateur mobile va dépendre de l'OS du portable/tablette.
Car il existe principalement androïde/iOS,mais au niveai des portable il existe d'autre OS.
En tout cas normalement pour ce genre de menus sous mobile il faut maintenir sont doigt un peu plus longtemps sur le menus pour qu'il s'ouvre.
Sinon je viens de remarquer que dans le fichier "dropdown.columnar.css" y a un charset UTF-8, je conseil très fortement de le virer vu que tous les PHPBoost ne sont pas en UTF-8 mais en ISO-8859-1
Cordialement, janus57
Bonjour.
J'ai viré le utf8, merci
j'ai testé sur plusieurs mobiles (Android et ios) mais ce menu s'ouvre pas :/ j'ai testé de resté appuyé mais en vain. Pas de solution pour ce détail?
Merci en tout cas
J'ai viré le utf8, merci
j'ai testé sur plusieurs mobiles (Android et ios) mais ce menu s'ouvre pas :/ j'ai testé de resté appuyé mais en vain. Pas de solution pour ce détail?
Merci en tout cas
m-ickael:
Bonjour,
non malheureusement, car de mon côté le menus s'ouvre très bien (androïde 4.0.4 avec google chrome comme navigateur), de plus sachant que c'est un site "statique" au niveau du design (comme 99.9% des thème PHPBoost), ce genre de design n'est clairement pas adapté aux mobiles (surtout les "vieux" mobiles).
Edit: sous firefox mobile aussi le menu s'ouvre
Cordialement, janus57 Edité par janus57 Le 29/03/2014 à 12h06
Bonjour.
J'ai viré le utf8, merci
j'ai testé sur plusieurs mobiles (Android et ios) mais ce menu s'ouvre pas :/ j'ai testé de resté appuyé mais en vain. Pas de solution pour ce détail?
Merci en tout cas
J'ai viré le utf8, merci
j'ai testé sur plusieurs mobiles (Android et ios) mais ce menu s'ouvre pas :/ j'ai testé de resté appuyé mais en vain. Pas de solution pour ce détail?
Merci en tout cas
Bonjour,
non malheureusement, car de mon côté le menus s'ouvre très bien (androïde 4.0.4 avec google chrome comme navigateur), de plus sachant que c'est un site "statique" au niveau du design (comme 99.9% des thème PHPBoost), ce genre de design n'est clairement pas adapté aux mobiles (surtout les "vieux" mobiles).
Edit: sous firefox mobile aussi le menu s'ouvre
Cordialement, janus57 Edité par janus57 Le 29/03/2014 à 12h06
Merci, je vais regarder sous mercury alors (Firefox pour IOS).
J'ai pas un vieux mobile lol .. Je possède le dernier Iphone 5s .. Bizarre que ça ne s'ouvre pas. Je vérifie sur la tablette de ma femme.
Edit : Firefox Ios (Mercury Iphone) NON OK
Edit : Tablette nexus 7 de ma femme OK Edité par m-ickael Le 29/03/2014 à 12h40
J'ai pas un vieux mobile lol .. Je possède le dernier Iphone 5s .. Bizarre que ça ne s'ouvre pas. Je vérifie sur la tablette de ma femme.
Edit : Firefox Ios (Mercury Iphone) NON OK
Edit : Tablette nexus 7 de ma femme OK Edité par m-ickael Le 29/03/2014 à 12h40
m-ickael:
Bonjour,
Après une recherche rapide le navigateur de iOS est pas copain avec HTML5/CSS3, donc sachant que le menus utilise peut êtres des propriétés CSS3 il faut voir en détails.
Cordialement, janus57
Merci, je vais regarder sous mercury alors (Firefox pour IOS).
J'ai pas un vieux mobile lol .. Je possède le dernier Iphone 5s .. Bizarre que ça ne s'ouvre pas. Je vérifie sur la tablette de ma femme.
J'ai pas un vieux mobile lol .. Je possède le dernier Iphone 5s .. Bizarre que ça ne s'ouvre pas. Je vérifie sur la tablette de ma femme.
Bonjour,
Après une recherche rapide le navigateur de iOS est pas copain avec HTML5/CSS3, donc sachant que le menus utilise peut êtres des propriétés CSS3 il faut voir en détails.
Cordialement, janus57
Bonjour ..
Je cherche a approfondir pour que ce soit compatible mobile .. Que dois-je faire ou rajouter?
Sinon je suis obligé de changer de menu
Petite info :
Mon ancien menu était sous css3 il me semble (Swan confirmera si elle passe par ici). Cela fonctionnait très bien sur tous les navigateurs / mobiles / tablettes. Il doit donc y avoir quelque chose à faire :/
Merci beaucoup. Edité par m-ickael Le 30/03/2014 à 10h29
Je cherche a approfondir pour que ce soit compatible mobile .. Que dois-je faire ou rajouter?
Sinon je suis obligé de changer de menu
Petite info :
Mon ancien menu était sous css3 il me semble (Swan confirmera si elle passe par ici). Cela fonctionnait très bien sur tous les navigateurs / mobiles / tablettes. Il doit donc y avoir quelque chose à faire :/
Merci beaucoup. Edité par m-ickael Le 30/03/2014 à 10h29
Bonjour,
Normalement pour qu'un thème soit 100% compatible et optimisé pour mobile il faut qu'il soit "responsive", à l'heure actuelle aucun thème PHPBoost n'est "responsive" donc déjà en théorie aucun thème n'est optimisé mobile (y avait bien un thème V4 mobile mais il était uniquement pour mobile donc il ne compte pas).
Là le problème c'est que le menu ne passe pas uniquement sur iOS (à moins que l'on me dit qu'il ne passe pas sous androïde, en tout cas moiil passe sans problème), pourquoi, aucune idée, donc là c'est juste un problème spécifique à iOS ou peut êtes des vieille version androïde.
Là pour le coup je ne peu pas aider car je n'est pas de iOS ni d’androïde avec des outils de développeur web (d'ailleurs je me demande si cela existe...).
Est-ce que vous avez attendu que la page soit chargés à 100%,car moi oui, sinon effectivement le menus ne fonctionné pas tout le temps, il faut absolument attendre le chargement complet.
De plus voilà un petit rapport de performance : http://gtmetrix.com/reports/passion-truck.com/jGkgMN40
Cordialement, janus57
Normalement pour qu'un thème soit 100% compatible et optimisé pour mobile il faut qu'il soit "responsive", à l'heure actuelle aucun thème PHPBoost n'est "responsive" donc déjà en théorie aucun thème n'est optimisé mobile (y avait bien un thème V4 mobile mais il était uniquement pour mobile donc il ne compte pas).
Là le problème c'est que le menu ne passe pas uniquement sur iOS (à moins que l'on me dit qu'il ne passe pas sous androïde, en tout cas moiil passe sans problème), pourquoi, aucune idée, donc là c'est juste un problème spécifique à iOS ou peut êtes des vieille version androïde.
Là pour le coup je ne peu pas aider car je n'est pas de iOS ni d’androïde avec des outils de développeur web (d'ailleurs je me demande si cela existe...).
Est-ce que vous avez attendu que la page soit chargés à 100%,car moi oui, sinon effectivement le menus ne fonctionné pas tout le temps, il faut absolument attendre le chargement complet.
De plus voilà un petit rapport de performance : http://gtmetrix.com/reports/passion-truck.com/jGkgMN40
Cordialement, janus57
Bonjour Janus57.
Le GTmetrix est complètement idiot à mon goût, je perd la plupart du % sur :
Specify image dimensions
Leverage browser caching
Combine images using CSS sprites
En gros, je peux rien y faire, ou pas grand chose, à pars perdre les modèles .png lol.
bref, c'est pas le sujet.
Pour ce qui est de la version mobile, je m'en fiche que le site ne s'adapte pas, je vise QUE le menu qui peut servir à x personnes.
Pourtant l'ancien menu était sous css3, et je ne comprends vraiment pas pourquoi ce menu ne passe pas sous ios ..
As tu regardé le header.tpl? Le menu commence par <ul id=xx class=xx> Ne serai-ce pas ça qui bloque? Car sur la plupart des menus que j'ai consulté, j'ai pu voir que ça commencais par <nav id=xx class=xx> Un rapport?
Sous Ios, j'ai réussi deux / trois fois à ouvrir un onglet du menu en restant appuyer quelques millième de seconde .. Mais c'est très très dur à faire pour que ça marche, limite impossible.
Merci Janus57.
Le GTmetrix est complètement idiot à mon goût, je perd la plupart du % sur :
Specify image dimensions
Leverage browser caching
Combine images using CSS sprites
En gros, je peux rien y faire, ou pas grand chose, à pars perdre les modèles .png lol.
bref, c'est pas le sujet.
Pour ce qui est de la version mobile, je m'en fiche que le site ne s'adapte pas, je vise QUE le menu qui peut servir à x personnes.
Pourtant l'ancien menu était sous css3, et je ne comprends vraiment pas pourquoi ce menu ne passe pas sous ios ..
As tu regardé le header.tpl? Le menu commence par <ul id=xx class=xx> Ne serai-ce pas ça qui bloque? Car sur la plupart des menus que j'ai consulté, j'ai pu voir que ça commencais par <nav id=xx class=xx> Un rapport?
Sous Ios, j'ai réussi deux / trois fois à ouvrir un onglet du menu en restant appuyer quelques millième de seconde .. Mais c'est très très dur à faire pour que ça marche, limite impossible.
Merci Janus57.
Bonjour,
pour GTmetrix, la seule chose que tu peu faire est l'amélioration du cache navigateur (Leverage browser caching) + optimisation des images template.
Après ton hébergeur a désactivé le "Keep-Alive" ce qui dégrade pas mal les chargement sur les faibles connexions (ADSL bas niveau, EDGE, 3G).
Sinon pour le menu : <nav> = normes HTML5
<ul> = balises utilisé depuis HTML4 pour faire des menus
Donc non ce n'est pas les balises le problème, là pour moi c'est vraiment un problème de CSS pure ou alors tout simplement les iOS qui gère différemment la "hitbox" (ou zone d'action) des menus (ce qui est possible).
Pour les menus c'est peut être google qui a raison : http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpassion-truck.com%2Fsite%2F
Citation:
Dimensionner les éléments tactiles de manière appropriée
Il est possible que certains des liens et des boutons présents sur votre page soient trop petits pour qu'un utilisateur puisse appuyer dessus sur un écran tactile. Augmentez la taille de ces éléments tactiles afin de proposer une meilleure expérience utilisateur.
Voilà pourquoi un thème "responsive" OU un thème spéciale mobile est préférable, car le tactile et les petit bouton il s'aime pas (je sais j'ai le même problème de mon côté, mais je fait passer les support mobile en dernier à cause de toute ces contraintes).
Cordialement, janus57
pour GTmetrix, la seule chose que tu peu faire est l'amélioration du cache navigateur (Leverage browser caching) + optimisation des images template.
Après ton hébergeur a désactivé le "Keep-Alive" ce qui dégrade pas mal les chargement sur les faibles connexions (ADSL bas niveau, EDGE, 3G).
Sinon pour le menu : <nav> = normes HTML5
<ul> = balises utilisé depuis HTML4 pour faire des menus
Donc non ce n'est pas les balises le problème, là pour moi c'est vraiment un problème de CSS pure ou alors tout simplement les iOS qui gère différemment la "hitbox" (ou zone d'action) des menus (ce qui est possible).
Pour les menus c'est peut être google qui a raison : http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpassion-truck.com%2Fsite%2F
Citation:
Dimensionner les éléments tactiles de manière appropriée
Il est possible que certains des liens et des boutons présents sur votre page soient trop petits pour qu'un utilisateur puisse appuyer dessus sur un écran tactile. Augmentez la taille de ces éléments tactiles afin de proposer une meilleure expérience utilisateur.
Voilà pourquoi un thème "responsive" OU un thème spéciale mobile est préférable, car le tactile et les petit bouton il s'aime pas (je sais j'ai le même problème de mon côté, mais je fait passer les support mobile en dernier à cause de toute ces contraintes).
Cordialement, janus57
Merci pour ces infos ..
- Si j'écoute Google et que je dois supprimer ce qui se trouve dessous, mon site risque de ne plus fonctionner lol :
Pas fan ce de genre de site qui analyse très mal certaines choses.
- Concernant le cache .. Même si ce n'est pas sujet le sujet, comment améliorer la mise en cache? J'ai lu la page en Anglais, mais j'ai bien peur de ne pas comprendre.
- Concernant les petits boutons, l'ancien menu était plus petit, et je possède des boutons encore plus petit qui est pris en charge sur l'iphone et autres mobile, donc je ne pense pas que ce soit le problème.
- Reste le problème du CSS donc .. En quoi le CSS pourrait-il faire foirer l'ouverture du menu sur mobile? Que devrais-je chercher comme éventuelle erreur? On doit pouvoir modifier le CSS pour le rendre compatible quand même ..
Edité par
m-ickael
Le 30/03/2014 à 14h16
- Si j'écoute Google et que je dois supprimer ce qui se trouve dessous, mon site risque de ne plus fonctionner lol :
Code TEXT :
http://planet-truck.fr/…es/theme-2013/js/jquery.min.js?ver=3.2.1
http://planet-truck.fr/…ite/templates/theme-2013/js/fusion_js.js
http://planet-truck.fr/site/templates/theme-2013/js/cookie.js
http://planet-truck.fr/…/framework/js/scriptaculous/prototype.js
http://planet-truck.fr/…mework/js/scriptaculous/scriptaculous.js
http://planet-truck.fr/…el/framework/js/scriptaculous/builder.js
http://planet-truck.fr/…el/framework/js/scriptaculous/effects.js
http://planet-truck.fr/…l/framework/js/scriptaculous/dragdrop.js
http://planet-truck.fr/…l/framework/js/scriptaculous/controls.js
http://planet-truck.fr/…nel/framework/js/scriptaculous/slider.js
http://planet-truck.fr/…rnel/framework/js/scriptaculous/sound.js
http://planet-truck.fr/site/kernel/framework/js/global.jsPas fan ce de genre de site qui analyse très mal certaines choses.
- Concernant le cache .. Même si ce n'est pas sujet le sujet, comment améliorer la mise en cache? J'ai lu la page en Anglais, mais j'ai bien peur de ne pas comprendre.
- Concernant les petits boutons, l'ancien menu était plus petit, et je possède des boutons encore plus petit qui est pris en charge sur l'iphone et autres mobile, donc je ne pense pas que ce soit le problème.
- Reste le problème du CSS donc .. En quoi le CSS pourrait-il faire foirer l'ouverture du menu sur mobile? Que devrais-je chercher comme éventuelle erreur? On doit pouvoir modifier le CSS pour le rendre compatible quand même ..
Edité par
m-ickael
Le 30/03/2014 à 14h16
Bonjour,
il ne faut pas tout prendre au pied de la lettre ce sont juste des conseils...
Comme dit plus haut depuis un bon moment je ne peu pas aider car je ne dispose pas d'environnement de test sous iOS ou androïde avec les outils adaptés pour voir ce qui pose problème, de plus personnellement je ne cherche pas à rendre les thèmes compatible à 100% pour les mobiles donc toute les petite subtilités lié au mobiles je ne les connais pas.
Enfin pour le cache navigateur un simple (comme indiqué sur le site GTmetrix) :
Suffit, ceci est a intégrer dans le .htaccess via le panneau d'administration (tous mes sites en production ont ce code).
Cordialement, janus57
il ne faut pas tout prendre au pied de la lettre ce sont juste des conseils...
Comme dit plus haut depuis un bon moment je ne peu pas aider car je ne dispose pas d'environnement de test sous iOS ou androïde avec les outils adaptés pour voir ce qui pose problème, de plus personnellement je ne cherche pas à rendre les thèmes compatible à 100% pour les mobiles donc toute les petite subtilités lié au mobiles je ne les connais pas.
Enfin pour le cache navigateur un simple (comme indiqué sur le site GTmetrix) :
Code :
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresDefault "access plus 2 days"
FileETag none
</IfModule>
Suffit, ceci est a intégrer dans le .htaccess via le panneau d'administration (tous mes sites en production ont ce code).
Cordialement, janus57
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie