Bonjour à tous,
J'ai le livre CSS2, pratique du design Web.
J'ai suivi le gabarit "gabarit à deux colones et de largeur fixe" pour réaliser un site. J'ai rajouté quelque style pour l'intérieur de mes pages.
Mes pages sont en PHP appelés via des includes.
Mon problème survient sous IE6.
Lorsque je survol un lien à gauche, il affiche mon style sur le titre d'une rubrique de ma zone contenu (le problème se situe sur le h4 qui ne s'affiche pas sous IE).
Mais pour plus de compréhension, connectez-vous à l'adresse suivante :
www.cpam37.fr/mediadoc, puis cliquez sur un lien à gauche.
Sous firefox, vous avez le comportement normal souhaité.
Et sous IE, vous constaterez le bug.
Voici mon CSS :
La page qui s'ouvre : portail.php est constitué de menu.php pour les liens à gauche. Cette page ne contient que des "<ul><li></li>".
Mais voicie le code de la page portail.php
Merci de l'aide que vous pourrez m'apporter.
Cordialement,
Modifié par nicoweb37 (06 Aug 2007 - 12:24)
J'ai le livre CSS2, pratique du design Web.
J'ai suivi le gabarit "gabarit à deux colones et de largeur fixe" pour réaliser un site. J'ai rajouté quelque style pour l'intérieur de mes pages.
Mes pages sont en PHP appelés via des includes.
Mon problème survient sous IE6.
Lorsque je survol un lien à gauche, il affiche mon style sur le titre d'une rubrique de ma zone contenu (le problème se situe sur le h4 qui ne s'affiche pas sous IE).
Mais pour plus de compréhension, connectez-vous à l'adresse suivante :
www.cpam37.fr/mediadoc, puis cliquez sur un lien à gauche.
Sous firefox, vous avez le comportement normal souhaité.
Et sous IE, vous constaterez le bug.
Voici mon CSS :
/* CSS pour le body */
html, body {
margin: 0; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
padding:0;
background: #ddd url(../images/html.png);
}
/* CSS pour les balises p */
p {
margin:0 0 1em 0;
}
/* Entête de la page */
h1 {
background: #7fcf2e url(../images/ameldoc.jpg) no-repeat;
color: #fff;
height: 79px;
width: 760px;
margin: 0;
}
/* Corps de la page */
#global {
/*margin: 0 auto;*/
width:760px;
background-color : #fff;
position:relative;
margin-left:auto;
margin-right:auto;
text-align: left; /* on rétablit l'alignement normal du texte */
}
/* Bloc Gauche */
#gauche {
float: left;
width: 200px;
background-color: #fff;
}
/* Balise p pour le bloc gauche */
#gauche p {
margin-top : 0 0 0 1em;
color: #0F67AF;
font-weight: bold;
letter-spacing: 1px;
}
/* Balise ul pour le bloc gauche*/
#gauche ul {
margin: 0;
padding: 0;
}
/* Balise li pour le bloc gauche*/
#gauche li {
margin: 0;
padding: 0.25em;
line-height: 1.5em;
list-style-type:none;
}
/* Balise li a pour le bloc gauche*/
#gauche li a {
text-decoration: none;
color: #0956AE;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
padding-left: 5px;
border-left: 4px solid #0956AE;
letter-spacing: 1px;
}
/* Balise li a hover (survol souris) pour le bloc gauche*/
#gauche li a:hover {
color: #29B80B;
border-left: 4px solid #29B80B;
border-bottom : 1px solid #29B80B;
}
/* Balise li a current pour marquer le lien après clic */
#gauche li a#current {
color: #29B80B;
border-left: 4px solid #29B80B;
border-bottom : 1px solid #29B80B;
}
/* CSS pour le contenu */
#contenu {
margin-left: 200px;
background-color: #fff;
}
/* CSS pour le p du contenu */
#contenu p {
margin: 0 0 0 1em;
}
#contenu h4 {
background-color: #ECEED6;
border-bottom: 1px dotted #0956AE;
font-variant: small-caps;
color: #0956AE;
padding: 3px;
letter-spacing: 1px;
margin-right: 5px;
}
/* CSS pour le p du contenu */
#contenu ul {
margin: 0 0 1em 0;
}
/* Balise li a pour le contenu */
#contenu li a {
color: #0F67AF;
text-decoration: none;
}
/* Balise li a hover (survol souris) pour le contenu */
#contenu li a:hover {
color: #fff;
display: block;
text-decoration: none;
background-color: #96C84B;
}
/* CSS pour le footer */
#footer {
clear:both;
bottom: 0;
width: 756px;
background-color: #0956AE;
margin: 0;
padding: 2px 2px 2px 2px;
}
/* Balise a pour le footer */
#footer a{
font-weight:bold;
color: #ffffff;
text-decoration: none;
}
#ombredeco {
clear:both;
background:url(../images/bas_home2.gif) no-repeat;
height:14px;
margin:0px;
padding:0px;
text-align:right;
}
La page qui s'ouvre : portail.php est constitué de menu.php pour les liens à gauche. Cette page ne contient que des "<ul><li></li>".
Mais voicie le code de la page portail.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="../css/design.css" />
<link rel="stylesheet" type="text/css" href="../css/menu.css" />
<link rel="stylesheet" type="text/css" href="../css/deco.css" />
<link rel="stylesheet" href="../css/dyncalendar.css" type="text/css" media="screen">
<script src="../javascript/browsersniffer.js" type="text/javascript" language="javascript"></script>
<script src="../javascript/dyncalendar.js" type="text/javascript" language="javascript"></script>
<script src="../javascript/processus.js" type="text/javascript"></script>
<script src="../javascript/fonctions.js" type="text/javascript" language="javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
<title>.:: Mediadoc ::.</title>
</head>
<body>
<div id="global">
<!-- Entête !-->
<h1></h1>
<!-- Fin Entête !-->
<!-- Insertion du menu principal horizontal !-->
<?php
include("menu.php");
?>
<!-- Fin du div menu principal !-->
<!-- Insertion du menu principal vertical !-->
<div id="gauche">
<p>
<?php
include("gauche.php");
?>
</p>
</div>
<!-- Fin du div menu vertical !-->
<!-- Insertion des pages dans le contenu !-->
<div id="contenu">
<p>
<?php
//Test que peux prendre $page pour inclure le bon fichier à chaque fois.
if (!isset($_GET[page])) {
include ("news_generale.php");
}else{
include ("$_GET[page]".".php");
}
?>
</p>
</div>
<!-- Fin insertion des pages dans le contenu !-->
<div id="footer">
<a href='#'>Informations légales</a> |
<a href='#'>Copyright </a>
</div>
<div id="ombredeco"></div>
</div>
</body>
</html>
<?php
mysql_close();
?>
Merci de l'aide que vous pourrez m'apporter.
Cordialement,
Modifié par nicoweb37 (06 Aug 2007 - 12:24)
