Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème de marge

    17 octobre 2021 à 13:46:19

    Bonjour, 

    Voici mon problème : 

    J'aimerai que le header remplissent le haut de la page et que l'image se colle à droite du header. Je vous mets ci-joint le code HTML : 

    <!doctype html>
    <html lang="fr">
    <head>
     <meta charset="utf-8">
     <title>mon_site_web_INFO102</title>
     <link rel="stylesheet" href="TP1.css">
     <script src=""></script>
    </head>
    <body>
        <header>
            <figure>
                <img id = "logo" src="TPs/image/html.png" alt="logo html">
            </figure>
            <br><p>Mon site web INFO102</p>
        </header>
    
        <nav>
        </nav>
    
        <section>   
        </section>
    
        <footer>
        </footer>
    
    
    </body>
    </html>

    Et le code CSS :

    body{
    	margin: 0;
    }
    
    header{
    	background-color: grey;
    }
    
    #logo{
    	width: 150px;	
    	height: auto;
    	background-color: red;
    }
    
    header > p{
    	color: pink;
    }
    

    Si une quelconque personne a une solution a proposer je suis prenant.

    Bonne journée. 


    • Partager sur Facebook
    • Partager sur Twitter
      17 octobre 2021 à 14:12:36

      La page a une marge par defaut pour ca qu'il est recommandée de commencer son css avec 

      body

      {

      margin :0;

      padding:0;

      }

      et je ne pense pas que la balise br de avec ta balise serve a quelque chose car la balise p qui suit fais un retour a la ligne avec espace deja prevu, tu peux augmenter cet espace en css

      -
      Edité par zvheer 17 octobre 2021 à 14:13:50

      • Partager sur Facebook
      • Partager sur Twitter
        17 octobre 2021 à 15:06:07

        Bonjour,

        Cela ne change en rien le problème et aucune changement n'est à signaler. Néanmoins, j'ai réussi de par moi même (aléatoirement il est vrai) en faisant :

        body{
        	margin: 0;
        }
        
        header{
        	background-color: grey;
        	padding: 1px;
        }
        

        Il ne me reste plus qu'à trouver une solution par rapport à l'image.

        Merci tout de même de votre réponse.

        -
        Edité par Simple Guy 17 octobre 2021 à 15:08:11

        • Partager sur Facebook
        • Partager sur Twitter
          17 octobre 2021 à 15:10:45

          pour l'image mettez une bordure sur la balise figure border: pink solid 1px; vous vérifiez si l'image rempli bien la balise.
          • Partager sur Facebook
          • Partager sur Twitter
            17 octobre 2021 à 15:15:47

            Je ne vois pas en quoi rajouter une bordure autour de l'image peut servir à la coller à droite du header....

            Mais après essaie, j'obtiens cela : 

            Update, j'ai encore réarranger en essayant divers choses et j'ai pu enfin obtenir cela : 

            body{
            	margin: 0;
            	padding: 0;
            }
            
            header{
            	background-color: grey;
            	padding: 1px;
            }
            
            figure{
            	margin: 0;
            	padding: 0;
            }
            
            #logo{
            	width: 150px;	
            	height: auto;
            }

            Je pense que mon problème est résolu et en partie grâce à vous. Merci beaucoup.

            Bonne journée. 

            -
            Edité par Simple Guy 17 octobre 2021 à 15:21:41

            • Partager sur Facebook
            • Partager sur Twitter
              17 octobre 2021 à 16:18:54

              Bonjour,

              <figure> s'utilise dans un <article> ce qui n'est pas le cas : à supprimer

              mettre seulement l'image, puis le paragraphe dans le <header>

              si le header est une flexbox, les deux éléments image et paragraphe sont l'un à côté de l'autre,

              (voir la doc sur les flexbox)

              de plus, on peut changer l'ordre d'un élément d'une flexbox, et passer l'image en seconde position (voir la doc des flexbox)

              mais autant l'écrire dans le code APRÈS le paragraphe, non? 

              flex est la solution : simple, facilement maintenable

              • Partager sur Facebook
              • Partager sur Twitter

              Problème de marge

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown