CSS:mettre une bordure dans un menu?
Résolu
midiweb
-
stresy -
stresy -
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+
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+
Configuration: Windows XP Firefox 2.0.0.1
6 réponses
-
Pour les lignes dessous et l'espacement :
li{ border-bottom: 1px dashed #000; padding-bottom: 5px; }
Pour les pseudo-classes :ul{ background-color: #0f0; } ul:hover { background-color: #f00; } -
salut, merci, cela marche,sauf la largeur, j'ai ajouté widt:98px, qui est la largeur des lignes jusqu'a ma page principale.
Le hic, c'est que j'ai une deuxième liste dans mon texte du milieu, qui, lui ne doit pas être touché par cette propriété de bordure. Seul le menu a des bordures. ll faudrait une "css conditionelle", si j'ose dire.
li{
border-bottom: 1px dashed #000;
padding-bottom: 5px;
width: 98px
}
Je cherche encore.A+ -
eh bien ainsi :
#menu ul li{ border-bottom: 1px dashed #000; padding-bottom: 5px; width: 98px }
Là : http://www.yoyodesign.org/doc/w3c/css1/index.html#contextual-selectors -
salut moi je voudrai juste changer le contour des titres dans la bordure regardez https://wissem.blog4ever.com/ je veut les rendre comme en haut donc en style dotted svp pouvez vous m'aider?? merci
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
je voulait juste eclairer un point c'est la bordure de gauche et je veux modifier que article, photo, forum, newsletter, sondage, lien/partenaires, statistique donc juste la ou c'est en relief je le veux comme en haut en dotted merci encore pour votre futur reponse!
-
pour ton css il ne faut pas mettre le div
voila ton css corrigé (mais qui n'est pas forcement le bon pour ce que tu veu faire)
#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 ;
}
