28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de formatage de lien

Bonjour,

Mon souci est assez cocasse, mais bien énervant:
la simple déclaration du formatage d'un lien ne fonctionne pas alors que d'autres zones de lien sur ma page fonctionne sans problème et sont déclarées senesiblement de la même manière.

La page n'est pas accessible en ligne, donc je vous mets le code HTML et la feuille de style correspondante:

Code HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lorem Ipsum - Lorem Ipsum</title>
<link rel="stylesheet" type="text/css" href="edm-quiSommesNous.css">
</head>

<body>

<div id="wrapper">
	<div id="header">
		<div id="logo"><a href="accueil.html"><img src="images/logo.gif" border="0"></a></div>
		<div id="questionPriorite">
			<div id="positionQuestionPriorite">
				<ul>
					<li><a href="#">Questions de priorité</a></li>
				</ul>
			</div>
		</div>
		<div id="devenirFranchise"></div>
		<div id="outils">
			<div id="outilsPosition">
				<ul>
					<li><a href="#">Plan du site</a></li>
					<li><a href="#">Mentions légales</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</div>
		<div class="clear"></div>
	</div>

	<div id="declarationColonnes">
		<div id="positionMenuPrincipal">
			<div id="menuPrincipal">
				<ul>
					<li><a href="quiSommesNous.htm"><img src="images/menu/qui-sommes-nous.gif" border="0"></a>
						<ul>
							<li><a href="quiSommesNous-edito.htm">Menu 1</a></li>
							<li><a href="quiSommesNous-nosExperts.htm">menu 2</a></li>
							<li><a href="quiSommesNous-notreReseau.htm">Menu 3</a></li>
							<li><a href="quiSommesNous-carrieres.htm">Menu 4</a></li>
						</ul>
					</li>
					<li><a href="nosMetiers.htm"><img src="images/menu/nos-metiers.gif" border="0"></a></li>
					<li><a href="devenirFranchise.htm"><img src="images/menu/devenir-franchise.gif" border="0"></a></li>
					<li><a href="presse.htm"><img src="images/menu/presse.gif" border="0"></a></li>
				</ul>
			</div>
		</div>
		<div id="contenu">
			<div id="parcours"><a href="accueil.html">Accueil</a> &gt; <strong>Qui sommes-nous ?</strong></div>
			<div id="contenuBandeau">
				<div id="contenuBandeauTexte">
					<div id="titreBandeauTexte"> <b>Lorem Ipsum</b> is simply dummy text of the
					printing and typesetting industry.</div>

				</div>
				<div id="contenuBandeauIllustration"><img src="images/illustration-nosMetiers.jpg" width="164" height="121"></div>
				<div class="clear"></div>
			</div>
			<div id="contenuPrincipal">
				<div id="titreContenuPrincipal">&nbsp;</div>
            <p>  <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting
            	industry. Lorem Ipsum has been the industry's standard dummy text ever
            	since the 1500s, when an unknown printer took a galley of type and scrambled
            	it to make a type specimen book. It has survived not only five centuries,
            	but also the leap into electronic typesetting, remaining essentially
            	unchanged. It was popularised in the 1960s with the release of Letraset
            	sheets containing Lorem Ipsum passages, and more recently with desktop
            	publishing software like Aldus PageMaker including versions of Lorem
           	Ipsum.</p>
         </div>
		</div>
		<div class="clear"></div>
	</div>
</div>

</body>
</html>


Et la feuille de style

body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

.clear{
clear:both;
}

a:link
a:visited{
color:#000000;
text-decoration:underline;
}

a:hover
a:active{
color:#CC0033;
text-decoration:none;
}

#wrapper{
margin-left:auto;
margin-right:auto;
width:576px;
}

#header{
position:relative;
height:77px;
border-bottom:1px solid #E2D8D4;
}

#logo{
float:left;
text-align:center;
width:141px;
height:77px;
border-right:1px solid #E2D8D4;
}

/* <!-- Questions de priorité --> */
#questionPriorite{
float:left;
width:215px;
height:77px;
border-right:1px solid #E2D8D4;
}

#positionQuestionPriorite{
padding-top:52px;
}

#positionQuestionPriorite ul{
padding:0;
margin:0;
list-style-type:none;
}

#positionQuestionPriorite ul li{
background-image:url(images/puce-outils.gif);
background-repeat:no-repeat;
background-position:0px 10px;
}

#positionQuestionPriorite ul li a:link,
#positionQuestionPriorite ul li a:visited{
padding-left:8px;
font-size:9px;
text-transform:uppercase;
color:#007FAC;
text-decoration:none;
}

