Problème de marges/padding [TERMINÉ]

[Cali93110]

Bonsoir,

Je viens chercher un peu d'aide, car j'aurai souhaité coller le haut de mon forum (et du header) contre la page, idem pour le pied du forum. J'ai mis le code suivant :

Code:

.bodyline
{
padding:0px;
border-left: 5px #634d3f solid;
border-right: 5px #634d3f solid;
background-image: url('http://obsession27.free.fr/divers/fonds/ta.jpg');
}

Et théorie, je pensais que le pudding suffirait à tout coller, mais en fait, pas du tout et j'ai toujours cette marge que je trouve désagréable :



J'ai essayé avec des valeurs négatives, et même les margin… Ca marche pas.   

Merci à ceux qui pourront m'aider.

[Anzu]

Bonsoir,

Dans le body, mettez un padding de 0px et dans le bodyline, un margin de 0px.
Si cela ne fonctionne pas, pourrais je avoir le lien du forum concerné et la css associée ?

Cordialement.

[Cali93110]

Bonsoir Anzu,

Cela ne fonctionne pas. Et ça me décolle même mon header à gauche et à droite, du bord de mon forum. :/
http://huntress-lgdc.forumactif.org

Code:

-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }

.pseudo {
letter-spacing: 0px;
font-size: 12px;
font-weight: bold;
text-shadow: 2px 2px 2px #ede1e1;
font-variant: small-caps;
text-transform: lowercase;
padding-bottom: 2px;
}

.body {
 padding:0px;
}

.bodyline
{
margin:0px;
border-left: 5px #634d3f solid;
border-right: 5px #634d3f solid;
background-image: url('http://i40.tinypic.com/2ewglkj.jpg');
}

a {text-decoration: none !important;}
a:hover{text-decoration: none !important}
a.topiclink {text-decoration: none !important;}
a.topiclink:hover {text-decoration: none !important;}

.forumlink {
  font-variant: small-caps;
  font-family: serif;
  font-size: 15px;
  font-weight: lighter;
  letter-spacing:5px;
}

.forumlink:hover {
  -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
  letter-spacing:15px;
}

[Anzu]

et en mettant un simple margin de 0px dans le body ?

[Cali93110]

Non, ça change rien malheureusement.

[Cali93110]

Je fais une relance. Merci.

[Cali93110]

Je me permet une nouvelle relance. Merci.

[[Nihil]]

Bonjour Cali,

Dans ton CSS as tu mis "body" et non pas ".body" ?

Code:

body {
   margin: 0;
}

Normalement il n'y aucune raison que ça ne marche pas. En utilisant l'inspecteur d'élément cela fonctionne parfaitement.

[Cali93110]

Bonjour [Nihil],

Non, rien à faire… Ca fonctionne pas… Voici le CSS :

Code:

-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }

.pseudo {
letter-spacing: 0px;
font-size: 12px;
font-weight: bold;
text-shadow: 2px 2px 2px #ede1e1;
font-variant: small-caps;
text-transform: lowercase;
padding-bottom: 2px;
}

body {
  margin: 0;
}
.bodyline{
border-left: 5px #634d3f solid;
border-right: 5px #634d3f solid;
background-image: url('http://i40.tinypic.com/2ewglkj.jpg');
}

a {text-decoration: none !important;}
a:hover{text-decoration: none !important}
a.topiclink {text-decoration: none !important;}
a.topiclink:hover {text-decoration: none !important;}

.forumlink {
  font-variant: small-caps;
  font-family: serif;
  font-size: 15px;
  font-weight: lighter;
  letter-spacing:5px;
}

.forumlink:hover {
  -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
  letter-spacing:15px;
}

