18041 sujets

Questions générales et questions de débutants

[CSS] espacer des borders

Alors voilà une nav bar que j'ai faite :
upload/1541509631-73170-screenshot1.jpg

et j'aimerais avoir le résultat du 2eme screenshot.
upload/1541509645-73170-screenshot2.jpg

En gros pouvoir déplacer border-right par exemple de manière à ce que ca soit entre 2 li.
j'ai essayé de m'intéresser à border-collapse et spacing mais c'est que pour les tableaux je crois Smiley ohwell

une solution svp ?
Administrateur
Hello,

Je suppose que chaque <li> contient un <a>, dans ce cas voilà ce qui est possible de faire :
1- le <ul> en display: flex pour que tes <li> soient bien collés les uns à côtés des autres sans espace
2- une bordure à gauche de chaque <li> sauf le premier (sélecteur li:not(:first-child)), ou bien li + li)
3- une marge interne à droite et gauche de chaque <li> (padding: 0 0.5em; par ex)

A priori cela devrait être suffisant.
Modifié par Raphael (06 Nov 2018 - 14:39)
Meilleure solution
alors
mon <ul> est déjà en display flex Smiley smile
j'ai mis mes <li> dans des <a> pour que ca soit toute la case qui soit cliquable.
et sinon je vais tester le reste je vous tient au courant Smiley cligne
Administrateur
Vulcain62 a écrit :
j'ai mis mes &lt;li&gt; dans des &lt;a&gt; pour que ca soit toute la case qui soit cliquable.

Ah non ça ce n'est pas possible, tu vas te faire taper sur les doigts : <ul> ne peut avoir que des <li> comme enfants directs.
Si tu veux que toute la zone soit cliquable, tu peux par exemple :
- passer tes <li> en display: flex (ainsi le <a> contenu occupera toute la hauteur)
- appliquer un flex-grow: 1 sur le <a> pour qu'il occupe toute la largeur également

<nav>
			<ul>
				<li><a href="Index.html">Accueil </a></li>
				<li class="menuth">Les Reptiliens
					<div id="flechesousmenu"><img src="images/triangle.png" class="fleche"></div>

					<ul class="sousmenu">
						<a href="reptilien1.html"><li>Explications</li></a>
						<a href="reptilien2.html"><li>Les noms</li></a>
					</ul>
				</li>

				<li class="menuth">Theorie2
					<div id="flechesousmenu"><img src="images/triangle.png" class="fleche"></div>

					<ul class="sousmenu">
						<a href="Construction.html"><li>th2 fact1</li></a>
						<a href="Construction.html"><li>th2 fact2</li></a>
					</ul>
				</li>

				<li class="menuth">Anciens Cosmonautes
					<div id="flechesousmenu"><img src="images/triangle.png" class="fleche"></div>

					<ul class="sousmenu">
						<a href="cosmonaute1.html"><li>th3 fact1</li></a>
						<a href=cosmonaute2.html"><li>th3 fact2</li></a>
					</ul>
				</li>
				<li><a href="Construction.html">À propos</a></li>
			</ul>
		</nav>


c'est bizarre ce que tu me dis et c'est vrai que c'est logique comme convention le fait que le 1er enfant d'un<ul> doit être un <li>
mais moi ca fonctionne Smiley rolleyes

upload/1541512448-73170-screenshot4.jpg
Modifié par Vulcain62 (06 Nov 2018 - 14:54)
Administrateur
Vulcain62 a écrit :
mais moi ca fonctionne Smiley rolleyes

Ah mais personne n'a dit que ça ne fonctionnait pas. Ce n'est pas autorisé par les spécifications, tout simplement. Donc en gros ça peut fonctionner... ou pas, selon les navigateurs.
D'où la formule consacrée "tant pis ça marche", mais il serait tout de même dommage de faire reposer son code sur un malentendu...
Sujet clos
Aller à