28111 sujets

CSS et mise en forme, CSS3

Bonjour, je me suis mis au codage il n'y a pas longtemps et j'ai du mal avec mon menu nav que j'ai tout récemment modifié. En gros je n'arrive pas à modifier les espaces entre chaque puces.

pour l'html :
<header>
		<div class="bordhaut"></div>	
		<nav>
<ul>
  <li class="active"><a class="activetxt" href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>
			</nav>


et le css :
header { background-color: white; }
header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

header li {
  display: inline-block;
  margin-left: 270px;
margin-bottom:15px;
}
li {
margin-bottom:15px;
}
nav li {
  list-style: none;
}
header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
header li a:hover {
  background-color: white;
}


je voudrais que le menu soit centré, vertical et avec des puces rapproché de pas trop loin.

merci d'avance Smiley cligne
Modérateur
Salut,

De quels espaces parles-tu ?
Celui-ci ?
li {
margin-bottom:15px;
}


a écrit :

je voudrais que le menu soit centré, vertical et avec des puces rapproché de pas trop loin.

Centré verticalement par rapport a quoi ? la page entière ?
Et il n'y a plus de puce du coup avec list-style-type: none;... tu parle de l'espacement vertical des <li> ? cf code juste avant.
upload/1565043591-76595-capture.jpg l'espace entre home etc, j'aimerais centrer le menu sur le milieu de la page et que les boutons soient rapprochés.
Modifié par gab1 (06 Aug 2019 - 00:19)
Bonjour,
enlève margin-left: 270px; sur header li,
et ajoute text-align:center; sur header ul
ensuite on peut fixer la largeur entre les onglets avec le padding horizontal des <a ...>, actuellement 16px

D'autre part il serait préférable d'ajouter des classes un peu partout, et d'écrire des déclarations pour ces classes, pour une raison de poids, pour faciliter la maintenance, et aussi parce qu'une page peut contenir plusieurs <header> par exemple, ou <ul>, donc
<header class="main-header"> est préférable, et dans la css :
.main-header { ... }
Modifié par farang (06 Aug 2019 - 09:22)
Meilleure solution
farang a écrit :
Bonjour,
enlève margin-left: 270px; sur header li,
et ajoute text-align:center; sur header ul
ensuite on peut fixer la largeur entre les onglets avec le padding horizontal des &lt;a ...&gt;, actuellement 16px

D'autre part il serait préférable d'ajouter des classes un peu partout, et d'écrire des déclarations pour ces classes, pour une raison de poids, pour faciliter la maintenance, et aussi parce qu'une page peut contenir plusieurs &lt;header&gt; par exemple, ou &lt;ul&gt;, donc
&lt;header class="main-header"&gt; est préférable, et dans la css :
.main-header { ... }


Merci beaucoup, c'est bien mieu de l'aide comme besoin je suis content