[Résolu] Petit souci CSS positionnement

Bonjour,
Je débute en CSS et en HTML, j'ai suivi un tuto vidéo, pour créer un menu horizotal.
Mais je rencontre un petit souci de positionnement.
le menu ne vient pas coller à ma bannière. Je ne trouve pas ou est mon erreur.
Merci pour votre aide.

Voici mon CSS

/********************************************************************************************/
/************************************************* Les balises  *****************************/
/********************************************************************************************/
/*Configuration de base de la page*/
body{
	margin:0;padding:0;								/*Marge*/
	background-color:#30312B;						/*Couleur du fond*/
	color:#373737; 									/*Couleur de la police*/
	font-size:14px; 								/*Taile du texte*/
	font-family: "Times New Roman",Georgia, Serif;	/*Nom de la police*/
}


/*Les balises H*/
h1{font-style: oblique;}	/*Met la police en oblique*/
h2{font-style:normal;}		/*Laisse la police en comme dans le body*/
h3{font-style:oblique}		/*Met la police en oblique*/
h4{font-style:normal;}		/*Laisse la police en comme dans le body*/
h5{font-style:oblique;}		/*Met la police en oblique*/


/*Les balises A*/
a{}

/*Les balises de mise en forme*/
p{}

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*/


/*********************************************************************************************/
/************************************** Le  Menu *********************************************/
/*********************************************************************************************/
#conteneur-menu{
	background:#3B3833;
	height:45px;
	position:relative;	
}

#menu{
	position:absolute;
}

#menu dl{
	height:40px;
	margin:0;padding: 0;
	display:block;
	float:left;
}

#menu dt{
	width:150px;
	display:block;	
	height:40px;
	color:#fff;
	line-height:40px;
	text-align:center;
	border-right:dotted 1px #3B3833;
	cursor:pointer;
}

#menu dd{
	display:block;	
	margin:0;padding:0;
	background:#3B3833;
}

#menu dd ul{
	margin:0;padding:0;
	text-align:center;
	list-style:none;	
}

#menu dd ul li a{
	display:block;
	color:#B6A66A;
	text-decoration:none;
	height:30px;
	line-height:25px;
	border-top:dotted 1px #3B3833;
	border-bottom:dotted 1px #3B3833;
	width:150px;
}

#menu dd ul li{
	display:block;
	margin:0;padding:0;
}

#menu dd ul li a:hover{
	background:#DEC489;
	color:#3B3833;
}
#menu dl dd {
	display:none;
}
	
#menu dl:hover dd{
	display:block;
}	
/*---------------------------------------- Fin du menu --------------------------------------*/
/*-------------------------------------------------------------------------------------------*/



/********************************************************************************************/
/**************************************** Les class  ****************************************/
/********************************************************************************************/
/*En tête de page*/
.en_tete {
	text-align: center;		/*Aligne le texte */
	margin: 0 auto;			/*Marge automatique*/
	width: 1128px;			/*Met la lageur à la taille de l'image en tête*/
}

/*Conteneur de la page*/
.center-div {
	position:relative;							/**/
	top:0;										/*Posionnement haut*/
	margin: 0 auto;								/*Marge automatique*/
	padding-top:0;			
	width: 1128px;								/*Largeur à la taille de l'image en tête*/	
	height: 0 auto;								/*Hauteur aumatique*/	
	background-color:#DDCFC2;					/*Couleur de fond*/
	border-bottom-color: 2px solid #4A402D;		/*Couleur des bordures*/
	border-top:2px solid #4A402D; 				/*Epaisseur style et couleur de la bordur du haut*/
	border-bottom: 2px solid #4A402D;			/*Epaisseur style et couleur de la bordur du bas*/
	border-radius: 3px;
}

/*Signature des pages WEB*/
.signature {
	border-top:2px solid #4A402D; 					/*Epaisseur style et couleur de la bordur du haut*/
    border-bottom: 2px solid #4A402D;				/*Epaisseur style et couleur de la bordur du bas*/
	text-align: center;								/*Alignement du texte*/
	color:#CCCCCC;									/*Couleur du texte*/
	font-style:oblique;								/*Style du texte*/			
	font-weight: bold;								/*Texte en gras*/
	font-size:12px; 								/*Taile du texte*/
	font-family: "Times New Roman",Georgia, Serif;	/*Nom de la police*/	
	margin: 0 auto;									/*Marge automatique*/
	width: 1128px;									/*Met la lageur à la taille de l'image en tête*/
}

