Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS] content: " | "; : le premier " " ne s'affiche ou MF...

Sujet résolu
Anonyme
    4 novembre 2011 à 19:23:59

    Bonjour.



    Je veux résoudre ce problème en CSS.


    Regardez la première barre de navigation (faite par un <nav>), comparez avec Firefox 7 et un autre navigateur récent (Chromium 14, IE9 et/ou Opera 11.51).
    Vous verrez qu'il y a un problème d'espacement entre la barre "|" et les 2 mots ("Accueil" et "News").

    Au début, j'avais ce code CSS :
    body > header + nav li
    {
    	float: left;
    }
    
    body > header + nav li + li:before
    {
    	content: " | ";
    }
    

    C'était parfait sous Firefox, mais sous les autres navigateurs le premier " " ne s'affichait pas.

    Puis, j'ai tenté de résoudre le problème avec ce code :
    body > header + nav li
    {
    	float: left;
    	margin-right: 4px;
    }
    
    body > header + nav li + li:before
    {
    	content: "| ";
    }
    

    Cette fois, ça marche bien sur les autres.
    Mais, Firefox lui fait son grognon. D'après mes tests (je me suis peut être trompé :euh: ), le problème ne vient ni de margin, ni de padding !

    Comment puis je résoudre mon problème ?

    Merci.
    • Partager sur Facebook
    • Partager sur Twitter
      6 novembre 2011 à 2:19:01

      Salut, tentes ceci :



      body > header + nav li
      {
      	float: left;
      }
      
      body > header + nav li + li:before
      {
      	content: "\240|\240";
      }
      


      Le \240, c'est le code hexadécimal pour un espace insécable.
      • Partager sur Facebook
      • Partager sur Twitter
      Anonyme
        6 novembre 2011 à 18:06:44

        Ni Firefox, ni Chromium n'aime (je n'ai pas testé sur les autres) :
        Image utilisateur

        Quelqu'un a une autre idée ?

        Merci.
        • Partager sur Facebook
        • Partager sur Twitter
          7 novembre 2011 à 10:41:41

          En effet…

          Et ce code là (vérifié chez moi, ça marche maintenant) :

          content: "\0A0|\0A0";
          
          • Partager sur Facebook
          • Partager sur Twitter
          Anonyme
            7 novembre 2011 à 16:18:16

            Merci, ça marche.

            Mais, Firefox 7 continue de faire son mauvais élève, il y a un espace en trop :
            Image utilisateur

            Malgré ce code :
            body > header + nav li
            {
            	float: left;
            	margin: 0px;
            	padding: 0px;
            }
            
            body > header + nav li + li:before
            {
            	content: "\0A0|\0A0"; /* code hexadécimal pour un espace insécable */
            	margin: 0px;
            	padding: 0px;
            }
            


            Pour ceux qui sont sous la release candidate de Firefox 8, avez vous le problème ?
            Comment corrigez le problème sous Firefox 7 ?

            Merci.
            • Partager sur Facebook
            • Partager sur Twitter
              8 novembre 2011 à 15:10:24

              Ah, oui, je me souviens que Firefox avait un soucis avec les "li" en flotant dans un menu.

              Je n'ai jamais trouvé d'où ça venait. Peut-être en ajoutant ceci :

              border: 0;
              outline: 0;
              


              Ou ça : (seul d'abord, puis avec le code ci-dessus ensuite, si ça ne marche pas) :

              list-style-position: inside;
              


              Ou :
              list-style-position: outside;
              


              ou alors :
              border: 1px solid transparent;
              outline: 0;
              
              • Partager sur Facebook
              • Partager sur Twitter
              Anonyme
                9 novembre 2011 à 18:41:43

                1. Ça ne marche pas.
                2. Avant dans la CSS, il y a déja :
                  body > nav ul, body > nav ul li
                  {
                  	margin-left: 0px;
                  	padding-left: 0px;
                  	
                  	list-style-type: none;
                  	list-style-position: inside;
                  }
                  
                3. Il fait une bordure transparente de 1px, mais ça corrige pas le problème.

                J'ai testé avec Firefox 8.
                Ce n'est pas grave si ça ne fonctionne pas sous la 7.


                Après réflexion, j'ai testé ça :
                body > header + nav li
                {
                	float: left;
                	display: inline;
                }
                

                C'est simple et tous les navigateurs sont d'accord. ^^
                • Partager sur Facebook
                • Partager sur Twitter
                  11 novembre 2011 à 11:59:55

                  Ah, ok.

                  Mais le « display: inline » ne va pas te permettre de donner des largeurs à tes blocs. De plus, avec cela, le "float" est inutile.

                  Tu peux aussi essayer le « display: inline-block ». Qui permettront de donner des largeurs aux <li> comme si c'étaient des bloc, mais tout en les disposant comme des inline.
                  • Partager sur Facebook
                  • Partager sur Twitter
                  Anonyme
                    13 novembre 2011 à 20:03:31

                    Quel pourrait être l'avantage de donner des largeurs à mes blocs (dans mon cas) ?

                    Merci.
                    • Partager sur Facebook
                    • Partager sur Twitter
                      14 novembre 2011 à 9:56:13

                      Dans ton cas, je sais pas, mais si jamais…
                      Peut-être le fait de pouvoir donner des largeurs égales à chaque élément ?
                      • Partager sur Facebook
                      • Partager sur Twitter

                      [CSS] content: " | "; : le premier " " ne s'affiche ou MF...

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                      • Editeur
                      • Markdown