18034 sujets

Questions générales et questions de débutants

Problème code et affichage navigateur

Bonjour,

Je suis nouvelle sur le forum et je me permet de demander de l'aide face à une énigme que je ne parviens pas à résoudre. Je débute également en HTML et CSS.

Je travaille sur Mac avec l'éditeur Sublime Text 2. Je teste mon code avec Firefox et Safari.
Je souhaite créer un portfolio. J'ai donc commencé a construire mon code HTML en intégrant en interne des styles pour avoir un meilleur aperçu du travail. Seulement, j'ai des marges entre <header> et <nav>, et entre <div id="content"> et <footer> lorsque j'affiche la page sur le navigateur (aussi bien sur Firefox que sur Safari). Et je ne comprends pas pourquoi. Smiley confus
Lorsque j'inspecte l'élément, il ne distingue aucune marge sur le modèle de boite et quand j'affiche mon code, il ne trouve pas d'erreur. J'ai même fait vérifier mon fichier par The W3C markeup validation service, il ne trouve pas d'erreur dans mon code.
J'ai aussi affiché mon code en mode création dans Dreamweaver : celui-ci ne m'affiche pas de marges!! (au contraire de Firefox et Safari) C'est à n'y rien comprendre! Smiley confus

Ce n'est probablement qu'une erreur de débutant mais pour moi, c'est une jolie colle Smiley smile

En espérant que vous pourrez me guider sur le droit chemin, je vous souhaite une bonne journée!
Merci d'avance!

Voici mon code: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="portfolio graphique"/>
<title>Portfolio</title>
<style>



header {
	width: 1000px;
	height: 300px;
	background-color: #FF0;
}
nav {
	width: 800px;
	height: 150px;
	background-color: #F00;
}

#content {
	width: 1000px;
	height: 600px;
	background-color: #0FF;
}
footer {
	width: 1000px;
	height: 100px;
	background-color: #F0F;
}



</style>
</head>

<body>
<header>
    <h1></h1>
</header>
<nav>
  <ul>
    <li>Accueil</li>
    <li>Curriculum Vitae</li>
    <li>Portfolio</li>
    <li>Travaux personnels</li>
    <li>Contacts</li>
  </ul>
</nav>
<div id="content"></div>
<footer>
  <p></p>
  <p></p>
</footer>
</body>
</html>


Encore merci!
Bonjour et bienvenue sur le forum,

Alors pour ton histoire de marge, je comprends que ce soit déstabilisant, en fait tu ne regardes pas au bonne endroit, il faut que tu regardes à l'intérieur de tes blocs.
En effet, tu n'as pas de marge par défaut sur ton <header>, <nav>, et <footer>, en revanche tu en as sur les élément <p>, <hn>, <ul>... Et ces marges repoussent le conteneur (parent).
Cf. article sur la fusion des marges
La solution toute bête que j'utilise pour remédier à ça, reset CSS :
* { margin:0; padding:0; }

Certains n'apprécient pas ce reset un peu radical, il en existe d'autres... Tu peux également ajouter des paddings aux parents (voir article mentionné plus haut)
Modifié par SolidSnake (29 Oct 2015 - 09:09)
Merci tout d'abord de ta réponse hyper rapide Smiley smile

De fait, tu as parfaitement raison : je ne regardais pas au bon endroit. <ul> et <p> avaient effectivement des marges par défaut de 16px. J'ai retiré toutes les marges et les blocs sont maintenant collés.

Merci beaucoup d'avoir résolu mon problème. Je commençais à m'arracher les cheveux. Smiley smile
Et ce n'est pourtant que le début Smiley eek Mais mieux vaut commencer sur de bonne bases. Smiley smile

Bonne journée à toi et encore merci!
Sujet clos
Aller à