Discussion :

[alf233]

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:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
/*
    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;}