Bonjour,
Je développe actuellement un site internet mais j'ai quelques petits problèmes de compatibilités avec IE6.
En effet, le header doit rester en haut de page, et le footer en bas de page sans changer de taille. Tandis que la partie entre, doit être extensible selon la résolution et avoir une scrollbar dans le cas où la résolution ne suffirai pas à afficher le contenu.
Voici l'exemple d'une page du site :
et le CSS qui l'accompagne :
Ces codes fonctionnent parfaitement sous IE7 et Firefox, mais sur IE6, le contenu de la page continu derrière le footer et sous le bottom (y compris la scrollbar), mais il démarre bien sous le header.
Vous auriez une solution, j'ai fait des recherches sur Alsacréations mais je n'ai pas trouvé de cas similaire.
Modifié par Zetura (01 Oct 2007 - 16:35)
Je développe actuellement un site internet mais j'ai quelques petits problèmes de compatibilités avec IE6.
En effet, le header doit rester en haut de page, et le footer en bas de page sans changer de taille. Tandis que la partie entre, doit être extensible selon la résolution et avoir une scrollbar dans le cas où la résolution ne suffirai pas à afficher le contenu.
Voici l'exemple d'une page du site :
<!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">
<head>
<title>Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="site" href="site.css" />
</head>
<body>
<div id="conteneur">
<div id="header"><a href="index.html" title="Accueil"><img src="images/logo-site.gif" alt="site" title="Site" /></a></div>
<div id="menu">
<ul>
<li><a class="activentp" id="entreprise" title="L'entreprise" href="site-entreprise.html">Entreprise</a></li>
<li><a id="location" title="Location" href="site-location.html">Location</a></li>
<li><a id="vente" title="Vente" href="site-vente.html">Vente</a></li>
<li><a id="contact" title="Nous contacter" href="site-contact.php">Contact</a></li>
</ul>
</div>
<div id="corps">
<div id="bandeau_ent"><img src="images/entreprise_bandeau.jpg" alt="bandeau" /></div>
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
Contenu
</div>
<div id="footer"><div id="logo-livraison"><img src="images/site-livraison.gif" alt="livraison" title="Livraison 48H" /></div></div>
</div>
</body>
</html>et le CSS qui l'accompagne :
@charset "utf-8";
/* CSS Document */
/* //////// BASE //////// */
html,body
{
/* Police */
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
text-align: left;
/* Fond */
background-color: #000000;
scrollbar-face-color: #000000;
scrollbar-shadow-color: #CCCCCC;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #FFFFFF;
overflow: hidden;
height: 100%;
}
*
{
padding: 0;
margin: 0;
}
img
{
border-style: none;
}
a
{
text-decoration: none;
color: #FFFFFF;
}
/* //////// MENU ET LIENS //////// */
ul, li /* Liste en menu */
{
list-style-type: none;
margin: 0;
padding: 0;
}
ul /* Positionnement du menu */
{
position: absolute;
background: transparent url(images/menu_h.jpg) top left no-repeat;
height: 36px;
width: 895px;
top: 150px;
}
li /* Affichage en ligne */
{
float: left;
}
a#entreprise /* Au repos */
{
display: block;
height: 36px;
width: 198px;
}
a#location /* Au repos */
{
display: block;
height: 36px;
width: 240px;
}
a#vente /* Au repos */
{
display: block;
height: 36px;
width: 241px;
}
a#contact /* Au repos */
{
display: block;
height: 36px;
width: 216px;
}
a#entreprise:hover /* En over */
{
background: url(images/menu_h.jpg) top left no-repeat;
background-position: 0px -36px;
}
a#location:hover /* En over */
{
background: url(images/menu_h.jpg) top left no-repeat;
background-position: -198px -36px;
}
a#vente:hover /* En over */
{
background: url(images/menu_h.jpg) top left no-repeat;
background-position: -438px -36px;
}
a#contact:hover /* En over */
{
background: url(images/menu_h.jpg) top left no-repeat;
background-position: -679px -36px;
}
a.activentp /* Activé sur page */
{
background: url(images/menu_h.jpg) top left no-repeat;
background-position: 0px -36px;
}
a.activelctn /* Activé sur page */
{
background: url(images/menu_h.jpg) top left no-repeat;
background-position: -198px -36px;
}
a.activevnt /* Activé sur page */
{
background: url(images/menu_h.jpg) top left no-repeat;
background-position: -438px -36px;
}
a.activecntct /* Activé sur page */
{
background: url(images/menu_h.jpg) top left no-repeat;
background-position: -679px -36px;
}
#menu a /* On cache le texte */
{
text-indent: -3000px;
}
/* //////// MISE EN PAGE //////// */
#conteneur /* Toutes pages */
{
/* Positionnement contenu */
position: absolute;
width: 895px;
height: 100%;
/* Couleur */
background-color: #000000;
border-left: solid 1px #f8951e;
border-right: solid 1px #f8951e;
/* Centrage */
left: 50%;
margin-left: -447px;
}
#header /* Toutes pages */
{
margin-top: 20px;
text-align: center;
}
#corps /* Toutes pages */
{
position: absolute;
top: 200px;
width: 895px;
bottom: 60px;
overflow: auto;
height: auto !important;
height: 350px;
}
#footer /* Toutes pages */
{
/* Positionnement Bas */
position: absolute;
bottom: -1px;
height: 60px;
background-color: #000000;
width: 100%;
/* Centré */
text-align: center;
}Ces codes fonctionnent parfaitement sous IE7 et Firefox, mais sur IE6, le contenu de la page continu derrière le footer et sous le bottom (y compris la scrollbar), mais il démarre bien sous le header.
Vous auriez une solution, j'ai fait des recherches sur Alsacréations mais je n'ai pas trouvé de cas similaire.
Modifié par Zetura (01 Oct 2007 - 16:35)
