[CSS] Problème avec les onglets Fermé

Question

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...

Gihef · Answer

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.

--

Gihef · Answer

Ah, tiens, ça a changé. Plus de barre bleue.
Juste pour préciser qu'en XHTML les <img se ferment par “espace/>”.

--

sandykoala · Answer

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!!!!

Gihef · Answer

Peut-être parce que http://www.ateliercalc.com/barre-bleue.gif ?
Où est-elle ?

--

sandykoala · Answer

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".

Gihef · Answer

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  height:100%;
  width:100%;de quoi ?

--

Dalida · Answer

re,

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.

sandykoala · Answer

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)?

sandykoala · Answer

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à!!

Dalida · Answer

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.
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&hellip;) 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.

sandykoala · Answer

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...

Dalida · Answer

moi j'ai utilisé le flottement pour que '

', c'est obligatoire car les '
' flottent à gauche. j'ai fait ça uniquement pour pouvoir tracer une bordure orange en bas de '

Dalida · Answer

ton problème d'affichage sous FF vient de là :
.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 !

Serge_La · Answer

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.

Serge_La · Answer

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.

sandykoala · Answer

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.

sandykoala · Answer

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)

Gihef · Answer

Et ben voilà.
Bien joué.


+ Présentation métite un accent.

sandykoala · Answer

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?

Utilisateur anonyme · Answer

au fait, je parle de cette page: http://www.ateliercalc.com/AccueilCSS.html

Serge_La · Answer

Wow, Sandy. C'est très bien.
Si ton image est en "background", tu ne peux pas changer sa grandeur en css seul. Il faut du javascript. Tu pourrais, par exemple, créer trois (ou deux) grandeurs de pages standards et tout adapter à ces trois (ou deux) grandeurs. Un javascript détecterais au départ quelle grandeur appliquer (par le css)  au fureteur du visiteur. Ça te donnerais un minimum de soucis. 

Serge

Dalida · Answer

salut, effectivement tu as bien bossé ! il y a juste

qui ne devrait pas apparaitre, d'autant qu'elle fait doublon avec le {background-image} du '

' pour l'adaptation de la largeur, est-ce bien utile ? en gros, plus de 90% des moniteurs ont une résolution supérieure à 800x600. et la moitié sont en 1024. pourquoi ne pas partir sur une largeur fixe de 1000 pixels ? en centrant la page, le rendu passera surement mieux sur les très grosses résolutions.

Serge_La · Answer

D'accord avec toi, Dalida. Sauf que Sandy ajuste certains éléments par rapport au côté gauche, il me semble. Ce serait un problème d'essayer d'ajuster avec le centre. 

Serge.

Gihef · Answer

Et comment s'ajusteront les gif ?
Je suis aussi pour que la taille de l'image reste inchangée.
Ça demande trop d'adaptations pour un résultat pas vraiment utile pour ce genre de site.

Sinon, par CSS, c'est possible (mais pas en background) : http://forum.alsacreations.com/faq/faq-56-Comment-faire-un-arriere-plan-etirable-.html


++
Il me semble que dans http://www.ateliercalc.com/Onglets.html le menu se trouvait dans la BarreBleue ?
Actuellement, Safari affiche les onglets en dessous.

--

sandykoala · Answer

J'ai du doubler le <img src="memo/images/BarreBleue.gif"> parce que sinon elle ne s'affiche pas correctement.
Du coup, je vais faire mes pages pour 3 types de résolutions (800x600, 1024x768 et 1280x1024).

J'ai un soucis avec ma barre bleu, je met width:100% mais la scrollbarre s'affiche quand même et j'ai une bande noir à droite. Est-ce que ça peut venir de ma barre bleue qui s'insère deux fois?

Serge_La · Answer

Bonjour Sandy,
Je ne vois pas tes soucis sur la page http://www.ateliercalc.com/AccueilCSS.html
Je ne comprends pas pourquoi tu ne mets pas ta barre bleue en background. Tes onglets surperposeraient la barre de cette façon. 

Serge.

sandykoala · Answer

J'ai fait une fonction qui détermine quelle est la résolution de l'écran mais je ne sais pas comment utiliser les variables en HTML. J'ai créer ma page d'accueil suivant trois résolutions et je voudrais que quand l'internaute clique sur "Entrer", il soit diriger vers lapage d'accueil de sa résolution.

Dalida · Answer

salut, tu peux l'alléger un peu : et si tu n'as pas besoin des valeurs elles-même : enfin, bref ! quand tu dis J'ai créer ma page d'accueil suivant trois résolutions faut-il comprendre que tu as créé trois fichiers distincts ? si oui il va falloir faire un 'refresh()' en JS et ce n'est pas très propre. sinon il faudra activer ou désactiver la feuille de style à utiliser. bref dis nous comment tu gères tes trois résolutions, stp !

sandykoala · Answer

En effet j'ai créer trois fichiers distincts...
J'ai modifier mon code pour pouvoir récupérer la résolution en HTML (http://www.ateliercalc.com/IndexEssai.html) mais ca ne marche pas. En local, les "alert" s'affiche mais pas en ligne. En tout cas, il récupère la bonne résolution.

Est-ce qu'en mettant: window.location.href=lien et en HTML javascript:ClickOnItem(lien) ca peut marcher?

sandykoala · Answer

en fait le message d'alert ne marche plus...

Serge_La · Answer

Bonjour Sandy, Le message d'alert ne marche plus parceque le code contient une variable non définie: lien. Faut changer ton html pour ceci: Entrer Autre erreur, c'est de faire un choix avec des valeurs précises de résolutions. Tu serais beaucoup mieux d'envoyer vers les pages grandes ou petites selon que la résolution est plus grande ou plus petite que certaines valeurs (que tu choisis). Aussi, tu peux déterminer la résolution avec ton javascript qui se déclenche onload. Ce javascript determine la valeur de "lien" qui est appelée par déclic sur "entrer". Tu n'as qu'à déclarer la variable lien pour quelle soit disponible à la seconde fonction, celle qui navigue vers la page du site. Je ne vais pas t'écrire le code tout de suite. Il faut que tu travailles un peu quand même. :D :) Serge.

sandykoala · Answer

Merci pour tes conseils Serge_La, j'ai réussi à faire ce que je voulais!!

Le plus simple serait que la page s'adapte à la résolution mais ça à l'air assez compliqué, même si pour la maintenance du site ça serait plus simple.

[CSS] Problème avec les onglets

32 réponses

Discussions similaires