#savec { position:relative; }
.save-bloc { color: #555!important; z-index: 999; padding: 5px;  border: 1px solid #BCBCBC; background: #efefef url(http://2img.net/i/fa/prosilver/bg_button.gif) repeat-x; display:none;top:20px;left:0px;position:absolute; white-space:nowrap; }
.save-bloc div:hover { color: #050505!important; }
.save-bloc div { cursor: pointer; }
.save-bloc select { background: #ccc; border: 1px solid #aaa; margin-bottom: 5px; }

.administratiftitre {
  font-family: Georgia;
  font-size: 20px;
  color: #634d3f;
  margin-left: 150px;
}

.administratifcourant {
text-align: center;
}

#plantes-bloc {
    display: none; /* Cache le bloc par défaut */
    padding: 10px;
    margin-top: 30px;
}
    .present {width:500px; margin:20px auto; background: #DEB887;color:#111110;border-radius:10px}
    .present-head {position: relative;}
    .present-head img {border-radius:10px 10px 0 0;max-width:500px;}
    .present-head h2 {margin:0;position:absolute;left:0;right:0;bottom:30px;text-align:center;color:#111110;font: italic 700 50px/1em Georgia, "Times New Roman", Times, serif;text-shadow:2px 2px 0 rgba(255,255,255,.2)}
    .present-content {padding:15px;text-align:justify}
    .present-content > div + div { margin-top: 60px}
    .present-content h3 {font:italic 700 22px Georgia, "Times New Roman", Times, serif;margin:0 0 15px;text-shadow:2px 2px 0 rgba(255,255,255,.2);color:#111110;}
    .present-content h3:before{content:":: ";}
    .present-foot {text-align:center;padding:10px;margin-top:60px;font:italic 10px Georgia, "Times New Roman", Times, serif;}

/* Bloc principal */
.monBloc {
  position: relative; /* important ! */
  overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
  width: 150px; /* largeur du bloc */
  height: 200px; /* hauteur du bloc */
  background: white; /* couleur de fond */
  border: 2px solid #ffffff;
}

/* Bloc de recouvrement */
.blocVolet {
  position: absolute; /* positionnement absolu (important) */
  top: 0; /* (important) */
  left: 0; /* (important) */
  width: 150px; /* largeur du bloc (identique au bloc principal) */
  height: 200px; /* hauteur du bloc (identique au bloc principal) */
  background: black; /* couleur de fond */
  /* réglage de la transition */
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
  left: -150px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */
}

    /* FICHE DE PRESENTATION AVEC EFFETS DE SURVOLS PAR RITS-U SUR LIBRE GRAPH */




    .fond_prez{
    background-color: #FFFFFF;
      border-top: 10px solid #111110;border-bottom: 10px solid #111110;
    width: 500px;}




    .feat{font-size: 8px; color: #808080; text-align:center;}




    .soustitre_prez{
    background-color:#111110;
    font-size: 18px;
    text-shadow: 1px 1px 1px #D4D4D4;
    text-align: center;
    color:#F5F5F5;
      text-transform: uppercase;
      font-family: georgia;}
    .soustitre_prez:hover{ background-color:#F5F5F5; color:#111110;}




    .boite2_prez{
    background-color: #F5F5F5;
    border:1px solid #F5F5F5;
      line-height: 11px;
    margin-left: 20px; margin-right: 20px; margin-bottom: 30px;
    padding: 5px;
    text-align: justify;
    color: #8DC9CD;
    font-size: 11px;
    text-shadow: 1px 1px 1px #D5D5D5;
    height: 200px;
            overflow:auto;
    /* police */ }
    .boite2_prez:hover{ border: 1px solid #E9E9E9; color: #808080;}




    .boite1_prez{
    background-color: #F5F5F5;
    border:1px solid #F5F5F5;
            overflow:auto;
    margin-left: 50px; margin-right: 50px; margin-top: 30px;
    padding: 5px;
    text-align: justify;
    color: #8DC9CD;
    font-size: 11px;
    text-shadow: 1px 1px 1px #D5D5D5;
    height: 100px;
    /* police  */ }
    .boite1_prez:hover{ border: 1px solid #E9E9E9; color: #808080;}




    .titre_prez{
    font-size: 30px;
    text-shadow: 1px 1px 1px #D4D4D4;
    text-align: center;
    color:#111110;
      text-transform: uppercase;
      font-family: georgia;}
    .titre_prez:hover{ color: #D5D5D5;}




    .img1{
    float: left;
      margin-left: 50px; margin-right:50px; margin-top: 10px;
    border: 1px #F3F3F3 solid;}
    .img1:hover { border: 1px #83C4C8 solid;}


[[Nihil]]

Ah ok j'avais mal compris ta demande. Là si tu compares avant / après, tu verras que les traits sont collés en haut et en bas maintenant.

Tu cherches à faire disparaitre quels espaces en plus ? Pourrais tu faire un schéma / screenshot en grande taille car l'image que tu as mis dans ton premier post est toute petite, je ne vois rien

[Cali93110]

Pas de problème. Voici :
Tout ce qui est en rouge, c'est ce que je cherche à supprimer.

https://i.servimg.com/u/f55/12/03/49/16/captur11.png

Merci pour ton aide.

[[Nihil]]

Dans ton premier message tu avais mis un padding 0 à .bodyline et maintenant il n'y est plus o-O. Pourtant c'était déjà l'une des choses à faire. Cela devrait déjà être mieux comme ça normalement.

Code:

.bodyline {
    padding:0px;
}

[Cali93110]

Ben ouais j'ai bidouillé en désespoir de cause, en attendant une réponse. Ok donc ça fonctionne bien, en revanche, je vais chipoter sur le fait qu'il doit y avoir encore un ou deux pixel au dessus du header, et que donc il est pas totalement collé.

[[Nihil]]

Rajoute simplement ceci dans ton CSS et cela devrait être réglé :

Code:

#i_logo { margin: 0;}

[Cali93110]

Tip - Top nickel !
Merci infiniment pour ton aide !   

Je the souhaite one bonne continuation.