/*-------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------*
/

El mon code HTML

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Premier CSS HTML</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="script/script.js"></script> 
</head>
<body>
<div class='center-div'>
<!--Banniere-->
<p class='en_tete'><img src='image/bandeau.png'></p>

<!--Menu-->
<div id='conteneur-menu'>
	<div id='menu'>
		<dl>
			<dt>Menu 1</dt>
			<dd>
				<ul>
					<li><a href='#'>Lien 01</a></li>
					<li><a href='#'>Lien 02</a></li>
					<li><a href='#'>Lien 03</a></li>
					<li><a href='#'>Lien 04</a></li>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt>Menu 2</dt>
			<dd>
				<ul>
					<li><a href='#'>Lien 01</a></li>
					<li><a href='#'>Lien 02</a></li>
					<li><a href='#'>Lien 03</a></li>
					<li><a href='#'>Lien 04</a></li>
				</ul>
			</dd>
		</dl>	
		<dl>
			<dt>Menu 3</dt>
			<dd>
				<ul>
					<li><a href='#'>Lien 01</a></li>
					<li><a href='#'>Lien 02</a></li>
					<li><a href='#'>Lien 03</a></li>
					<li><a href='#'>Lien 04</a></li>
				</ul>
			</dd>
		</dl>
	</div>
</div>
<!-- Fin du menu -->

<!-- Le  contenu le code -->
<?php
for ($i = 1; $i <= 100; $i++) {
    echo $i."<br>";
}
?>

<!-- Fin du contenu , code -->
  
<!-- Ne rien mettre après cette ligne -->
 </div>
<!--Signature-->
<p class="signature">
<img src='image/sign.jpg'><br>
Réalisation  Jean-Marc</p>
</body>
</html>

Modifié par nolandu91 (30 Mar 2016 - 09:29)

Bonjour,

Avant de commencer, attention aux commentaires Css : le dernier commentaire en fin de page est mal fermé. Pas de saut de ligne entre un * et un /...

Sinon, le problème vient de la bannière : celle-ci est centrée avec un text-align:center sur l'élément parent. Il faut en fait passer l'image en display:block, puis lui appliquer un centrage avec un margin approprié :

.en_tete img {
    display: block;
    margin: 0 auto;
}

Et tout rentrera dans l'ordre.

Exemple en ligne.

Ah oui, tant que j'y suis un petit conseil puisque vous êtes en apprentissage : prenez l'habitude de créer le layout de votre site avec autre chose que des balises <p> qui doivent être réservées aux paragraphes. Ceci vous évitera des complications par la suite. Pour la création de votre layout utilisez plutôt des <div> qui sont des éléments neutres de type block.

Il existe aussi des éléments html5 dédiés, mais ce sera pour plus tard, après un peu de maîtrise : <section>, <header>, <main>, <aside>, <footer>...

Super merci,
J'ai modifié et compris l'erreur
J'ai mis un div en lieu et place de mon <p>

Peut-on faire un include de

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Premier CSS HTML</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="script/script.js"></script> 
</head>
<body>
<div class='center-div'>
<!--Banniere-->
<div class='en_tete'><img src='image/bandeau.png'></div>

ainsi que le menu, afin de ne pas réécrire tous à chaque foi.

Merci encore
Modifié par nolandu91 (30 Mar 2016 - 12:10)

Bien sûr que vous pouvez faire un include (ou un require), c'est le tout premier avantage que l'on découvre en créant un site dynamique.

Exemple d'utilisation :

<?php
include 'file1.php';
require 'file2.php';
?>

Modifié par Olivier C (31 Mar 2016 - 06:20)

Merci,
Oui cela je le savais, mais je me suis mal exprimer ou mal formulé ma question, je parlai en fait d'un include en HTML dans une page HTML.
j'ai essayé <!--#include file="haut.html"--> mais rien ne passe

Cela dit ce n'est pas un problème puisque le site sera en php.

Merci encore et bonne journée.
JM

Bonjour,

nolandu91 a écrit :
je parlai en fait d'un include en HTML dans une page HTML.
j'ai essayé &lt;!--#include file="haut.html"--&gt; mais rien ne passe

Nelson Mandela a écrit :
Cela semble toujours impossible, jusqu'à ce qu'on le fasse.

Désolé de contredire Mandela ici, mais ce n'est pas possible là en HTML

Merci
Je ferais autrement

<?php
require('chemin/fonction.php')
?>

Le code html incluant le menu

<a href='page.php?var=0'>Lien 1</a>
<a href='page.php?var=1'>Lien 2</a>

puis dans la page

$var =($_GET['var']);

switch ($var){
	case 1 :
	echo fonction();
	break;
	case 2 :
	echo fonction2();
	break;
default:
echo "Ce qui doit être fait par défaut";	
} 

Cela devrait être propre non ?
Modifié par nolandu91 (31 Mar 2016 - 10:20)