Rechercher : dans
Par :

CSS:mettre une bordure dans un menu?

Dernière réponse le 2 déc 2007 à 09:39:49 midiweb, le 2 fév 2007 à 09:13:42 
 Signaler ce message aux modérateurs

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+

Configuration: Windows XP
Firefox 2.0.0.1

Meilleures réponses pour « CSS:mettre une bordure dans un menu? » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...

1

plop!, le 3 fév 2007 à 07:33:50

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;
}

Répondre à plop!

2

Lapinkiller, le 3 fév 2007 à 12:45:46

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 ;
} Lapinkiller, étudiant en BTS IRIS (informatique et réseaux...)
"La fin du monde n'est pas pour demain, elle est arrivée hier" (Lapinkiller)

Répondre à Lapinkiller

3

midiweb, le 3 fév 2007 à 19:15:57

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+

Répondre à midiweb

4

plop!, le 4 fév 2007 à 07:13:50

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

Répondre à plop!

5

stresy, le 2 déc 2007 à 09:34:41

Salut moi je voudrai juste changer le contour des titres dans la bordure regardez http://wissem.blog4ever.com je veut les rendre comme en haut donc en style dotted svp pouvez vous m'aider?? merci

Répondre à stresy

6

 stresy, le 2 déc 2007 à 09:39:49

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!

Répondre à stresy