Geckozone

Bonjour !!

je m'essaie aux CSS ... et je seche sur un petit probleme, alors pendant que je cherche et lit de la doc, je me dit que vous pourrez peut etre m'aider :

si je met tout cela ds une page web:

Code : Tout sélectionner

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a.menu1 {
text-decoration:none ; /* supprime le soulignement des liens */
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */
background-color:#CC0000 ; /* couleur du bouton */
color:white ; /* couleur du texte */
font-size:15px ; /*taille du texte */
margin:0px ; /* la marge extérieur autour des boutons est =0 (les boutons se touchent) */
padding:4px; /* la marge intérieur autour des boutons est de 4 pixels*/
border:1px solid; /* il y a une bordure solide de 1 pixel autour de chaque bouton */
border-color:red black black red ; /* couleurs des 4 cotés des bordures, dans le sens des aiguilles d'une montre */
text-align:center; /* centre le texte de chaque bouton */
width:200px } /* fixe la largeur de chaque bouton à 200 pixel */

a.menu1:hover {
border-top:2px solid brown; /* change la couleur et l'épaisseur de la bordure haute lors du survol par la souris */
border-bottom:2px solid #CC0005 ; /* change la couleur et l'épaisseur de la bordure basse lors du survol */
padding:3px 4px 3px 4px } /* diminue la marge intérieure haute et basse du bouton survolé, pour compenser l'augmentation de la taille de la bordure */
</style>
</head>

<body>
<a class="menu1" href="">Accueil</a>
<a class="menu1" href="">Articles</a>
<a class="menu1" href="">Liens</a>
<a class="menu1" href="">Écrire</a>

</body>
</html>

J'ai un joli menu en CSS. mais tout est ds la meme page.

je souhaite avoir les styles ds un fichier CSS alors je fait cela:

d'abord un fichier CSS, "test" ds le quel je colle cela:

Code : Tout sélectionner


 a.menu1 {
text-decoration:none ; /* supprime le soulignement des liens */
display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */
background-color:#CC0000 ; /* couleur du bouton */
color:white ; /* couleur du texte */
font-size:15px ; /*taille du texte */
margin:0px ; /* la marge extérieur autour des boutons est =0 (les boutons se touchent) */
padding:4px; /* la marge intérieur autour des boutons est de 4 pixels*/
border:1px solid; /* il y a une bordure solide de 1 pixel autour de chaque bouton */
border-color:red black black red ; /* couleurs des 4 cotés des bordures, dans le sens des aiguilles d'une montre */
text-align:center; /* centre le texte de chaque bouton */
width:200px } /* fixe la largeur de chaque bouton à 200 pixel */

 a.menu1:hover {
border-top:2px solid brown; /* change la couleur et l'épaisseur de la bordure haute lors du survol par la souris */
border-bottom:2px solid #CC0005 ; /* change la couleur et l'épaisseur de la bordure basse lors du survol */
padding:3px 4px 3px 4px } /* diminue la marge intérieure haute et basse du bouton survolé, pour compenser l'augmentation de la taille de la bordure */

et un doc html dans lequel je colle ca:

Code : Tout sélectionner


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr-fr">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>accueil</title>
  <link title="styles du site" rel="alternate stylesheet" href="test"
 type="text/css">
 </style>
</head>
<body>
<a class="menu1" href="">Accueil</a>
<a class="menu1" href="">Articles</a>
<a class="menu1" href="">Liens</a>
<a class="menu1" href="">Écrire</a>
</body>
</html>

mais ca ne me donne plus le menu....

pouvez vous me dire pourquoi ?

Merci !

Taltos

Ce n'est pas un rel="alternate stylesheet", mais juste un rel="stylesheet" (alternate, c'est pour une feuille de styles secondaire) ;
il reste un </style> parasite, à effacer ;
suggestion : appelle ta fds test.css, c'est plus parlant ...

Geckozone

mettre le css ds une feuille exterieur

mettre le css ds une feuille exterieur