#positionQuestionPriorite ul li a:hover,
#positionQuestionPriorite ul li a:active{
text-decoration:underline;
}
/* <!-- /Questions de priorité --> */

#devenirFranchise{
float:left;
width:122px;
height:77px;
border-right:1px solid #E2D8D4;
text-align:center;
}

/* <!-- Outils --> */
#outils{
float:left;
}

#outilsPosition{
padding-top:35px;
}

#outilsPosition ul{
padding:0;
margin:0;
list-style-type:none;
}

#outilsPosition ul li{
background-image:url(images/puce-outils.gif);
background-repeat:no-repeat;
background-position:0px 10px;
}

#outilsPosition ul li a:link,
#outilsPosition ul li a:visited{
padding-left:8px;
font-size:9px;
color:#98989B;
text-decoration:none;
}

#outilsPosition ul li a:hover,
#outilsPosition ul li a:active{
text-decoration:underline;
}
/* <!-- /Outils --> */

#declarationColonnes{
padding-top:6px;
}

/* <!-- Menu principal --> */
#positionMenuPrincipal{
float:left;
width:100px;
padding-left:11px;
}

#menuPrincipal{
width:93px;
}

#menuPrincipal ul{
margin:0px;
padding:0px;
list-style-type:none;
}

#menuPrincipal ul ul{
margin-bottom:10px;
list-style-type:none;
}

#menuPrincipal ul ul li a:link,
#menuPrincipal ul ul li a:visited{
background-image:url(images/quiSommesNous/puce-off.gif);
background-repeat:no-repeat;
background-position:18px 4px;
line-height:10px;
padding-left:25px;
display:block;
font-size:9px;
color:#98989B;
text-decoration:none;
}

#menuPrincipal ul ul li a:hover,
#menuPrincipal ul ul li a:active{
background-image:url(images/quiSommesNous/puce-on.gif);
color:#98CFB9;
text-decoration:underline;
}

#menuPrincipal ul ul li a.select:link,
#menuPrincipal ul ul li a.select:visited,
#menuPrincipal ul ul li a.select:hover,
#menuPrincipal ul ul li a.select:active{
background-image:url(images/quiSommesNous/puce-on.gif);
background-repeat:no-repeat;
background-position:18px 4px;
line-height:10px;
padding-left:25px;
display:block;
font-size:9px;
color:#98CFB9;
text-decoration:none;
}
/* <!-- /Menu principal --> */

/* <!-- Paramétrage contenu --> */
#contenu{
float:left;
width:456px;
padding-left:7px;
border-left:2px solid #E2D8D4;
}

#contenuBandeau{
height:121px;
background-color:#98CFB9;
}

#contenuBandeauTexte{
float:left;
width:260px;
padding-left:12px;
padding-top:40px;
font-size:10px;
color:#FFFFFF;
}

#titreBandeauTexte{
color:#007FAC;
font-size:15px;
font-weight:bold;
text-transform:uppercase;
}

#contenuBandeauIllustration{
float:right;
padding-right:10px;
}

#contenuPrincipal{
padding:10px;
color:#98989B;
text-align:justify;
}

#titreContenuPrincipal{
color:#98CFB9;
font-weight:bold;
}
/* <!-- /Paramétrage contenu --> */

/* <!-- Paramétrage parcours --> */
#parcours{
color:#98989B;
margin-bottom:5px;
}

#parcours a:link
#parcours a:visited{
color:#98989B;
text-decoration:underline;
}

#parcours a:hover
#parcours a:active{
color:#98989B;
text-decoration:none;
}
/* <!-- /Paramétrage parcours --> */


La partie qui ne "fonctionne" pas correspond au parcours (en bas dans la feuille de style).
Le lien s'affiche comme si aucun style n'était attribué, ce qui n'est pas le cas.
Je sèche et ne comprends pas pourquoi, mais j'imagine qu'une erreur s'est glissée quelque part...

Merci d'avance pour votre aide
Modifié par falatop (27 Sep 2007 - 12:11)
Hello,
Il semble que tu aies un petit souci de syntaxe.
En effet il te manque une virgule entre tes 2 styles :
#parcours a:link, #parcours a:visited{
color:#98989B;
text-decoration:underline;
}
#parcours a:hover, #parcours a:active{
color:#98989B;
text-decoration:none;
}
Et voilà... encore une erreur d'inattention !! Smiley rolleyes
Bah forcément, maintenant, ça fonctionne beaucoup mieux !

existe-t-il des logiciels permettant de vérifier la syntaxe CSS pour aider les étourdis comme moi ?

En tout cas merci beaucoup ! Smiley biggrin
Sujet clos
Aller à