Aligner le texte dans le menu de navigation également convivial pour iOS / toucher

Question

Je essaie de déplacer le texte de début dans mon menu de navigation plus à gauche et de l'aligner correctement entre les espaces. J'ai également remarqué que cela ne fonctionne pas sur les appareils tactiles comme l'iPhone. Je crois que c'est possible via la feuille de CSS sans avoir à utiliser JavaScript.

Toute aide serait grandement appréciée

Merci beaucoup

http://jsfiddle.net/p6Bj5/

HTML

        Accueil

    À propos de nous

            À propos
                        Alliés
            Classement

        Membres

        Forums

    Statistiques

            Statistiques en jeu
            Statistiques de l'unité

    Média

            Téléchargements
            Galerie
            Vidéos
            Diffusions en direct

        Événements

CSS

@charset "utf-8";
body {
  font: 80%/1.4 Arial, Helvetica, sans-serif;
    background-color:#000;
    margin: 0;
    padding: 0;
}

.navbar {
    background-image:url(http://gbprojects.net/images/top_06.jpg);
    width: 937px;
    height: 48px;
    line-height: 48px;
    margin: 0 auto;
}
#nav{
    list-style:none;
    font-weight:normal;
    margin: 0px;
    line-height: 38px;
    /* Clear floats */
    float:left;
    width:100%;
    height: 38px;
    font-size: 18px;
    font-weight: bold;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    float:left;
    margin-right:40px;
    position:relative;
}
#nav a{
    display:block;
    padding:10px;
    color:#fff;
    background: transparent;
    text-decoration:none;
    text-shadow: black 0.1em 0.1em 0.2em;
}
#nav a:hover{
    color:#000;
    text-decoration:none;
    text-shadow: none;
}

/*--- DROPDOWN ---*/
#nav ul{
    background: #02949d; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    list-style:none;
    position:absolute;
    margin-top: -10px;
    margin-left: -20px;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    line-height: 20px;
    z-index: 100;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    -webkit-border-radius: 0px 0px 7px 7px;
     border-radius: 0px 0px 7px 7px; 
    -webkit-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
     box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, .25);
}
#nav ul li{
    margin-left: -40px;
    margin-right: 50px;
    font-size: 12px;
    padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
    z-index: 100;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    z-index: 100;
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
    z-index: 100;
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background: transparent;
    color: #000;
    text-decoration:none;
    z-index: 100;
    text-shadow: none;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
    z-index: 100;
    margin-left: 20px;
    text-shadow: none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background: transparent;
    color: #fff;
    z-index: 100;
    margin-left: 20px;
    text-shadow: none;
}

x;
    line-height: 58px;

Answer 1

Votre problème est que vous utilisez une image de fond pour la barre de navigation. Parce que les mots ont des longueurs différentes, vous devrez aller et changer les marges individuellement pour chaque lien. C'est soit ça, soit ajouter des arrière-plans aux ul et li, ce qui aurait été la méthode préférable.

Answer 2

Essayez d'utiliser comme ceci.

.navbar {
background: url(http://gbprojects.net/images/top_06.jpg) 35px 0px no-repeat;
}

Ne donnez pas une marge énorme aux éléments pour les aligner. Soyez spécifique à votre image d'arrière-plan pour l'en-tête car elle ne semble pas aussi parfaite qu'elle devrait l'être. Vous pouvez la garder comme arrière-plan et mettre les propriétés border-left ou border-right pour montrer une différence entre les éléments de la liste. C'est une bonne façon de gérer de tels cas. J'espère que cela vous aide.