Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

Décoler le bloc rouge

As2piik

Par As2piik
dans Résolu

 Partager

Messages recommandés

As2piik

As2piik 30

Posté(e)
Posté(e)

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:

Pour avoir accès à cette image, merci de vous connecter.

 

Cordialement,

                                    

Autres > Graphiste

Langage > HTML, CSS

En cours > PHP

                                                                                                                                       zouuuuuck.png

Lien à poster
Partager sur d’autres sites
As2piik

As2piik 30

Posté(e)
  • Auteur
Posté(e)
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>

 

                                    

Autres > Graphiste

Langage > HTML, CSS

En cours > PHP

                                                                                                                                       zouuuuuck.png

Lien à poster
Partager sur d’autres sites
Nagasaki

Nagasaki 117

Posté(e)
Posté(e)

Salut,

 

Suffit que tu look sur internet les marges en css 

Ancien Responsable des modérateurs

Mon discord : Nagasaki#5318
 
16 août 2017   ->  16 février 2020
Je m'en vais ..

 

 

                                   

                                         

Lien à poster
Partager sur d’autres sites
As2piik

As2piik 30

Posté(e)
  • Auteur
Posté(e)
à l’instant, Calypso a dit :

Salut,

 

Suffit que tu look sur internet les marges en css 

je vais aller faire un tour, merci.

 

                                    

Autres > Graphiste

Langage > HTML, CSS

En cours > PHP

                                                                                                                                       zouuuuuck.png

  • J'aime 1
Lien à poster
Partager sur d’autres sites
As2piik

As2piik 30

Posté(e)
  • Auteur
Posté(e)
Il y a 1 heure, Scorpio a dit :

margin-bottom est ton ami

sa ne marche pas j'ai déjà tester

 

                                    

Autres > Graphiste

Langage > HTML, CSS

En cours > PHP

                                                                                                                                       zouuuuuck.png

Lien à poster
Partager sur d’autres sites
  • Administrateur
Solife

Solife 1 348

Posté(e)
  • Administrateur
Posté(e)
    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.

J'essaie de m'adoucir, mais l'humain me rend noir.

Lien à poster
Partager sur d’autres sites
  • 1 mois plus tard...
  • 5 semaines plus tard...
YaZox

YaZox 24

Posté(e)
Posté(e)

Salut,

 

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

 

Cordialement,

 

~ Développeur en HTML5 ET CSS3 ~

~ Développeur amateur en PHP ~

Lien à poster
Partager sur d’autres sites
  • 2 semaines plus tard...
Synxgz

Synxgz 14

Posté(e)
Posté(e)

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

signature.png

Salut à tous, n'oubliez le petit ? et le Point de Réputation, ça fait toujours plaisir !

 

Langages pratiqués : HTML5, CSS3, SQL, PhP,. Si vous avez des questions, besoin de me contacter... je suis très disponible sur discord : Synxgz#5824

 

Lien à poster
Partager sur d’autres sites
  • 4 semaines plus tard...
Kamobbah

Kamobbah 35

Posté(e)
Posté(e)

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

Amateur langage: HTML | CSS | PHP(PDO) | JQuery | Angular | Féminin(non jris)

Lien à poster
Partager sur d’autres sites
  • 2 mois plus tard...
  • Synxgz à fermer ce/cette sujet
Synxgz

Synxgz 14

Posté(e)
Posté(e)
    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.

signature.png

Salut à tous, n'oubliez le petit ? et le Point de Réputation, ça fait toujours plaisir !

 

Langages pratiqués : HTML5, CSS3, SQL, PhP,. Si vous avez des questions, besoin de me contacter... je suis très disponible sur discord : Synxgz#5824

 

Lien à poster
Partager sur d’autres sites
Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.
 Partager
Aller sur la liste des sujets
×
×
  • Créer...