Problème CSS sur liens html syntaxe sélecteurs [resolu]

Question

lennynero256

26 Jul 2008 à 18:31

Bonsoir,
je sollicite votre aide pour un petit problème, mais qui m'occupe depuis plusieurs heures sans résultat. Plutôt qu'un long discours, allez sur la page :

www.philippedechaux.com

j'ai placé la page qui me pose souci à cette adresse.

Dans le footer de cette page, il y a 2 liens : le problème est que ces liens récupèrent la mise en forme CSS des liens image qui sont dans un autre div. J'ai cherché dans mon code d'où pouvait venir ce résultat, mais là je sèche ! Je suis encore débutant en CSS, donc si l'un des membres du forum voulait bien jeter un coup d'oeil et me donner quelques conseils... Merci d'avance.

Lenny
Modifié par lennynero256 (28 Jul 2008 - 12:25)

niuxe

Modérateur

26 Jul 2008 à 20:25

Salut et bienvenue sur le forum,

Le premier lien me parait un peut faux :
- http//:
Essai de faire ceci plutôt :
-http://

Pour le reste, je pense qu'il serait préférable de mettre sur leforum ta css et ton code source html.
Pour ma part, je n'ai pas vraiment envie d'aller télécharger ces dernières.

++

PS : Attention aux fautes d'orthographe et à la cohérence de ta charte graphique !
Modifié par Nolem (26 Jul 2008 - 20:26)

Igor

26 Jul 2008 à 21:01

Bonjour,

Pour conserver une bonne lisibilité des messages sur le forum et ne pas le déformer, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.

Igor

26 Jul 2008 à 21:08

Que de vilaines pratiques Smiley eek

h1{
display:none;
}

h2{
display:none;
}

lennynero256

26 Jul 2008 à 21:08

Désolé pour cet impair, voici le code source :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MEOSE, Master professionnel, management et &eacute;valuation des organisations de sant&eacute;, universit&eacute; de Bourgogne</title>
<meta name="keywords" content="Dijon, facult&eacute;, sciences &eacute;conomiques, universit&eacute;, Bourgogne, universit&eacute; de Bourgogne, DESS, management, &eacute;valuation, organisations de sant&eacute;, &eacute;conomie de la sant&eacute;, &eacute;valuation &eacute;conomique, creafact, experts, sanitaire et social, sant&eacute;, sanitaire, social, formation, intervenants, professionnalisation, &eacute;conomie de la sant&eacute; meose">
<meta http-equiv="Content-language" content="fr">
<meta name="copyright" content="Master Meose">
<meta name="expires" content="never">
<meta name="rating" content="general">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="30 days">
<link href="styles_meose_accueil.css" rel="stylesheet" type="text/css" />
</head>

<body>

<!-- début conteneur-->
<div id="conteneur">

<h1>Master Professionnel Management et &eacute;valuation des organisations de sant&eacute;: Formation des experts pour &eacute;valuer les actions de sant&eacute; et piloter les organisations et les projets du secteur sanitaire et social.</h1>

<!-- début bandeau-->
<div id="bandeau"><img src="images/bandeau_haut.png" alt="bandeau haut MEOSE, master professionnel" accesskey="a" tabindex="1"/>
</div> <!-- fin bandeau -->

<!-- début bulle-->
<div id="bulle">
<!-- début conteneur txt bulle 1-->
<div id="conteneur_txt_bulle_1">
<!-- début texte bulle 1 -->
<p id="txt_bulle_1">Bienvenue !<br />Le message de Christine Peyron, Responsable de la formation</p>
<!-- fin texte bulle 1 -->
</div> <!-- fin conteneur txt bulle 1-->
<!-- début conteneur txt bulle 2-->
<div id="conteneur_txt_bulle_2">
<!-- début texte bulle 2 -->
<p id="txt_bulle_2">Depuis 1999, le Master Professionnel MEOSE accueille des &eacute;tudiants en formation initiale, des professionnels en formation continue et forme des experts de l’&eacute;valuation &eacute;conomique des actions et des programmes de sant&eacute;, du pilotage des projets et des organisations du secteur sanitaire et m&eacute;dico-social. Ces comp&eacute;tences sont aujourd’hui largement recherch&eacute;es dans le secteur de la sant&eacute;.</p>
<!-- fin texte bulle 2 -->
</div> <!-- fin conteneur txt bulle 2-->
</div> <!-- fin bulle -->

