28173 sujets

CSS et mise en forme, CSS3

salut, je suis novice en css mais j'ai réussi à teminer un site. Je voudrais savoir comment on insère avec ou sans css, des lignes fines en pointillés entre les entrées d'un menu. Je pourrais bien sûr essayer avec les cellules d'un tableau et la balise Border mais je trouve cela rébarbatif car j e n'ai pas de tableau pour ce menu. Je privilégie les css bien sûr. Qui peut me conseiller?Merci
Les entrées du menu suivant sont purement fictives et ne servent que l'exemple.


<div id="menu">
<p><strong><a href="index.php?page=home" class="lien">Home</a></strong><br />
<strong><a href="index.php?page=profil" class="lien">Profil</a></strong></p>
<strong><a href="index.php?page=general" class="lien">Général</a></strong><br />
<strong><a href="index.php?page=categorie" class="lien">Catégories</a></strong><br />
<strong><a href="index.php?page=produit" class="lien">Produits</a></strong><br />
<strong><a href="index.php?page=condition" class="lien">Conditions</a></strong><br />
<strong><a href="index.php?page=paiement" class="lien">Paiement</a></strong><br />
<strong><a href="index.php?page=contact" class="lien">Contact</a></strong><br />
<p><strong><a href="index.php?page=cout" class="lien">Coûts</a></strong><br />
<strong><a href="index.php?page=aide" class="lien">Aide</a></strong><br />
<strong><a href="index.php?page=plan" class="lien">Plan</a></strong><br />
<strong><a href="index.php?page=formulaire" class="lien">Formulaire</a></strong><br />
<strong><a href="index.php?page=service" class="lien">Autres ervices</a></strong></p>
</div>


mon css (provisoire)

#menu {
	position: absolute;
	width: 112px;
	height: 520px;
	margin: 0px;
	padding: opx;
	left:4px;
	margin-top: 160px;
	top: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000066;
	background-color:#FFFFFF;
	
		}

Modifié par midiweb (28 Feb 2007 - 12:33)
Modérateur
Salut midiweb,

Je trouve ta sémantique un peu bizarre... Pourquoi n'as-tu pas fait une liste ? Smiley sweatdrop
Et puis tous ces éléments en strong, ça fait que plus rien est important en fait parce que là, tu noies le poisson. Smiley ravi
Aussi, vu que tous tes liens sont identiques, tu peux y accéder via #menu a plutôt que d'ajouter une classe identique pour chacun d'entre eux. Smiley cligne
Après, pour créer tes bordures, il faut que tu regardes du côté de la propriété border sachant que les pointillés, c'est dotted. Smiley smile
Modifié par koala64 (28 Feb 2007 - 11:52)
Oulala, l'erreur classique "j'apprend CSS sans prendre le temps de réapprendre le HTML"... Smiley lol

En fait avec une bonne structure html à la base ça pourrait se faire très facilement, par exemple si chaque item de ton menu était dans un item de liste :


<ul>
<li>Home</li>
<li>Profil</li>
...
</ul>


et ensuite en CSS :


li{
list-style:none;
border-bottom:1px dotted #000000;
}


C'est une solution parmi d'autres, sinon la solution "tableau" n'est pas pire que les <strong> les uns à la suite des autres, au contraire.
merci. En fait, j'avais une liste avec des puces mais mon client ne veut pas de puces mais seulement les entrées simples du menu. En outre, l'affichage était différent selon les navigateurs. Aussi, la fine ligne n'allait pas jusqu'a mon frame du milieu mais s'arrêtait à la définition de la puce, ce que je trouvais inesthétique. Mais on pourrait très bien faire une liste sans puces, hein? j'essaie vos trucs.a+
Modifié par midiweb (28 Feb 2007 - 12:39)