Deux nav éléments en CSS

Problème:

Écriture commune code CSS pour que cela s'applique pour les deux nav éléments. J'ai cherché partout sur Google et Stackoverflow, sans succès. Il semble qu'il n'est pas courant d'utiliser deux nav éléments alors que le W3C permet.

Code HTML:

<!-- Global navigation -->
<nav role="main">
    <ul>
        <li><a href="index.html" class="active">Startpage</a></li>
        <li><a href="cars.html">Cars</a></li>
        <li><a href="about.html">About us</a></li>
    </ul>
</nav>

<!-- Local navigation -->
<nav role="sub">
    <ul>
        <li><a href="ferrari.html" class="pressed">Ferrari</a></li>
        <li><a href="bmw.html">BMW</a></li>
        <li><a href="volo.html">Volvo</a></li>
    </ul>
</nav>

Code CSS:

Comment pourrais-je écrire le code CSS pour que les deux éléments de navigation pour avoir la même disposition, mais différent style (couleur, taille de police, etc.)?

vous n'avez pas fourni le code css.
vous pouvez créer deux classe css pour chaque valeur liquidative et peut affecter la propriété que vous le souhaitez.
Donc, en fin de compte, vous avez voulu la même mise en page pour les deux trajets, mais tout le reste pourrait être différent?
C'est exact, je suis désolé de ne pas exprimer cette demande clairement.

InformationsquelleAutor kexxcream | 2014-10-12

Vous pourriez faire quelque chose comme ceci:

CSS:

nav ul li {
    width:100px;
    display:inline-block;
    margin:5px;
    padding:5px;
    color:#333;
    text-align: center;
}
nav[role="main"] ul li {
    background-color:#aaa;
}
nav[role="sub"] ul li {
    background-color:#eee;
}

HTML:

 <!-- Global navigation -->
<nav role="main">
    <ul>
         <li><a href="index.html" class="active">Startpage</a></li>
         <li><a href="cars.html">Cars</a></li>
         <li><a href="about.html">About us</a></li>
    </ul>
</nav>

<!-- Local navigation -->
<nav role="sub">
    <ul>
         <li><a href="ferrari.html" class="pressed">Ferrari</a></li>
         <li><a href="bmw.html">BMW</a></li>
         <li><a href="volo.html">Volvo</a></li>
    </ul>
</nav>

Oui, c'est ce que je cherchais. Beaucoup apprécié! 🙂

InformationsquelleAutor Dave Sumter

Pas sûr de ce que tu veux dire par

même apparence, mais différent style

Vous pouvez utiliser le role attribut comme un sélecteur CSS, comme illustré ici:

CSS:

nav[role="main"], 
nav[role="sub"] {
  background: #222;
  color: #f40;
}

nav[role="main"] a, 
nav[role="sub"] a {
  color: #fff;
}

HTML:

<nav role="main">
  <ul>
    <li><a href="index.html" class="active">Startpage</a>
    </li>
    <li><a href="cars.html">Cars</a>
    </li>
    <li><a href="about.html">About us</a>
    </li>
  </ul>
</nav>

<!-- Local navigation -->
<nav role="sub">
  <ul>
    <li><a href="ferrari.html" class="pressed">Ferrari</a>
    </li>
    <li><a href="bmw.html">BMW</a>
    </li>
    <li><a href="volo.html">Volvo</a>
    </li>
  </ul>
</nav>

Je suis avec vous jusqu'à présent, mais si vous commencez à l'intégration de l'ul, li et un code css? N'avez-vous pas besoin de le faire pour les deux trajets?
Pas encore tout à fait obtenir ce que vous voulez. Vous souhaitez à la fois des trajets pour ressembler exactement le même?
Oui, je veux savoir comment vous pouvez affecter deux rôles dans le CSS pour le même code.
Comme le jour l'extrait? Vous pouvez avoir plusieurs sélecteurs sur un jeu de règles.

InformationsquelleAutor Tieson T.

Vous devez vous connecter pour publier un commentaire.