28218 sujets

CSS et mise en forme, CSS3

CSS:mettre une ligne en pointillé entre les éléments d'une liste

salut, j'ai un menu très simple composé avec les élements d'une liste. Je voudrais mettre une bordure fine horizontale en pointillé entre chaque élement de ce menu, jusqu'à ma page principale du milieu. Il faudra aussi une espace régulier entre chaque entrée du menu et cette bordure. Je pourrais bien sûr utiliser un tableau et des cellules et la fonction Border. J'ai essayé mais ma mise en page est changée. Je voudrais, si possible, sans tableau.
Autre chose, comment met-on des liens en css?Je ne trouve pas la fonction, je veux dire, les couleurs changent en passant avec la souris sur les éléments du menu.
Voici mon code HTML suivi de la CSS.



<div id="menu" >
<ul>
<li>
<strong><a href="index.php?page=home">Home</a><br />
    </strong>
</li>
<li>
 <strong><a href="index.php?page=profil">Profil</a><br />
    </strong>
</li>
<li>
<strong><a href="index.php?page=cout">Coûts</a> <br />
    </strong>
</li>
<li>
<strong><a href="index.php?page=rubrique">Rubrique</a> <br />
    </strong>
</li>
<li>
<strong><a href="index.php?page=info">Information</a> <br />
    </strong>
</li>
<li>
<strong><a href="index.php?page=contact">Contact</a><br />
    </strong>
</li>

<li>
<strong><a href="index.php?page=form">Formulaire</a><br />
    </strong>
</li>
</ul>
</div>


ma page css:



div#menu {
	position: absolute;
	width: 107px;
	height: 420px;
	left: -18px;
	padding-left:inherit;
	margin-top: 130px;
	top: 27px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000066;	
}


Merci de votre aide.
A+
Modifié par midiweb (02 Feb 2007 - 10:10)
Salut,

Déja, pourquoi mettre des <br /> après tes liens sachant qu'ils sont contenus dans des <li> qui sont des éléments blocs, et passent donc naturellement à la ligne ?


Pour le filet il faut que tu fasse la déclaration suivante :
li {
border-bottom: 1px dashed #FF0000;}

A toi ensuite de régler tes marges identiques en dessous et au dessus du lien, ainsi le lien sera centré entre les filets pointillés.


Pour tes liens, il te faut utiliser les différents états de la balise <a> suivants. Attention ils faut les déclarer dans la CSS dans l'ordre suivant :
a:link {}
a:visited {}
a:hover {}
a:active {}

Link correspond à l'affichage par défaut du lien avant toute utilisation.
Visited te permet de lui préciser d'autre attributs si la page liée a déja été visitée.
Hover te permet de déterminer de nouveaux attributs lorsque le curseur de souris se trouvera sur le lien.
Enfin, active est l'état très bref lorsqu'on clique sur un lien, entre le début du clic et la fin du clic.
Modifié par Mikachu (02 Feb 2007 - 12:48)
Sujet clos
Aller à