18041 sujets

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

Séparation avec | dans un menu

bonjour,

J'ai un menu et je veux faire des séparations entre ses items comme ci-dessous

upload/57489-avecsnpara.PNG

Aidez-moi svp, merci !! Smiley biggrin
Ce n'est pas exactement ce que je cherche. Je veux qu'une séparation se trouve exactement au milieu des deux items séparés.

La solution que vous m'avez proposé permet d'insérer | juste avant le item, même si j'ajoute de l'espace.
Tu dois adapter (ajouter/gérer les liens) quelque chose comme ceci (il y a certainement mieux Smiley confused ):


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu avec séparations</title>
<style>
	.menu{
		text-align:center;
	}
	.menuitem{
		display:inline-block;
		padding:10px;
		margin:0;
		cursor:pointer;
		font:normal bold 16px verdana,arial,helvetica,sans-serif;
	}
	.menuitem:hover {
		color:blue;
	}
	.pipe {
		display:inline-block;
		padding:10px;
		margin:0;
	}
</style>
</head>
<body>
	<div class="menu">
		<div class="menuitem">Item A</div><div class="pipe">|</div>
		<div class="menuitem">Item B</div><div class="pipe">|</div>
		<div class="menuitem">Item C</div><div class="pipe">|</div>
		<div class="menuitem">Item D</div><div class="pipe">|</div>
		<div class="menuitem">Item E</div><div class="pipe">|</div>
		<div class="menuitem">Item F</div>
	</div>
</body>
</html>
Ca ne serait pas mieux un border-right alors ? Désolé si j'insiste mais avant de voir ta réponse Iddsoft, on pouvait se poser la question. Là, il me semble qu'un CSS border serait plus "propre". Puis pourquoi pas un ul suivi de li pour le menu ? Dans un nav ?
Modifié par MagicCarpet (04 Feb 2015 - 16:13)
@MagicCarpet

Entièrement d'accord avec toi, ce serait plus "propre" avec une liste (ul et li) au lieu des div.

C'est à ça que je pensais en disant dans mon post "(il y a certainement mieux)"


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu avec séparations</title>
<style>
	.menu{
		text-align:center;
		background:#ccc;
	}
	.menuitem, .pipe {
		display:inline-block;
		padding:10px;
		margin:0;
	}	
	.menuitem a:link, .menuitem a:visited {
		font:normal bold 16px verdana,arial,helvetica,sans-serif;
		text-decoration:none;
		color:#000;
	}
	.menuitem a:hover {
		color:#fff;
	}
	.menuitem a:active {
		color:red;
	}
	
</style>
</head>
<body>
	<ul class="menu">
		<li class="menuitem"><a href="#">Item A</a></li><li class="pipe">|</li>
		<li class="menuitem"><a href="#">Item B</a></li><li class="pipe">|</li>
		<li class="menuitem"><a href="#">Item C</a></li><li class="pipe">|</li>
		<li class="menuitem"><a href="#">Item D</a></li><li class="pipe">|</li>
		<li class="menuitem"><a href="#">Item E</a></li><li class="pipe">|</li>
		<li class="menuitem"><a href="#">Item F</a></li>
	</ul>
</body>
</html>

Modifié par lddsoft (04 Feb 2015 - 16:52)
Sujet clos
Aller à