<img src="images/etudiants.png" alt="acces &eacute;tudiants" accesskey="b" tabindex="2"/>
<img src="images/pros.png" alt="acces pros" accesskey="c" tabindex="3"/>

<!-- début txt etudiants -->
<div id="etudiants">
<p id="txt_etudiants">Vous recherchez une formation professionnelle,<br />vous avez besoin d'informations sur le master MEOSE ?</p>
</div> <!-- fin txt étudiants -->

<!-- début txt pros -->
<div id="pros">
<p id="txt_pros">Professionnels de la sant&eacute; &aacute; la recherche<br />d'une formation dipl&ocirc;mante, d'un sp&eacute;cialiste<br />de l'&eacute;conomie de la sant&eacute; ou d'un stagiaire ?</p>
</div> <!-- fin txt pros -->
<!-- début conteneur acces-->
<div id="acces">
<!-- début acces étudiants -->
<div id="acces_e">
<a href="#"></a>
</div> <!-- fin acces étudiants -->
<!-- début acces pros -->
<div id="acces_p">
<a href="#"></a>
</div> <!-- fin acces pros -->
</div> <!-- fin conteneur acces -->
<!-- début footer -->
<div id="footer">
<p id="txt_footer">Cr&eacute;ation <a href="http://www.creafact.fr">CREAFACT</a>, atelier Web & Print - <a href="legals.html">Mentions légales</a></p>

</div> <!-- fin footer-->

</div> <!-- fin conteneur -->
</body>
</html>





-------------------------------CSS----------------------------

@charset "utf-8";
/* CSS Document */
/* Styles CSS SYGMAE pour Firefox et Opera*/





/****************************************************ensemble du document*************************************************/
*{
margin:0; /*marges*/
padding:0; /*marges internes*/
}

/****************************************************éléments html********************************************************/
body{
margin:0px;
padding:0px;
background-color:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
}

img{
float:left;
overflow:hidden;
margin:0px;
padding:0px;
border:0px;
}

a img{
border-style:none;
float:left;
overflow:hidden;
margin:0px;
padding:0px;
border:0px;
}

h1{
display:none;
}

h2{
display:none;
}

ul{
margin-top:20px;
margin-left:15px;
margin-right:15px;
}

li{
/*font-size:0.5em;
font-weight:bold;*/
text-align:justify;
line-height:0.6em;
margin-bottom:10px;
list-style-image:url(image/puce_actu.gif);
list-style-position:inside;
}

a{
text-decoration:none;
outline:none;
font-size:0.6em;
color:#333333;
}

a:link{
text-decoration:none;
outline:none;
font-size:0.6em;
color:#333333;
}

a:visited{
text-decoration:none;
outline:none;
font-size:0.6em;
color:#333333;
}

a:hover, a:focus{
color:#85D633;
text-decoration:none;
outline:none;
font-size:0.6em;
color:#85d633;
}

a:active{
text-decoration:none;
outline:none;
font-size:0.6em;
color:#333333;
}

/************************************************************ID****************************************************************/
#conteneur{
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
/********************************TOP****************************************************************/
#bandeau{
float:left;
width:800px;
height:201px;
}

#bulle{
background-image:url(images/bulle.png);
float:left;
width:800px;
height:143px;
}

#conteneur_txt_bulle_1{
/*background-color:#00FFCC;*/
width:300px;
height:143px;
float:left;
}

#txt_bulle_1{
/*background-color:#00FF33;*/
line-height:1.2em;
font-size:0.7em;
text-align:left;
margin-top:11px;
margin-left:50px;
margin-right:40px;
}

#conteneur_txt_bulle_2{
width:500px;
height:143px;
float:left;
}

#txt_bulle_2{
line-height:1.2em;
font-size:0.7em;
color:#FFFFFF;
text-align:left;
margin-top:30px;
margin-left:35px;
margin-right:65px;
}

#etudiants{
background-color:#2d344d;
width:400px;
height:50px;
float:left;
}

#txt_etudiants{
line-height:1.2em;
font-size:0.7em;
color:#FFFFFF;
text-align:left;
margin-top:5px;
margin-left:40px;
margin-right:0px;
}

#pros{
background-color:#2d344d;
width:400px;
height:50px;
float:left;
}

#txt_pros{
line-height:1.2em;
font-size:0.7em;
color:#FFFFFF;
text-align:left;
margin-top:5px;
margin-left:80px;
margin-right:0px;
}

#acces{
float:left;
background-color:#2d344d;
width:800px;
height:auto;
}

