Ma barre de navigation passe devant l'effet lightbox.
j'ai pourtant réussi à faire passer le header en arrière plan via l'ajout de la commande "z-index: 100;" dans le fichier styles.css
Mais impossible pour la barre de navigation :
ICI pour voir le résultatDonc, je recherche désespérément une solution à mon pb, je dois être quiche mais je ne parviens pas à régler le truc :-o
Ci-joint mon fichier style.css
@import url(xosystpl.css);
@import url(forms.css);
@import url(blocks.css);
@import url(content.css);
html {
padding: 0 10px;
}
body {
margin: 0;
background-color: #000;
padding: 0 10px;
color: #999;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 10pt;
}
/* ======= Body wrapper ======= */
}
#xo-wrapper {}
#xo-bgstatic {}
#xo-canvas {
width: 870px !important;
margin: 0;
background-color: #6bd1c9;
color: #000;
}
body.theme-dialog #xo-canvas {
margin: 0 6px;
}
/*================= Content Zone ===================*/
#xo-canvas-content {
background-color: #a2dcdb;
padding: 0px;
color: inherit;
}
#xo-page {
padding-top: 10px;
}
#xo-canvas-rightcolumn {
padding: .5em;
}
#xo-content {
clear: both;
margin: 0;
background-color: inherit;
padding: .5em;
color: #333;
}
#xo-content table td {
vertical-align: top;
}
/* ============== header ================= */
#xo-header {}
z-index: 100;
/* ---------- Banner ---------- */
#xo-banner {
clear: both;
/* Use relative pos to ensure the banner ad img/flash is relative to the header */
position: relative;
z-index: 100;
width: 100%;
height: 168px;
background: #f1f1f1 url(../img/header-bg_big.png) repeat-x left bottom;
color: bd4709;
}
#xo-banner.commercial {
height: 117px;
background-image: url(../img/header-bg_big.png);
}
/*body.theme-dialog #xo-banner {
height: 48px;
padding-top: 6px;
padding-left: 10px;
}*/
#xo-banner-ad {
position: absolute;
top: 7px;
right: 5px;
width: 480px;
height: 72px;
background: url(../img/bg-ad-top.png) no-repeat;
padding: 6px;
}
#xo-banner-ad object, #xo-banner-ad img {
display: block;
}
/*---------------------- Site name in header ----------------------------*/
#xo-site-title {}
a#xo-site-title {}
a:hover#xo-site-title {}
#xo-site-title.commercial {}
#xo-site-title .commercial a:hover {}
/*----------------------- slogan in header ------------------------*/
#xo-site-slogan {}
#xo-site-slogan.commercial {}
/*------------------------ logo ----------------------------*/
#xo-main-logo {}
#xo-main-logo.commercial {}
/*-------- Bannder-----------*/
#xo-banner form {}
#xo-banner input {}
/*============== Styles in userbar.html =================*/
/*============= Style in globalnav.html ================*/
#xo-globalnav {
min-height: 28px;
margin: 0;
background: #1479D6 url(../img/navbar-bg.png) repeat-x left bottom;
padding: 2px 0 0;
color: #fff;
font-size: 1.1em;
text-align: center;
list-style-type: none;
}
* html #xo-globalnav {
height: 28px;
}
#xo-globalnav .x2-label {
display: none;
}
#xo-globalnav li {
display: inline;
margin: 0;
padding-left: .5em;
padding-right: .5em;
}
#xo-globalnav a {
background-color: inherit;
color: #fff;
text-decoration: none;
}
#xo-globalnav a:hover {
background-color: inherit;
color: #EAAD7B;
text-decoration: none;
}
/* ===== Footer ===== */
#xo-footer {
margin: 0;
background-color: #6bd1c9;
padding: .5em;
color: #666;
font-size: .9em;
text-align: center;
}
body.theme-dialog #xo-footer {
padding: .2em .5em;
font-size: .8em;
}
#xo-footer a {
background-color: inherit;
color: #333;
}
#xo-footer a:hover {
background-color: inherit;
color: #fff;
text-decoration: underline;
}
/* ===== debug messages ===== */
#xo-logger-output {
font-size: .8em;
}
Sinon, il doit aussi être possible de décaler vers le bas la position d'affichage de l'image avec lightbox. Mais là non plus je n'y parviens pas
Votre aide serait la bienvenue si vous avez la solution a mon pb
Merci
