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;}

[headmax]

Salut difficile de répondre même si tu poste tout le CSS avec seulement une balise HTML si tu souhaite avoir de l'aide et savoir quoi poster niveau html et css tu fait F12 tu utilise l'élément de sélection d'élément de ta page tu clique sur l'élément qui présente un problème tu fait un clique doit ensuite sur l'élément qui a été sélectionné remonte jusqu'à son parent (premiers enfant de body) et copier -> extérieur ....
Et tu pourra le coller ici, et on comprendra un peu mieux ton problème: tout ça pour te dire que le HTML et CSS sont étroitement lié c'est comme si CSS était (la gouache) et que HTML était le tableau et que ta principale préoccupation est de nous montrer les couleurs sans les personnages que tu dessine dans le tableau sachant que l'un d'entre eux empêche l'autre d'être visible.

[ma5t3r]

Un élément stylé avec une position absolute fait référence à son premier parent en position relative.
Dans ton cas, il faut mettre l'élément suivant en position relative.

Code :

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

1
2
 
#cboxTopCenter{position:relative;height:40px;background-color: #ffa90e;}

PS. Il faut perdre l'habitude de styler des ID (#). Préférer les classes.

[domi65]

Un élément stylé avec une position absolute fait référence à son premier parent en position relative.

Le parent peut être aussi positionné en absolu, pourvu qu'il soit positionné.