Nono
{ Membre }
Messages : 148
| Bonjour, Sur certain de mes forums, quand je mets plusieurs spoiler à la suite, il se décale, je ne comprend pas pourquoi, car j'ai regardé dans mon CSS j'ai aucun code qui permet ça (enfin en même temps vu mon niveau en CSS ><). Je vous passe tout le CSS, ça sera plus simple des fois que ça vient d'un autre code. Enfin, bref, je remercie d'avance la personne qui pourra m'aider ^^ - Code:
-
body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center;}
a { text-decoration: none; }
a.mainmenu:link, a.mainmenu:visited{ margin-left : 4px; margin-right : 4px; font-family :Georgia; color: #EBEBEB; background-image: url(""); text-transform : uppercase }
.code { background-color: #474343; /* couleur noire du fond */ border:1px #ffffff ; /* bordure blanche en traits peu épais */ -moz-border-radius: 15px 0px 15px 0px; /* tous les côtés sont arrondis */ -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #ffffff; /* couleur du texte blanche */ }
.quote { background-color: #474343; /* couleur noire du fond */ border:1px #ffffff ; /* bordure blanche en traits peu épais */ -moz-border-radius: 15px 0px 15px 0px; /* tous les côtés sont arrondis */ -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ color: #ffffff; /* couleur du texte blanche */ }
.spoiler_content { background-color: #474343; /*Couleur de fond */ border: 2px solid white; /*bordure*/ -border-radius: 15px 0px 15px 0px; /*coins 1 et 3 arrondis*/ -moz-border-radius: 15px 0px 15px 0px; /*coins 1 et 3 arrondis*/ -webkit-border-radius: 15px 0px 15px 0px; /*coins 1 et 3 arrondis*/ color:#000000; }
.spoiler_closed{ background-color: #474343; /*Couleur de fond */ border: 2px solid white; /*bordure*/ -border-radius: 15px 0px 15px 0px; /*coins 1 et 3 arrondis*/ -moz-border-radius: 15px 0px 15px 0px; /*coins 1 et 3 arrondis*/ -webkit-border-radius: 15px 0px 15px 0px; /*coins 1 et 3 arrondis*/ color:#000000; }
/*texte toujours justifié*/ .postbody { display: block; padding-left: 15px; padding-right: 15px; text-align:justify; }
/*CATEGORIES*/ a.forumlink:link, a.forumlink:visited { font-family: serif; background-color:; text-transform : uppercase; text-align: center; font-size: 100%; border-top: 3px solid #474343; border-bottom: 3px double #474343; color: #EBEBEB; letter-spacing: 3px; display: block; } a.forumlink:hover, a.forumlink:hover:visited { background-image: url(""); text-transform : lowercase; color: #EBEBEB; text-align: center; display: block; border-top: 3px solid #474343; border-bottom: 3px double #474343; -moz-border-radius:10px; }
/*cadre autour avatar*/ .postdetails.poster-profile a img { -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border: 10px solid; border-color:#E7F3EC }
/* Cadre du forum */ .forumline{ -moz-border-radius: 10px ; border: 5px #474343 solid;}
.colorpicker { width: 356px; height: 176px; overflow: hidden; position: absolute; background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png); font-family: Arial, Helvetica, sans-serif; display: none; } .colorpicker_color { width: 150px; height: 150px; left: 14px; top: 13px; position: absolute; background: #f00; overflow: hidden; cursor: crosshair; } .colorpicker_color div { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png); } .colorpicker_color div div { position: absolute; top: 0; left: 0; width: 11px; height: 11px; overflow: hidden; background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif); margin: -5px 0 0 -5px; } .colorpicker_hue { position: absolute; top: 13px; left: 171px; width: 35px; height: 150px; cursor: n-resize; } .colorpicker_hue div { position: absolute; width: 35px; height: 9px; overflow: hidden; background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top; margin: -4px 0 0 0; left: 0px; } .colorpicker_new_color { position: absolute; width: 60px; height: 30px; left: 213px; top: 13px; background: #f00; } .colorpicker_current_color { position: absolute; width: 60px; height: 30px; left: 283px; top: 13px; background: #f00; } .colorpicker input { background-color: transparent; border: 1px solid transparent; position: absolute; font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #898989; top: 4px; right: 11px; text-align: right; margin: 0; padding: 0; height: 11px; } .colorpicker_hex { position: absolute; width: 72px; height: 22px; background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top; left: 212px; top: 142px; } .colorpicker_hex input { right: 6px; } .colorpicker_field { height: 22px; width: 62px; background-position: top; position: absolute; } .colorpicker_field span { position: absolute; width: 12px; height: 22px; overflow: hidden; top: 0; right: 0; cursor: n-resize; } .colorpicker_rgb_r { background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png); top: 52px; left: 212px; } .colorpicker_rgb_g { background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png); top: 82px; left: 212px; } .colorpicker_rgb_b { background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png); top: 112px; left: 212px; } .colorpicker_hsb_h { background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png); top: 52px; left: 282px; } .colorpicker_hsb_s { background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png); top: 82px; left: 282px; } .colorpicker_hsb_b { background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png); top: 112px; left: 282px; } .colorpicker_submit { position: absolute; width: 22px; height: 22px; background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top; left: 322px; top: 142px; overflow: hidden; } .colorpicker_focus { background-position: center; } .colorpicker_hex.colorpicker_focus { background-position: bottom; } .colorpicker_submit.colorpicker_focus { background-position: bottom; } .colorpicker_slider { background-position: bottom; }
/*qeel*/ .statistiques{ border:0px; background-image: url("LIEN IMAGE DU HAUT"); background-repeat: no-repeat; background-position: center; height:270px;}
.groupes{ -moz-border-radius : 5px 5px 5px 5px; height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px; font-size:15px;font-weight: bold;text-align:center; text-decoration: none !important;}
/*QEEL*/ .statistiques{ border:0px; background-repeat: no-repeat; background-position: center; height:200px; }
.groupes{ font-size:15px; font-weight: bold; text-align:center; text-decoration: none !important; height:auto; }
a.imginfo span { display: none; /* on masque l'infobulle */ }
a.imginfo:hover { background: none; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */ cursor: help; /* on change le curseur par défaut en curseur d'aide */ }
a.imginfo:hover span { display: inline; /* on affiche l'infobulle */ position: absolute; white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */ top: 30px; /* on positionne notre infobulle */ left: 20px; background: white; color: 7d7d7d; border: 0px solid grey; border-left: 5px solid #b6b6b6; border-right: 3px solid #b6b6b6; border-top: 3px solid #b6b6b6; border-bottom: 5px solid #b6b6b6; }
/* ------------------ opacité des images ------------------ */ a img{ opacity: 1; }
a img:hover { opacity: 1; }
.fondavatar { background-color : #CCCCCC ; *couleur du fond* padding : 10px ; *pas touche* }
a.imginfo { position: relative; color: #7d7d7d; text-decoration: none; border-bottom: 0px #7d7d7d solid; /* on souligne le texte */ }
a.imginfo span { display: none; /* on masque l'infobulle */ } a.imginfo:hover { background: none; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */ cursor: help; /* on change le curseur par défaut en curseur d'aide */ } a.imginfo:hover span { display: inline; /* on affiche l'infobulle */ position: absolute; white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */ top: 30px; /* on positionne notre infobulle */ left: 20px; background: white; color: 7d7d7d; padding: 3px; border: 0px solid grey; border-left: 5px solid #b6b6b6; border-right: 3px solid #b6b6b6; border-top: 3px solid #b6b6b6; border-bottom: 5px solid #b6b6b6; } |
Dernière édition par Nono le Lun 14 Fév 2011, 16:20, édité 1 fois | |
|
Invité Invité
| Bonsoir Nono! Alors le décalage apparaît à cause de ta mise en page par défaut: - Code:
-
/*texte toujours justifié*/ .postbody { display: block; padding-left: 15px; padding-right: 15px; text-align:justify; Fais sauter - Code:
-
display: block; et le décalage ne devrait plus avoir lieu d'être | | |
|
Nono
{ Membre }
Messages : 148
| Ca marche !!! Merci beaucoup ^^
Ce code servait à quoi ? | | |
|
Invité Invité
| La propriété CSS de display admet plusieurs valeurs. Les 3 principales sont : none, inline, block. (mais il en existe beaucoup plus) Ici tu as un block (display: block;), c'est-à-dire qu'au lieu de continuer sur la même ligne comme avec "inline", cela forme un "bloc". Donc chaque fois que tu mettais un spoiler, tu formais un nouveau bloc et comme tu avais spécifié des marges de 15 px, à chaque spoiler tu ajoutais un écart de 15 px. En enlevant le bloc ou en le corrigeant en "display: none;", tu annules ce décalage. | | |
|
Nono
{ Membre }
Messages : 148
| Ha d'accord ^^ C'est bon à savoir ! Je te remercie ^^ | | |
|
Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| je classe | | |
|