Bonsoir,
Je dois dire que je fondais de grands espoirs dans ce post car je rencontre moi-même des problèmes de z-index sous IE, alors que tout fonctionne parfaitement sous Firefox et Opéra. Mais le problème étant contourné, je n'ai pas de réponse au mien ...
Voici donc mon problème :
Là, tout est normal, ça passe nickel chrome.
édit par Igor: merci d'utiliser l'options vignette pour les images et pour ne pas déformer le forum.
Et là, ben y a plus rien qui marche : mon menu est carrément décalé sur mon contenu ...
édit par Igor: merci d'utiliser l'options vignette pour les images et pour ne pas déformer le forum.
C'est carrément frustrant car à côté, j'ai essayé de faire un code propre et bien construit ... enfin, mon maximum pour que ce soit dans la norme quoi !
Voici mes codes :
CSS d'une part
#navigation { /* caractéristique du bloc contenant le menu de navigation */
float:left;
margin-left:0;
width:176px;
height:460px;
}
.menu { /* aspect de la liste menu */
margin: 0;
padding: 20px 0 9px 0; /* permet la définition précise des dimensions du bloc bleu (marges intérieures) */
width: 176px;
background-color:#14265E;
color: #fff;
text-indent: 22px;
list-style-type: none; /* pas de puces */
}
.rubrique{ /* définition des caractéristiques de la liste rubrique */
position:absolute;
z-index: 2;
float:right;
height: 237px;
margin-left: 0;
padding: 1px 0 0 0;
list-style-type: none;
}
.rubrique a{
height: 1.58em; /* interligne entre les liens */
text-indent: 22px;
background-color:#fff;
color: #555;
}
.page { /* aspect du texte de la classe page */
display: block; /* autorise l'écriture sur deux lignes si le lien dépasse la largeur autorisée */
height: 1.58em; /* interligne entre les liens */
width: 176px; /* largeur du rectangle das lequel doivent sécrire les liens */
background-color:#fff;
color: #015;
text-indent: 22px;
background-image:url(img/puce.gif);
background-position: left;
background-repeat: no-repeat;
}
#logo a img{ /* positionnement du logo */
position:absolute;
z-index: 1;
border: none;
height: 75px;
width: 176px;
padding-top:260px;
background-color:#fff;
color: #555;
}
#contenu {
float:left; /* on définit le mode de positionnement par rapport au bloc navigation */
height:325px; /* taille du bloc moins la marge interne => IE */
width:569px; /* taille du bloc moins l'épaisseur de la bordure => IE*/
border-left:5px solid #14265E;
padding:5px 10px 10px 10px; /* padding haut, droit, bas, gauche*/
font-size:1.1em;
}
XTHML d'autre part :
<div id="total">
<div id="bandeau"><img src="../img/cabinet.jpg" alt="L'expérience du terrain" width="594" height="120" /></div>
<div id="navigation">
<ul class="menu">
<li><a href="../prestation.htm">PRESTATIONS</a></li>
<li class="nolien">NAUDO-WEBER</li>
<li><a href="../offre.php">OFFRES D'EMPLOI</a></li>
<li><a href="../cv.php">CURRICULUM VITAE</a></li>
<li><a href="../contact.htm">CONTACT - PLAN</a></li>
</ul>
<ul class="rubrique">
<li class="page">Historique</li>
<li><a href="equipe.htm">Equipe</a></li>
<li><a href="partenaire.htm">Equipe partenaire</a></li>
</ul>
<div id="logo"><a href="../accueil.htm" accesskey="1"><img src="../img/logo_css.gif" alt="Retournez à la page d'accueil"/></a></div>
</div>
<div id="contenu">
<h2>Le titre </h2>
<p>Le contenu</p>
</div>
</div>
Désolée pour le pavé, mais vu que je ne sais pas quoi corrigé, j'ai préféré tout mettre...
Si l'un d'entre vous entrevoit une solution ou un contournement, j'achète !!!
Merci
Modifié par Igor (14 Nov 2005 - 00:40)
