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.

zvheer

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

yasakani no magatama

Simple Guy

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

zvheer

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.

yasakani no magatama

Simple Guy

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

ChrisLebure

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