Jump to content
  • Please do not post a message for the purpose of insulting, incitement to hatred, sexual remarks and any other which does not respect our terms of use !
Sign in to follow this  
As2piik

 résolu Décoler le bloc rouge

Recommended Posts

Bonjour,

 

Problème rencontré:

Bonjour j'aimerai avoir une aide concernant mon bloc rouge, je n'arrive pas a le décoler du bloc bleu .. merci

 

Screens:

image.thumb.png.ef1a0cc0e8762dd4d994e215a6e4d02b.png

 

Cordialement,

Share this post


Link to post
Share on other sites
Top Dev's

Sent ton code ça vas être dure.

Share this post


Link to post
Share on other sites
il y a 1 minute, Florian-MH a dit :

Sent ton code ça vas être dure.

Ok attend 

Code CSS 

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,500,900');
@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');


/* bleu #15507c */

body {
  background: #15507c;
}
/* style titre */
#p {
  color: #fff;
  text-align: center;
  font-family: 'Roboto';
  text-transform: uppercase;
}

/* box palmares */
.box_palmares {
  background: #0e3955;
  height: 500px;
  width: 800px;
  margin-left: 550px;
}

/* color bg #0c3a65 */
.box_avatar {
  background: red;
  width: 50px;
  margin-left: 20px;
  margin-top: 100px;
}

Code HTML : 

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> HabbEvent - Palmarès </title>
    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

  </head>
  <body>

    <h1 id="p">PALMARES</h1>
    <p id="p">Voici le palmares de HabbEvent</p>
    <div class="box_palmares">
      <div class="box_avatar">
        <img src="https://img.lght.pics/26pP.png" alt="avatar" width="50">
      </div>
    </div>

  </body>
</html>

 

Share this post


Link to post
Share on other sites
Premium

margin-top: 20px;

Share this post


Link to post
Share on other sites
Admin
Admin
    Salut Fade ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.

Share this post


Link to post
Share on other sites
Guest Remi

Salut,

Pourquoi tu met tous simplement pas <br> en dessus de 

        <img src="https://img.lght.pics/26pP.png" alt="avatar" width="50">

Share this post


Link to post
Share on other sites
VIP

Essaye avec un padding

Share this post


Link to post
Share on other sites
Donateur

Salut,

 

Je te propose d'essayer une position absolute, et de jouer ensuite avec les marges redit moi.

 

Cordialement,

Share this post


Link to post
Share on other sites

Salut ! Message un peu tardif, désolé ^^ Il te suffit de donner une position: relative; à ta boîte, et ensuite de jouer avec la fonction top, tu peux mettre par exemple top: 15px; qui le descendra de 15px, tu peux aussi lui ajouter un margin-top: 15px;

 

 

- Synxgz

Share this post


Link to post
Share on other sites

Hello,

 

<div class="box_palmares">
    <div class="box_avatar">
        <img src="https://img.lght.pics/26pP.png" alt="avatar" width="50">
    </div>
</div>

 

Comme l'a dit @Synxgz il y a différentes options qui s'offrent à toi :

 

- La position relative sur la box_avatar [pratique pour les petits déplacements]

.box_avatar { position:relative; top: 20px; left: 20px; }
/* LA box avatar se déplacera de 20px de sa position initial vers la droite et vers le bas */

- Le margin sur la box_avatar [pratique pour séparer les objets autour de la box qui a le margin]

.box_avatar { margin: 10px 20px 20px 10px; }
/* La box avatar s'écartera d'elle de 10px les objets au dessus d'elle et à sa gauche, puis de 20px les objets à sa droite en dessous d'elle */

.box_avatar { margin-top: 20px; }
/* La box avatar s'écartera des objets au dessus d'elle de 20px, plus précis quand on veut s'écarter que d'un seul coter
Y'a aussi le margin
-bottom
-left
-right
*/

-La position absolute sur la box_avatar [pratique pour déplacer plus vite la box sur un côté]

.box_palamares { position: relative; }
/* il faut set la box parent sinon les objets en absolute à l'intérieur sortiront de cette box */

.box_avatar { position: absolute; bottom: 5px; right: 50px; }
/* La box avatar se déplacera de 5px vers le haut EN COMMENCANT par le bas de la box palmares et elle se déplacera de 50px vers la gauche EN COMMENCANT par la droite de la box palmares  */

- Les padding pour sur la box_palmares [pratique quand on veux qu'aucun objet à l'intérieur d'une box ne touche les bords de la box principal]

.box_palmares { padding: 5px; }
/* enpêchera tous les objets en elle de toucher les bords, elle les écartes à 5px des bords */

.box_palmares { padding: 5px 10px; }
/* pour élargir les précisions : 5px du haut et du bas ET 10px sur les côtés */

.box_palmares { padding: 3px 20px 40px 15px; }
/* Encore plus précis : 3px en haut, 20px à droite, 40px en bas, 15px à gauche */

Peace, Kamobbah

Share this post


Link to post
Share on other sites
Modérateur

Salut @Fade

Ton problème est-il résolu ?

Share this post


Link to post
Share on other sites
    Salut Fade ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...