Petit problème de positionnement

Question

Lethal118

4 Feb 2009 à 22:32

Bonsoir à tous,

Pas besoin de dire que je débute, je débute !
En créant mon tout premier site, je fais face à un problème de positionnement. En gros, avec les codes HTML et CSS ci-dessous, j'obtiens le résultat voulu avec IE mais avec Firefox, il y a un espace entre le "header" et mon "menu". Je suis sur que quelqu'un est beaucoup plus expérimenté que moi!
Merci d'avance pour vos réponses !

Voici le code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" media="screen" type="text/css" title="nomdufichier" href="Style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aqualife</title>
</head>

<body>



<div id="header"></div>




<div id="conteneur">

<div id="menu">
<ul class="menu_contenu">
<li><a href="Menu1/lien1.html">Lien 1</a></li>
<li><a href="Menu1/lien2.html">Lien 2</a></li>
<li><a href="Menu1/lien3.html">Lien 3</a></li>
<li><a href="mailto:Gery.boulanger@hotmail.fr">Contact</a></li>
</ul>
</div>

</div>

Et le code CSS:

@charset "utf-8";
/* CSS Aqualife Document */

/*/////////////////////////////////////////////////////////////////////////////
PAGE ENTIERE
/////////////////////////////////////////////////////////////////////////////*/
body
{
padding: 0;
margin: 0;
background-image:url(Materiel/font.jpg);
}

/*/////////////////////////////////////////////////////////////////////////////
HEADER
/////////////////////////////////////////////////////////////////////////////*/
#header
{
height: 208px;
background-image:url(Materiel/bannierefr.jpg);
background-position: top center;
background-repeat: no-repeat;
margin: 40px 0 0 0; /*Il y a une marge en bas, attention !*/
}

/*/////////////////////////////////////////////////////////////////////////////
MENU HORIZONTAL
/////////////////////////////////////////////////////////////////////////////*/
#conteneur
{
width: 1076px;
margin: 0 auto;
}

#menu
{
height: 35px;
background-image:url(Materiel/barre.jpg);
background-position: center;
background-repeat: no-repeat;
}

#menu ul li
{
list-style: none;
float: left;
padding: 0;
}

#menu ul li a
{
display: block;
text-align: center;
text-decoration: none;
height: 35px;
width: 100px;
}

MERCI BEAUCOUP !!!!

preatorian

5 Feb 2009 à 07:09

Salut Lethal118,

Je crois surement avoir trouver ton problème. Ajoute ceci ;


ul.menu_contenu {
	margin: 0 auto;
}

et ca devrait regler ton problème de marge dans le haut de ton conteneur et de ton header..

Deuxième des chose, n'oublie pas de fermer tes entêtes </body> & </html> car ici, il manque un petit bout de ta page html (tu n'as surement pas tout copier/coller, mais je te dis juste au cas ou tu aurrais oublier le bout).
Modifié par preatorian (05 Feb 2009 - 07:39)

Heyoan

5 Feb 2009 à 08:09

Hello Lethal118 et bienvenue parmi nous Smiley smile

,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation Smiley smile

Sujet clos

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

Petit problème de positionnement