Alan a écrit :
Bonjour,
@ Kantega : il s'agit d'un bug d'IE Mac lié à la position fixed. Cf : http://macedition.com/cb/ie5macbugs/#fixedposbug
@croco44 : essaie d'appliquer le z-index à un élément ancêtre du menu de même "niveau" que la "pseudo frame" principale. Sinon donne nous le code ou mieux un exemple en ligne
C'est en chantier, donc pas encore définitif, mais voici les codes :
=================================================
Pour la structure générale des pseudo-frames, pour les pages principales :
=================================================
[#red](je ne mets pas les entêtes) [/#]
[#blue]<body>[/#]
[#red]/* pour définir le pseudo-frame de menu à gauche (pas de pb avec)*/ [/#]
[#blue]
<div id="haut-admin"><?php include $chemin_racine."site/squelettes/onglet-admin.php"; ?></div> [/#]
[#red]/* pour définir le pseudo-frame de menu à gauche (pas de pb avec)*/ [/#]
[#blue]<div id="gauche"><?php include $chemin_racine."site/squelettes/sommairegauche.php"; ?></div>
[/#]
[#red]/* pour définir le psuodo frame principal */ [/#]
[#blue]<div id="principale">
<H1>ADMINISTRATION DU SITE</H1>
<div id="corps-page">[/#] [#red]/* pour définir la zone "utile" de la page */
/*///// ICI LE CONTENU /////*/
[/#] [#blue]</div>
</div>
</body>
=================================================
Pour le contenu du pseudo-frame du haut ( onglet-admin.php, qui est particulier à la partie admin du site, et où justement je voudrais intégrer les menus déroulants horizontaux ):
=================================================
[#red]après les entêtes...
... le script du menu déroulant[/#]
[#blue]
<script type="text/javascript">
<!--
window.onload=admin_ecran;
function admin_ecran(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</HEAD>
<BODY>
<div id="barre_icones">
<div id="menu">
<?php
// <IMG SRC=\"".$chemin_racine."site/images/img-site/utilisateurs-22.gif\" BORDER=\"0\" ALT=\"gestion des utilisateurs\">
echo "<dl>\n";
echo "<dt onmouseover=\"javascript:admin_ecran('smenu1');\">TOTO</dt>\n";
echo "<dd id=\"smenu1\">\n";
echo "<ul>\n";
echo "<li><a href=\"".$chemin_racine."site/commun/creer-compte.php\">créer un compte</a></li>\n";
echo "<li><a href=\"".$chemin_racine."site/commun/creer-compte.php\">éditer un compte</a></li>\n";
echo "</ul>\n";
echo "</dd>\n";
echo "</dl>\n";
[/#]
[#red]
/* etc.... pour tout les menus, avec fermeture des tags des DIV et de la liste */
[/#]
=================================================
le CSS de la "page" principale (style-page.css)
=================================================
[#blue]
/*
Mise en page générale
*/
#principale {
position: absolute;
top: 30px;
left: 100px;
width: 900px;
height: 720px;
margin-left:0px;
margin-top:0px;
background-color:#f8f8e8;
background-image: url('../images/img-site/gris-pale.png');
background-repeat: repeat-y;
overflow: auto;
}[/#]
[#red]
/* j'ai essayé de définir un z-index:1;, aucun effet */
[/#]
[#blue]
#corps-page {
width:770px;
background-color:transparent;
color:black;
font-family: verdana,arial,Helvetica;
font-size: 12pt;
border-color:#FDB145;
border-style:solid;
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-bottom-width:1px;
padding-left:20px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
margin-left:70px;
margin-top:15px;
z-index:1;
}[/#]
[#red]
/* j'ai essayé de définir un z-index:1;, aucun effet */
[/#]
==================================================
le CSS de l'onglet (le pseudo-frame "onglet-admin.php"), nommé "style-haut-admin.css".
Quand tout sera bien au point je regrouperai peut-être les codes pour réduire le nombre de fichiers .css appelés, mais pour le moment je trouve plus "clair" de le scinder.
================================================
[#blue]
/*
style onglet haut
*/
div#haut-admin {
position: absolute;
top: 0px;
left: 0px;
width: 1000px;
height: 30px;
margin: 0;
padding: 0;
background: #FF0000;
background-image: url('../images/img-site/gris-clair.png');
background-repeat: repeat-y;
font-family: arial,helvetica,verdana,arial;
font-size: 8pt;
}
body {
margin: 0px;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1px;
left: 0px;
width: 80%;
border: 1px black;
z-index:100;
}
#menu dl {
float: left;
width: 10em;
margin: 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: red;
border: 1px black;
}
#menu dd {
border: 1px black;
}
#menu li {
text-align: center;
background: #FFFFD7;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 80%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #FDB145;
}
[/#]
J'ai essayé d'insérer un z-index (> > à celui du DIv principal) à toutes les positions, notamment pour le " #haut-admin ", sans aucun effet avec IE6 (alors que je peux m'amuser à simuler le bug sous FF en inversant les valeurs de z-index...).
================================================
Dernière chose : il y a un fichier css pour la typographie (comme dans SPIP), mais le titre n'est pas collé sous l'onglet, le problème est bien avec le DIV du pseudo-frame principal).
Voilà, si quelqu'un a une idée de solution (ou de correction d'une erreur veant de moi)....
Pas encore étudier le "layout
Modifié par croco44 (12 May 2006 - 21:52)
