[CSS] Problème avec les onglets
sandykoala
-
sandykoala -
sandykoala -
Cette discussion est dans la continuité de celle-ci:
ajustement automatique taille de la page#0
J'essai de créer des onglets dasn ce genre: http://www.grainedekeupon.fr/ccm/css_menu_onglet.html
Le problème c'est que ma page fonctionne en local mais pas en ligne (www.ateliercalc.com/onglets2.html) J'aimerai que les onglets soient gris et qu'ils deviennent rose au passage de la souris. Une fois en ligne, les images ne s'affichent plus...
ajustement automatique taille de la page#0
J'essai de créer des onglets dasn ce genre: http://www.grainedekeupon.fr/ccm/css_menu_onglet.html
Le problème c'est que ma page fonctionne en local mais pas en ligne (www.ateliercalc.com/onglets2.html) J'aimerai que les onglets soient gris et qu'ils deviennent rose au passage de la souris. Une fois en ligne, les images ne s'affichent plus...
A voir également:
- Onglets css
- Restaurer les onglets chrome - Guide
- Ouvrir plusieurs onglets en même temps - Guide
- Fusionner des onglets excel - Guide
- 99 onglets ouverts android - Forum Mozilla Firefox
- Enlever le soulignement d'un lien css ✓ - Forum CSS
32 réponses
Bonjour,
Chez moi ça fonctione.
Ce n'est pas terrible, mais ça fonctionne (-;
+ Si tu ne veux pas trop gêner les intervenants prêts à t'aider, et te faciliter la maintenance par la suite, donne des noms plus évocateurs aux “#Layer” de ton site.
--
Chez moi ça fonctione.
Ce n'est pas terrible, mais ça fonctionne (-;
+ Si tu ne veux pas trop gêner les intervenants prêts à t'aider, et te faciliter la maintenance par la suite, donne des noms plus évocateurs aux “#Layer” de ton site.
--
Ah, tiens, ça a changé. Plus de barre bleue.
Juste pour préciser qu'en XHTML les <img se ferment par “espace/>”.
--
Juste pour préciser qu'en XHTML les <img se ferment par “espace/>”.
--
Bon il y a une petite amélioration, mes onglets s'affichent correctement. Mais la barre bleue qui est derrière ne s'affiche pas, un vrai mystère!!!!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Merci Gihef, ca marche maintenant! En fait, il acceptait pas le tiret dans le nom de l'image, j'ai donc changé "Barre-bleue" en "BarreBleue".
Bon, je mets le lien cliquable (avec http://) http://www.ateliercalc.com/onglets2.html
Non, non, ça ne s'affiche pas.
Ce que je voulais dire, c'est que tu demandais l'image à une adresse où elle ne se trouvait pas.
Et maintenant, parce que
--
Non, non, ça ne s'affiche pas.
Ce que je voulais dire, c'est que tu demandais l'image à une adresse où elle ne se trouvait pas.
Et maintenant, parce que
height:100%; width:100%;de quoi ?
--
re,
ben ?!
qu'est-ce que c'est ça ???
pas d'unité ou des valeurs relatives décimales, pas terrible pour une marge mais je suppose que c'est ton éditeur.
méfies-toi de DreamWeaver (si c'est lui que tu utilises).
en quelques clics tu vas te retrouver avec une mise en page ingérable !!!
dans un premier, surtout si tu n'es pas à l'aise avec CSS mieux vaut modifier avec un éditeur de texte et regarder ce que ça donne dans le navigateur. ou alors utilises la barre d'outils Web Developper sinon tu vas mettre en l'air ce que tu fais au fur et à mesure.
ben ?!
qu'est-ce que c'est ça ???
{margin:50;}
{margin:2.23% 0 0 0.5%;}
pas d'unité ou des valeurs relatives décimales, pas terrible pour une marge mais je suppose que c'est ton éditeur.
méfies-toi de DreamWeaver (si c'est lui que tu utilises).
en quelques clics tu vas te retrouver avec une mise en page ingérable !!!
dans un premier, surtout si tu n'es pas à l'aise avec CSS mieux vaut modifier avec un éditeur de texte et regarder ce que ça donne dans le navigateur. ou alors utilises la barre d'outils Web Developper sinon tu vas mettre en l'air ce que tu fais au fur et à mesure.
J'ai tendance à mettre des % partout pour que ca s'adapte aux résolutions...
La page marche bien avec IE mais pas il y a quelques problèmes avec les autres navigateurs. Quel bout de code est mal suporté par ces navigateurs (mozilla, netscape, opera)?
La page marche bien avec IE mais pas il y a quelques problèmes avec les autres navigateurs. Quel bout de code est mal suporté par ces navigateurs (mozilla, netscape, opera)?
J'utilise Dreamweaver mais seulement en mode code. J'ai commencé le CSS lundi donc je suis pas encore très a l'aise avec... Si j'ai bien compris, il faut que je mette tout en px. Mais si je veux que ça s'adapte à toutes les résolutions, je suis bien obligé d'utiliser les %
Je suis perdue là!!
Je suis perdue là!!
tu dois parler de l'affichage de la barre de séparation.
je suppose que le {float:left;} de '<ul>' ne leur plait pas et le {width:100%;} ne doit servir à rien.
par contre tu prends le problème à l'envers.
Opéra est le navigateur qui respecte le plus les spécifications, ensuite Gecko (le moteur de Mozzila, Netscape, Firefox…) et le mauvais élève de la classe, loin derrière c'est IE.
c'est pourquoi il vaut mieux développer pour FF et ensuite adapter à IE, sinon tu ne vas pas t'en sortir.
je suppose que le {float:left;} de '<ul>' ne leur plait pas et le {width:100%;} ne doit servir à rien.
ul /*liste à puce*/
{
margin:2.23% 0 0 0.5%;
padding:0 0 0 0;
list-style-type:none;
}
par contre tu prends le problème à l'envers.
Opéra est le navigateur qui respecte le plus les spécifications, ensuite Gecko (le moteur de Mozzila, Netscape, Firefox…) et le mauvais élève de la classe, loin derrière c'est IE.
c'est pourquoi il vaut mieux développer pour FF et ensuite adapter à IE, sinon tu ne vas pas t'en sortir.
pourtant avec l'exemple que tu m'as donné (http://www.grainedekeupon.fr/ccm/css_menu_onglet.html), il n'y a pas de soucis sur FF. Comment je peux faire pour éviter les float?
En plus, le float ne se situe pas dans la partie du code où je traite la barre de séparation...
En plus, le float ne se situe pas dans la partie du code où je traite la barre de séparation...
moi j'ai utilisé le flottement pour que '<ul>' englobe les '<li>', c'est obligatoire car les '<li>' flottent à gauche.
j'ai fait ça uniquement pour pouvoir tracer une bordure orange en bas de '<ul>'.
c'était nécessaire pour ma mise en page mais je ne pense pas que ça le soit pour la tienne.
j'ai fait ça uniquement pour pouvoir tracer une bordure orange en bas de '<ul>'.
c'était nécessaire pour ma mise en page mais je ne pense pas que ça le soit pour la tienne.
ton problème d'affichage sous FF vient de là :
tu avais défini deux styles pour la bordure donc FF considère la règle comme erronée et l'ignore purement et simplement.
c'est un peu vache comme comportement mais c'est plus "propre" que de choisir à la place du codeur !
.barre-bleue{
background-image:url(BarreBleue.gif);
background-position:0 0;
height:62px;
border-bottom:4px groove #e7e7e7;
}
tu avais défini deux styles pour la bordure donc FF considère la règle comme erronée et l'ignore purement et simplement.
c'est un peu vache comme comportement mais c'est plus "propre" que de choisir à la place du codeur !
Bonjour,
A mon avis, Sandy, tu devrais mettre tes onglets et la police des onglets en px. Comme ça, pas de problèmes inter-fureteurs. C'est pas grave s'ils sont un peu différents en grandeurs dans les différentes résolutions. De cette façon aussi, tu vas pouvoir mettre l'image onglet d'une grandeur précise qui va bien encadrer son texte. De plus, ce serait la manière la plus simple de procéder.
Serge.
A mon avis, Sandy, tu devrais mettre tes onglets et la police des onglets en px. Comme ça, pas de problèmes inter-fureteurs. C'est pas grave s'ils sont un peu différents en grandeurs dans les différentes résolutions. De cette façon aussi, tu vas pouvoir mettre l'image onglet d'une grandeur précise qui va bien encadrer son texte. De plus, ce serait la manière la plus simple de procéder.
Serge.
salut,
mouais…
je suis loin d'être convaincu.
"tu devrais mettre tes onglets et la police des onglets en px"
mais dans ce cas adieu l'accessibilité, mieux vaut retourner à la première mise en page avec des liens bruts dans une collection de '<div>'.
"Comme ça, pas de problèmes inter-fureteurs."
les problèmes cités plus haut n'avaient pas de rapport avec la taille de police.
"C'est pas grave s'ils sont un peu différents en grandeurs dans les différentes résolutions."
???
si tu fixes tout, ils sont différents ?
quel est l'intérêt de la méthode alors ?
"tu vas pouvoir mettre l'image onglet d'une grandeur précise qui va bien encadrer son texte."
c'était le cas avant qu'un certain {display:block;} ne disparaisse mystérieusement de la css.
je ne pense pas avoir donné la meilleure méthode mais une méthode valide, accessible et des plus simples à mettre en place.
elle pourrait être grandement améliorée si une version de départ pouvait être posée.
le problème c'est que le code proposé puis accepté est retouché de droite et de gauche, à priori au hasard.
d'où des erreurs qui apparaissent à longueur de temps alors que la conception originelle tendait justement à les éviter.
même pour les images de fonds on peut envisager un design totalement fluide (des onglets de taille variable) mais il faudrait y aller progressivement et capitaliser à chaque réussite.
mouais…
je suis loin d'être convaincu.
"tu devrais mettre tes onglets et la police des onglets en px"
mais dans ce cas adieu l'accessibilité, mieux vaut retourner à la première mise en page avec des liens bruts dans une collection de '<div>'.
"Comme ça, pas de problèmes inter-fureteurs."
les problèmes cités plus haut n'avaient pas de rapport avec la taille de police.
"C'est pas grave s'ils sont un peu différents en grandeurs dans les différentes résolutions."
???
si tu fixes tout, ils sont différents ?
quel est l'intérêt de la méthode alors ?
"tu vas pouvoir mettre l'image onglet d'une grandeur précise qui va bien encadrer son texte."
c'était le cas avant qu'un certain {display:block;} ne disparaisse mystérieusement de la css.
je ne pense pas avoir donné la meilleure méthode mais une méthode valide, accessible et des plus simples à mettre en place.
elle pourrait être grandement améliorée si une version de départ pouvait être posée.
le problème c'est que le code proposé puis accepté est retouché de droite et de gauche, à priori au hasard.
d'où des erreurs qui apparaissent à longueur de temps alors que la conception originelle tendait justement à les éviter.
même pour les images de fonds on peut envisager un design totalement fluide (des onglets de taille variable) mais il faudrait y aller progressivement et capitaliser à chaque réussite.
Bonsoir,
Bon pour répondre à Dalida, je dois ajouter que j'ai vérifié si les polices pouvaient être ajustées en %. La réponse est non. C'est là qu'il est le problème d'accessibilité. Ce que je dis est simple et sera tout à fait sans problème sur tout les fureteurs.
Ta méthode est très bien, Dalida. C'est les polices en % que je ne conseille pas.
Ceci dit, c'est vrai que les grosseurs vont différer. Un javascript peut résoudre ce problème. C'est ce que je fais mais ça rend les choses compliquées pour les débutants. Comme Dalida dis, faut aller progressivement.
Serge.
Bon pour répondre à Dalida, je dois ajouter que j'ai vérifié si les polices pouvaient être ajustées en %. La réponse est non. C'est là qu'il est le problème d'accessibilité. Ce que je dis est simple et sera tout à fait sans problème sur tout les fureteurs.
Ta méthode est très bien, Dalida. C'est les polices en % que je ne conseille pas.
Ceci dit, c'est vrai que les grosseurs vont différer. Un javascript peut résoudre ce problème. C'est ce que je fais mais ça rend les choses compliquées pour les débutants. Comme Dalida dis, faut aller progressivement.
Serge.
Dalida >>> Pour le block:display je l'ai enlevé parce que les onglets se mettaient en colonne mais il y a surement un meilleur moyen.
Serge_La >>> Pour le javascript, je mis suis mis la semaine dernière et connaissant le C++, je maitrise a peut près (ou du moins je comprend le code) mais je vois pas comment faire. Est-ce qu'en récupérant la résolution de l'écran avec availHeight et availWidth et en redimensionnant toutes les images en fonctions, c'est la méthode la plus simple?
Dalida >>> Je vais reprendre ton code de départ et le modifier en fonction de ce que je veux obtenir, ca évitera surement des erreurs.
Serge_La >>> Pour le javascript, je mis suis mis la semaine dernière et connaissant le C++, je maitrise a peut près (ou du moins je comprend le code) mais je vois pas comment faire. Est-ce qu'en récupérant la résolution de l'écran avec availHeight et availWidth et en redimensionnant toutes les images en fonctions, c'est la méthode la plus simple?
Dalida >>> Je vais reprendre ton code de départ et le modifier en fonction de ce que je veux obtenir, ca évitera surement des erreurs.
Youpiiii!!
Bon après quelques arrachage de cheveux et beaucoup de précieux conseils, j'ai des onglets qui marche sur IE,FF,Netscape et Opéra:
http://www.ateliercalc.com/Onglets.html pour voir le résultat
Merci à tous et resté dans le coin, je vais surement encore avoir besoin de vous ;o)
Bon après quelques arrachage de cheveux et beaucoup de précieux conseils, j'ai des onglets qui marche sur IE,FF,Netscape et Opéra:
http://www.ateliercalc.com/Onglets.html pour voir le résultat
Merci à tous et resté dans le coin, je vais surement encore avoir besoin de vous ;o)
Me revoila avec mes CSS...
Alors j'ai réussi à faire ma page d'accueil tout en CSS mais dès que je ne vois pas comment je pourrai faire pour que l'image centrale occupe toute la page en s'adaptant à la résolution.
Si je met width:100%, mon image reste dans sa taille d'origine, comment je peux faire pour qu'elle s'agrandisse? Si je mèle Javascript et css pour récupérer la résolution de l'écran de l'internaute, ca va poser des soucis?
Alors j'ai réussi à faire ma page d'accueil tout en CSS mais dès que je ne vois pas comment je pourrai faire pour que l'image centrale occupe toute la page en s'adaptant à la résolution.
Si je met width:100%, mon image reste dans sa taille d'origine, comment je peux faire pour qu'elle s'agrandisse? Si je mèle Javascript et css pour récupérer la résolution de l'écran de l'internaute, ca va poser des soucis?
"donne des noms plus évocateurs aux “#Layer” de ton site"
+1
fouillouillou oui !!!
Sandykoala, il faut aussi te mettre à l'indentation du code.
c'est toi qui en profitera le plus. un code claire et rigoureusement écrit c'est au moins 50% d'erreurs en moins.