bonjour,

j'utilise colorbox pour afficher une lightbox mais je rencontre un soucis pour positionner un titre dans la partie orange que vous verrez en image

voici le soucis avec le texte en haut à droite:

donc voici comment j'apelle cette lightbox:

<A class="ajax" href="soumettre.php" title="Soumettre votre site">Soumettre un site</A>

la partie orange c'est celle ligne de mon css:

#cboxTopCenter{height:40px;background-color: #ffa90e;}

ce qui concerne le positionnement du titre c'est celle ci

#cboxTitle{z-index:9999;position:absolute; top:-5px; left:0; width:100%; color:#434343;font-family:"trebuchet MS",Helvetica,sans-serif;font-weight:bold;text-transform:uppercase;font-size:18px;}

je lui ais mis un z-index mais ça change rien

je vous laisse mon css complet ci-dessous:

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:1; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxClose{cursor:pointer;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background-color: #000000;opacity: 0.9;filter: alpha(opacity = 90);}
#colorbox{outline:0;}

#cboxTopLeft{
    background-color: #ffa90e;
    width:21px;
    height:40px;
    border-top-left-radius: 5px;
}
#cboxTopRight{
    background-color: #ffa90e;
    width:21px;
    height:40px;
    border-top-right-radius: 5px;
}
#cboxBottomLeft{
    background-color: #ffffff;
    width:21px;
    height:30px;
}
#cboxBottomRight{
    background-color: #ffffff;
    width:21px;
    height:30px;
}
#cboxMiddleLeft{width:21px; background-color: #ffffff;}
#cboxMiddleRight{width:21px; background-color: #ffffff}
#cboxTopCenter{height:40px;background-color: #ffa90e;}
#cboxBottomCenter{height:30px;background-color: #ffffff;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{z-index:9999;position:absolute; top:-5px; left:0; width:100%; color:#434343;font-family:"trebuchet MS",Helvetica,sans-serif;font-weight:bold;text-transform:uppercase;font-size:18px;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(/images/loading_background.png) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxClose:active {outline:0;}

#cboxClose{position:absolute; top:0; right:0; background:url(/images/close.png) no-repeat 0 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:0px 0px;}

2 réponses


Bonjour.
Dans ton code css pour #cboxTitle, tu définis une valeur négative pour le top, tu ne crois pas que ça pourrait venir de là ?

Un simple

padding-top: 10%;

ou

margin-top: 10%;

ne suffirait pas ?