1 pièce(s) jointe(s)
Texte caché sous un élément
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:
Pièce jointe 346243
donc voici comment j'apelle cette lightbox:
Code:
<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:
#cboxTopCenter{height:40px;background-color: #ffa90e;}
ce qui concerne le positionnement du titre c'est celle ci
Code:
#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:
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;} |
