[CSS] Problème avec les onglets

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...
Configuration: Windows XP
Internet Explorer 7.0

32 réponses

Résumé de la discussion

La problématique concerne la création d’onglets avec CSS et JavaScript qui fonctionnent en local mais pas en ligne, et des images qui ne s’affichent plus sur le site distant. Les échanges évoquent des solutions autour des unités px versus pour cent, des questions d’accessibilité et d’affichage entre navigateurs, notamment Internet Explorer 7 sous Windows XP. Des conseils portent sur l’indentation et le nommage des éléments, l’évitement des floats problématiques, et l’approche consistant à tester d’abord sur FF puis adapter pour IE afin d’assurer une compatibilité. En parallèle, des remarques proposent d’utiliser des scripts pour adapter la taille selon la résolution et d’éviter les valeurs fixes, sans conclure sur l’état du fil, et signalant les risques liés à la dépendance navigateur.

Bobot (l’IA à votre service)
  1. sandykoala
    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.
    1. Serge_La
      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: 
      <a href="javascript: ClickOnItem()">Entrer</a>

      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.
      2. sandykoala
        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?
        2. Dalida Contributeur
          salut,

          tu peux l'alléger un peu : 
          <script language='JavaScript' type="text/javascript">
//*************** Récupération de la résolution de l'écran ***************
var res = new Array(1024, 768);

function resolution ()
{
	if (screen.width==800 && screen.height==600)
	{
		res = new Array(800, 600);
	}

	if (screen.width==1280 && screen.height==1024)
	{
		res = new Array(1280, 1024);
	}
}
</script>

          et si tu n'as pas besoin des valeurs elles-même : 
          <script language='JavaScript' type="text/javascript">
//*************** Récupération de la résolution de l'écran ***************
var res =1024;

function resolution ()
{
	if (screen.width==800 && screen.height==600)
	{
		res = 800;
	}

	if (screen.width==1280 && screen.height==1024)
	{
		res = 1280;
	}
}
</script>

          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 !
          1. sandykoala
            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. 

            <script language='JavaScript' type="text/javascript">
//*************** Récupération de la résolution de l'écran ***************
var res_800x600=false;
var res_1024x768=true; //s'affiche par défaut
var res_1280x1024=false;

function resolution ()
{
	if (screen.width==800 && screen.height==600)
	{
		res_800x600=true;
		res_1024x768=false;
	}

	if (screen.width==1280 && screen.height==1024)
	{
		res_1280x1024=true;
		res_1024x768=false;
	}
}
</script>
            1. Serge_La
              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.
              1. sandykoala
                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?
                1. Gihef Contributeur
                  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.

                  --
                  1. Serge_La
                    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.
                    1. Dalida Contributeur
                      salut,

                      effectivement tu as bien bossé !
                      il y a juste 
                      <img src="memo/images/BarreBleue.gif">

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

                      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.
                      1. Serge_La
                        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
                        1. Utilisateur anonyme
                          au fait, je parle de cette page: http://www.ateliercalc.com/AccueilCSS.html
                          1. sandykoala
                            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?
                            1. Gihef Contributeur
                              Et ben voilà.
                              Bien joué.

                              + Présentation métite un accent.
                              1. sandykoala
                                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)
                                1. sandykoala
                                  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.
                                  1. Serge_La
                                    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.
                                    1. Serge_La
                                      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.
                                      1. Dalida Contributeur
                                        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.
                                      2. Gihef Contributeur
                                        @Dalida“elle pourrait être grandement améliorée si une version de départ pouvait être posée”
                                        etc.

                                        +1

                                        --
                                    2. Dalida Contributeur
                                      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 !
                                      • 1
                                      • 2

                                      Discussions similaires

                                      Comment supprimer les onglets?
                                      VictimeDeLinformatique

                                      2 réponses
                                      indice et exposant en css ?
                                      yiv

                                      19 réponses
                                      Comment fermer les onglets facilement sur iPad 11
                                      icecream1949-1944

                                      8 réponses
                                      Supprimer onglets
                                      robertdu16

                                      4 réponses
                                      plusieurs onglet au démarrage de firefox
                                      kauzzak

                                      2 réponses