28220 sujets

CSS et mise en forme, CSS3

Comprendre le fonctionnement du css

Bonjours;
On m'a donné une partie de mon code css, qui marche tres
Ce qui me turlupine c'est que je ne comprend pas pourquoi son code fonctionne et pas le miens !

J'ai réellement l'impression que le css est incompréhensible !!!

voici son code :
a écrit :
/* debut du code des liens du menu */
ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

li
{
display: block;
padding: 0px;
height: 40px;
width: 100%;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family: "Gill sans", Times New Roman, Helvetica, sans-serif;
font-size: 14px;
text-decoration:none;
color: red;
}

li a:hover
{
text-decoration:none;
color: #FF00FF;
text-align:center;
font-family: "Gill sans", Times New Roman, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
}

li a:link
{
text-decoration:none;
color: white;
text-align: center;
}

li a:visited
{
text-decoration:none;
color: white;
text-align: center;
}

/* fin du code des liens du menu */


Voici un essai de code qui ne fonctionne pas :
"mon code" a écrit :
/* debut du code des liens du menu */
ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

li
{
display: block;
padding: 0px;
height: 40px;
width: 100%;
text-align: center;
font-family: "Gill sans", Times New Roman, Helvetica, sans-serif;
font-size: 14px;
text-decoration:none;
color: red;
}


li a:hover
{
display: block;
padding: 0px;
height: 40px;
width: 100%;
text-align: center;
font-family: "Gill sans", Times New Roman, Helvetica, sans-serif;
font-size: 16px;
text-decoration:none;
color: yellow;
}

li a:active
{
display: block;
padding: 0px;
height: 40px;
width: 100%;
text-align: center;
font-family: "Gill sans", Times New Roman, Helvetica, sans-serif;
font-size: 16px;
text-decoration:none;
color: yellow;
}

/* fin du code des liens du menu */


Rien de mon code n'est pris en compte sauf le posissionnement des blocks. le text-decoration n'est pas pris en compte et les liens du menu reste des simples liens bleu classique sans effect de style...
La seule chose qui est prise en compte c'est la color des liens quand on clique dessus !

Quelqu'un a une idée ?

Autre chose meme dans son code des propriétés ne sont pas pris en compte.
Color par exemple ne sert a rien ! aucune des couleurs fonctionne. J'ai tout les leins qui sont en blanc et qui reste blanc meme qd le pointeur de la souris est dessus. Bref si quelqu'un a une idée pour ca auss !?
Modifié par Mage-Li (21 Jan 2006 - 20:04)
Dans mon code ( la citation 2 )
J'ai mis a:hover pour le survol et a:active qd on clique sur le lien.
Je ne vois pas ce que tu veux dire.
Bonjour Mage-Li et bienvenue ici.

Sans le HTML auquel ton CSS s'applique, difficile de reproduire ton problème Smiley confus

Note : Les noms de familles contenant des espaces doivent être mis entre guillemets. => "Times New Roman"
Modifié par Stephan (21 Jan 2006 - 20:13)
Voici mon XHTML
"XHTML" a écrit :
<div id="corps">
<div class="menu">
<ul>
<li><a href="http://sadhanaforum.celeonet.fr/presentation.html">Presentation</a><br/></li>
<li><a href="http://sadhanaforum.celeonet.fr/forum01/">Acceder au<br/>Forum</a><br/></li>
<li><a href="http://sadhanaforum.celeonet.fr/pagestuto/sommaire.html">Fonctionnement<br/> d'un Forum</a><br/></li>
<li><a href="partenaires.html">Partenaires</a><br/></li>
<li><a href="partenaires.html">Me contacter</a><br/></li>
</ul>
</div>
Administrateur
Mage-Li a écrit :
Voici mon XHTML

Il serait préférable d'utiliser le bouton CODE pour tes codes, plutôt que le bouton CITER Smiley cligne
Oups dsl pour le bouton code j'avais pas fais gaffe qu'il existé.

Merci pour le lien clb56. Son code est effectivement pas dans l'ordre, par contre le miens respecte cet ordre et pourtant toutes les propriétés qui serve a faire un effect de style sur le texte ne fonctionne pas. J'ai testé en modifiant les places de certaine propriété mais toujours le meme résultat.
Par contre avec son code les propriété qui aplique un effect de style sur les liens fonctionne.

Je ne sais pas d'ou ca peut venir...
Bonjour, belle épée.... Smiley ravi


Pour le changement de style sur un ancre, tout se joue sur les pseudo-classes suivantes: 


li a:hover
{
[b]/*Style de l'ancre lorsque pointeur est dessus*/[/b]
font-family: "Gill sans", "Times New Roman", Helvetica, sans-serif;
font-size: 16px;
text-decoration:none;
color: Yellow;
}

-----------------------------------------------------------------
li a:link
{
[b]/*Style de l'ancre au départ*/[/b]
font-family: "Gill sans", "Times New Roman", Helvetica, sans-serif;
font-size: 12px;
text-decoration:none;
color: red;
}
-----------------------------------------------------------------

li a:visited
{
[b]/*Style de l'ancre lorsque le lien a été visité*/[/b]
font-family: "Gill sans", "Times New Roman", Helvetica, sans-serif;
font-size: 12px;
text-decoration:none;
color: blue;
}

li a:active
{
[b]/*Style de l'ancre lors de la sélection de ce dernier*/[/b]
text-align: center;
font-family: "Gill sans", "Times New Roman", Helvetica, sans-serif;
font-size: 16px;
text-decoration:none;
color: green;
}


Si je me mets dans ta peau, je pense que ton erreur aura été de prendre le sélecteur li comme le style de départ de ton ancre.
Modifié par Bastou (22 Feb 2006 - 20:00)
Sujet clos
Aller à