#acces_e{
float:left;
width:400px;
height:274px;
}

#acces_p{
float:left;
width:400px;
height:274px;
}

#acces_e a{
display:block;
text-decoration:none;
background-image:url(images/visuel_etu.png);
background-repeat:no-repeat;
float:left;
width:400px;
height:274px;
}

#acces_e a:link, a:visited{
display:block;
background-image:url(images/visuel_etu.png);
background-repeat:no-repeat;
text-decoration:none;
float:left;
width:400px;
height:274px;
}

#acces_e a:hover, a:focus{
display:block;
background-image:url(images/visuel_etu.png);
background-position:0% -274px;
background-repeat:no-repeat;
text-decoration:none;
outline:none;
float:left;
width:400px;
height:274px;
}

#acces_e a:active{
text-decoration:none;
display:block;
background-image:url(images/visuel_etu.png);
background-repeat:no-repeat;
float:left;
width:400px;
height:274px;
}


#acces_p a{
display:block;
text-decoration:none;
background-image:url(images/visuel_pros.png);
background-repeat:no-repeat;
float:left;
width:400px;
height:274px;
}

#acces_p a:link, a:visited{
display:block;
background-image:url(images/visuel_pros.png);
background-repeat:no-repeat;
text-decoration:none;
float:left;
width:400px;
height:274px;
}

#acces_p a:hover, a:focus{
display:block;
background-image:url(images/visuel_pros.png);
background-position:0% -274px;
background-repeat:no-repeat;
text-decoration:none;
outline:none;
float:left;
width:400px;
height:274px;
}

#acces_p a:active{
text-decoration:none;
display:block;
background-image:url(images/visuel_pros.png);
background-repeat:no-repeat;
float:left;
width:400px;
height:274px;
}


#footer{
float:left;
width:800px;
height:49px;
background-image:url(images/fond_footer_accueil.png);
}

#txt_footer{
float:left;
width:800px;
height:auto;
padding-top:15px;
font-size:0.55em;
font-stretch:extra-expanded;
text-align:center;
color:#FFFFFF;
}

#txt_footer a{
color:#ffffff;
font-size:inherit;
}

#txt_footer a:link, a:visited{
color:#ffffff;
font-size:inherit;
}

#txt_footer a:hover, a:focus{
color:#FFFF00;
font-size:inherit;
}

#txt_footer a:active{
color:#ffffff;
font-size:inherit;
}

Modifié par Igor (26 Jul 2008 - 21:10)

fvsch

27 Jul 2008 à 00:57

Bonjour,

Tu as des sélecteurs CSS erronés. Tu as écrit:

#acces_e a:link, a:visited {machin}

alors que tu aurais dû écrire:

#acces_e a:link, #acces_e a:visited {machin}

En effet, le premier code est vu ainsi par les navigateurs:

#acces_e a:link {machin}
a:visited {machin}

Et cette erreur est reproduite plusieurs fois dans ta feuille de styles. Smiley cligne

Je crois que tu n'as pas bien saisi le fonctionnement de la virgule dans les sélecteurs CSS. Une virgule sépare deux sélecteurs, et pas deux bouts de sélecteur qui auraient une partie commune (où serait cette partie commune, d'ailleurs, dans un sélecteur du type body.home #header + ul > li > a {}, par exemple?).
Modifié par Florent V. (27 Jul 2008 - 00:58)

lennynero256

28 Jul 2008 à 12:19

Bonjour Florent, merci beaucoup pour ces explications qui ont bien réglé ce problème. Grâce à toi, j'ai bien compris la syntaxe des sélecteurs et le rôle de la virgule. Encore merci, bonne journée, Lenny

lennynero256

28 Jul 2008 à 12:30

Igor a écrit :
Que de vilaines pratiques
h1{
display:none;
}

h2{
display:none;
}

Bonjour Igor,
Désolé mais je ne me suis pas encore penché sur les titres, mon html est encore en travaux Smiley cligne

Je dois avouer que h1 et ses amis ne sont pas encore très clairs à mes yeux. je vais de ce pas me documenter sur le site, si toi même tu as un lien sympas sur le sujet, je t'en remercie par avance, cdlt, lenny

lennynero256

28 Jul 2008 à 14:03

Rebonjour Igor,

j'ai modifié mon code html pour mieux intégrer les balises titres. Peux tu me donner ton avis stp ?

Sujet clos

CSS et mise en forme, CSS3

Problème CSS sur liens html syntaxe sélecteurs [resolu]