Spoiler qui ce décalle Oo Bouton_activeSpoiler qui ce décalle Oo Bouton_hoverSpoiler qui ce décalle Oo Fb-hoverSpoiler qui ce décalle Oo Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Spoiler qui ce décalle Oo EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Spoiler qui ce décalle Oo EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Spoiler qui ce décalle Oo EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Spoiler qui ce décalle Oo EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Spoiler qui ce décalle Oo EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Spoiler qui ce décalle Oo EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Spoiler qui ce décalle Oo EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Spoiler qui ce décalle Oo EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -56%
Ampli Home Cinema Denon AVR-X1700H à 349€
Voir le deal
349 €

Partagez
 

Spoiler qui ce décalle Oo

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://24nono38.e-monsite.com/
Nono
Nono
{ Membre }
{ Membre }

Féminin Messages : 148



Spoiler qui ce décalle Oo Empty
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
MessageSujet: Spoiler qui ce décalle Oo   Spoiler qui ce décalle Oo EmptyJeu 10 Fév 2011, 15:32
Revenir en haut Aller en bas
Invité
Invité




Spoiler qui ce décalle Oo Empty
Paix 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 Wink
MessageSujet: Re: Spoiler qui ce décalle Oo   Spoiler qui ce décalle Oo EmptyLun 14 Fév 2011, 15:51
Revenir en haut Aller en bas
http://24nono38.e-monsite.com/
Nono
Nono
{ Membre }
{ Membre }

Féminin Messages : 148



Spoiler qui ce décalle Oo Empty
Ca marche !!! Merci beaucoup ^^

Ce code servait à quoi ?
MessageSujet: Re: Spoiler qui ce décalle Oo   Spoiler qui ce décalle Oo EmptyLun 14 Fév 2011, 15:54
Revenir en haut Aller en bas
Invité
Invité




Spoiler qui ce décalle Oo Empty
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. Smile



MessageSujet: Re: Spoiler qui ce décalle Oo   Spoiler qui ce décalle Oo EmptyLun 14 Fév 2011, 16:16
Revenir en haut Aller en bas
http://24nono38.e-monsite.com/
Nono
Nono
{ Membre }
{ Membre }

Féminin Messages : 148



Spoiler qui ce décalle Oo Empty
Ha d'accord ^^
C'est bon à savoir ! Je te remercie ^^
MessageSujet: Re: Spoiler qui ce décalle Oo   Spoiler qui ce décalle Oo EmptyLun 14 Fév 2011, 16:19
Revenir en haut Aller en bas
Phantasmagoria
Phantasmagoria
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1636



Spoiler qui ce décalle Oo Empty
    je classe Wink
MessageSujet: Re: Spoiler qui ce décalle Oo   Spoiler qui ce décalle Oo EmptyLun 14 Fév 2011, 16:24
Revenir en haut Aller en bas
Contenu sponsorisé




Spoiler qui ce décalle Oo Empty
MessageSujet: Re: Spoiler qui ce décalle Oo   Spoiler qui ce décalle Oo Empty
Revenir en haut Aller en bas
 

Spoiler qui ce décalle Oo

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» La PA qui décalle tout Oo
» QEEL décallé
» texte décallé alors que je n'y ai pas touché...
» [résolu]Sorte de spoiler ?
» Spoiler ne s'ouvre plus

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit