Bonjour,
Cela fait plusieurs jours que j'essaye de résoudre ce problème sans succès. Voici la page en question : accueil
Comme vous le pouvez le voir, le drapeau fr prend le style des boutons du menu (cliquez sur le drapeau pour le voir). voici le code de ma page et du css (versions allégées) :
L'accueil :
Le CSS :
Je précise que si j'enlève le lien sur le drapeau fr, ce dernier se présente bien (comme l'anglais). Mais pas moyen de comprendre pourquoi, j'ai pourtant l'impression d'avoir bien détaillé mes styles (body, id, etc à chaque ligne)...
En espérant que vous soyez plus doués que moi... Merci de votre aide.
Jarodd
Modifié par Jarodd (11 Nov 2005 - 13:06)
Cela fait plusieurs jours que j'essaye de résoudre ce problème sans succès. Voici la page en question : accueil
Comme vous le pouvez le voir, le drapeau fr prend le style des boutons du menu (cliquez sur le drapeau pour le voir). voici le code de ma page et du css (versions allégées) :
L'accueil :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<link href="style/styles.css" rel="stylesheet" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="test" />
<meta name="robots" content="index,follow" />
<meta name="description" content="test" />
<meta name="language" content="fr" />
<meta http-equiv="content-language" content="fr" />
</head>
<body>
<div id="page">
<div id="header">
<p class="header_titre">Test</p> </div>
<div class="barre_bleue"></div>
<div id="corps_index">
<p class="index_expertise_fr">FR</p>
<p class="index_fr">
<a href="page.php">
<img src="media/images/flag_fr.gif" alt="FR" />
</a>
</p>
<p class="index_logo">
<img src="media/images/logo.png" alt="logo" />
</p>
<p class="index_gb">
<!--<a href="#">-->
<img src="media/images/flag_gb.gif" alt="GB" />
<!--</a>-->
</p>
<p class="index_expertise_gb">GB</p>
</div>
<div class="barre_bleue" />
<div id="footer" />
</div>
</body>
</html>Le CSS :
body {
background: rgb(106, 106, 107); /*couleur fond*/
font-family: verdana, arial, sans-serif;
font-size: 11px; /*laisser à 11, sinon décalage menus*/
/* pour changer taille texte, appliquer sur <p> */
color: rgb(255, 255, 255); /*couleur texte + menus 2, 3, 4*/
margin: 0;
padding: 0;
}
body #page {
position:absolute;
left: 50%;
top: 50%;
width: 980px;
height: 540px;
margin-top: -290px; /* moitié de la hauteur */
margin-left: -490px; /* moitié de la largeur */
/* background-color: ; */
background-image: url(../media/images/societe_fond.png);
color: black;
}
body #page #header {
width: 980px;
height: 80px;
background-image: url(../media/images/header.png);
background-repeat: repeat-y;
}
body #page #corps {
float: top;
width: 950px;
height: 343px;
padding: 30px 15px 15px 15px; /* H D B G */
/* background-color: ; */
}
body #page #corps_index { /* UNIQUEMENT pour page index */
background-image: url(../media/images/header.png);
background-repeat: repeat-y;
float: top;
width: 970px;
height: 370px;
padding: 30px 5px 5px 5px;
}
body #page #footer {
width: 980px;
height: 50px;
background-image: url(../media/images/header.png);
background-repeat: repeat-y;
}
table, td {
border: 0px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
/* background-color: ; */
}
/********************* MENU ************************/
body #page div.menu ul {
list-style-type: none;
width: 90%; /* précision pour Opera */
}
body #page div.menu ul li {
float: left;
}
body #page div.menu ul li a, a:visited {
margin: 0 2px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000000;
background: #ffffff;
}
body #page div.menu .menu li a:hover {
background: #cccccc;
}
body #page div.menu .menu li a:active {
background: gray;
border: 1px solid gray;
color: #ffffff;
}
/********************* FIN MENU ************************/
body #page #corps_index .index_logo {
position:absolute;
width: 229px;
height: 66px;
margin-top: 120px;
margin-left: 350px;
color: black;
}
body #page #corps_index p.index_fr {
position:absolute;
width: 30px;
height: 20px;
margin-top: 140px;
margin-left: 300px;
}
body #page #corps_index p.index_fr a {
text-decoration: none;
}
body #page #corps_index p.index_fr a img {
border: 0;
}
body #page #corps_index p.index_gb {
position:absolute;
width: 30px;
height: 20px;
margin-top: 140px;
margin-left: 600px;
border: 0px;
text-decoration: none;
/* background-color: ; */
}
body #page #corps_index p.index_gb a {
text-decoration: none;
}
body #page #corps_index p.index_gb a img {
border: 0;
}
body #page #corps_index p.index_expertise_fr {
font-size: 14px;
font-weight: bold;
position:absolute;
margin-top: 40px;
margin-left: 260px;
}
body #page #corps_index p.index_expertise_gb {
font-weight: bold;
position:absolute;
margin-top: 250px;
margin-left: 500px;
}
body #page #header p.header_titre{
font-size: 14px;
float: left;
text-align: left;
padding-top: 20px;
padding-left: 30px;
font-weight: bold;
color: rgb(160, 160, 200);
}
body #page #header p.barre_bleue {
float: top;
width: 980px;
height: 5px;
background-image: url(../media/images/barre_bleue.png);
background-repeat: repeat-y;
}
body #page #header p.footer_expertise {
color: black;
font-weight: bold;
font-style: italic;
font-size: 13px;
margin-top: 10px;
margin-right: 0px;
text-align: right;
vertical-align: middle;
float: right;
}Je précise que si j'enlève le lien sur le drapeau fr, ce dernier se présente bien (comme l'anglais). Mais pas moyen de comprendre pourquoi, j'ai pourtant l'impression d'avoir bien détaillé mes styles (body, id, etc à chaque ligne)...
En espérant que vous soyez plus doués que moi... Merci de votre aide.
Jarodd
Modifié par Jarodd (11 Nov 2005 - 13:06)
