bonjour,
J'ai passé le code ci-dessous aux validators w3c html et css.
La page affiche bien ce que je veux sous mozilla et ie6.
Mais sous ie 5.5, c'est une autre histoire...
Voici les problèmes que je rencontre:
1) le bloc 'divContenu' n'utilise pas toute la largeur restante, c'est comme si le width:80% était interprété d'une autre façon...
2) dans le menu, les liens apparaissent décaler... j'ai pourtant défini tous mes margin et mes padding à 0.
Merci beaucoup pour votre aide
Voici le html:
Citation :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mon site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="_Acceuil.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<div class="divConteneur">
<ul class="menu">
<li class="menuTitre">PARTIE 1</li>
<li><a href="index.htm">Acceuil</a></li>
<li><a href="_Acceuil.css">Voir la feuille de style</a></li>
<li class="menuTitre">PARTIE 2</li>
<li><a href="_Page.htm">Partie2 menu1</a></li>
<li><a href="_Page.htm">Partie2 menu2</a></li>
<li><a href="_Page.htm">Partie2 menu3</a></li>
<li><a href="_Page.htm">Partie2 menu4</a></li>
<li class="menuTitre">PARTIE 3</li>
<li><a href="_Page.htm">----- Partie3 menu1 -----</a></li>
<li><a href="_Page.htm">----- Partie3 menu2 -----</a></li>
<li><a href="_Page.htm">----- Partie3 menu3 -----</a></li>
<li><a href="_Page.htm">----- Partie3 menu4 -----</a></li>
</ul>
<div class="divContenu">
<h1>contenu de la page</h1>
</div>
</div>
</BODY>
</HTML>
|
Et la CSS:
Citation :
/**********************************************/
/************ BLOCS DE LA PAGE **************/
/**********************************************/
html, body {
margin:0;
padding:0;
height : 100%;
}
body {
background-color: black;
}
.divConteneur {
position:absolute;
width:100%;
height:100%;
background-color: #336699;
}
.divContenu {
margin:0;
padding:0;
margin-left:20%;
width:80%;
height:100%;
background-color:white;
}
.divContenu h1 {
margin-top:0;
font-weight:bold;
font-size:14pt;
text-align:center;
color:black;
}
/**********************************************/
/********* MENU VERTICAL DE GAUCHE **********/
/**********************************************/
ul.menu {
margin:0;
padding:0;
position:absolute;
left:0;
width:20%;
list-style-type:none;
}
ul.menu a {
display:block;
height:20px;
text-decoration:none;
font-family:"Times New Roman", sans-serif;
font-weight:bold;
font-size:10pt;
text-align:left;
color:white;
background-color: #336699;
}
ul.menu a:hover {
background:gray;
}
ul.menu li.menuTitre {
font-family:"Times New Roman", sans-serif;
font-weight:bold;
font-size:12pt;
text-align:center;
color: black;
background-color: yellow;
}
|
