18073 sujets

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

[Resolu] Problème centrage page

Bonjour,

J'ai un problème, je voudrais centré les élements d'une page (en-tête et menu) et cela ne fonctionne page

Le code html :

<body>
    <div id="page">  
    <div id="entete"></div>
    <div id="menu">
      <ul>
        <li id="kataclyst"></li>
        <li id="accueil"><a href="#a"></a></li>
        <li id="apropos"><a href="#b"></a></li>
        <li id="services"><a href="#c"></a></li>
        <li id="portfolio"><a href="#d"></a></li>
        <li id="demande"><a href="#e"></a></li>
        <li id="contact"><a href="#f"></a></li>
      </ul>
    </div>
  </div>
</body>


Le code CSS:

#page
{
  text-align:center;
  margin:0 auto;
  padding:10px;
  background-color:white;
  width:800px;
  font-size:1px;
}

#menu
{
  margin:0 auto;
  text-align:center;
}

#menu ul li
{
  list-style-type:none;
  display:block;
  float:left;
}

#menu a
{
  width:90px;
  height:30px;
  display:block;
}

#menu ul li#kataclyst
{
  background:url(menu/kataclyst.jpg) no-repeat;
  width:150px;
  height:39px;
}

#menu ul li#accueil
{
  background:url(menu/accueil.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#apropos
{
  background:url(menu/apropos.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#services
{
  background:url(menu/services.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#portfolio
{
  background:url(menu/portfolio.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#demande
{
  background:url(menu/demande.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#contact
{
  background:url(menu/contact.jpg) no-repeat;
  width:90px;
  height:39px;
}

#entete 
{
  background:url(entete.jpg) no-repeat;
  width:691px;
  height:167px;
  margin:0 auto;
  text-align:center;
}


Vous pouvez voir ce à quoi cela ressemble maintenant ici : http://www.kataclyst.com/V2/Test/

Ce à quoi je voudrais que cela ressemble (cette page est faites sans tenir compte des normes XHTML/CSS, c'est pour cela que je veux la refaire comme il faut en CSS) :
http://www.kataclyst.com/V2/FR/

Merci!
Modifié par Kiboumz (08 Mar 2006 - 19:31)
bonjour,
"margin:0 auto;" ne fonctionne pas avec ie.
Tu dois mettre dans ta CCS :

body {
text-align: center; /* pour ie */
}
#page {
margin:0 auto;
text-align: left; /* pour ie */
...
}
Administrateur
papillon41 a écrit :
bonjour,
"margin:0 auto;" ne fonctionne pas avec ie.

Avec IE < 6 faut-il préciser.

Bonjour Kiboumz et bienvenue parmi nous Smiley cligne

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 le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour, j'ai effectivement lu le texte sur le centrage, mais j'avais de la difficulté à le comprendre dû à la non-comptabilité entre tous les navigateurs... (personnellement, j'utilise Firefox). De plus, j'ai lu le livre de l'auteur de ce site : CSS 2 : Pratique du design web
Modifié par Kiboumz (06 Mar 2006 - 16:39)
Bonjour, merci pour vos commentaires!

J'ai travaillé hier sur ma page et j'ai modifié plusieurs choses. Cependant 2 "bugs" persistents.

1. Sur Firefox je voudrais qu'avec ma balise <div id="page"> cela remplisse correctement tous les autres éléments compris dans cette balise de blanc, ce n'est cependant pas le cas avec Firefox (voir ce que fait Explorer pour voir ce que je veux exactement).

2. Le menu ne s'affiche pas correctement (je le voudrais centré et sur la même ligne)

Le code Html

<div id="page">
<div id="entete"></div>
<div id="menu">
<ul>
    <li id="kataclyst"></li>
    <li id="accueil"><a href="#a"></a></li>
    <li id="apropos"><a href="#b"></a></li>
    <li id="services"><a href="#c"></a></li>
    <li id="portfolio"><a href="#d"></a></li>
    <li id="demande"><a href="#e"></a></li>
    <li id="contact"><a href="#f"></a></li>
  </ul>
</div>
</div>


Le code CSS

/*
|--------------------------------------------|
| Caractéristiques générales                 |
|--------------------------------------------|
*/
body
{
  margin:0 auto;
  text-align:center;
}

div
{
  margin:0 auto;
  text-align:center;
}

div#page
{
  background-color:white;
  width:700px;
  padding:10px;
}

div#entete 
{
  background:url(entete.jpg) no-repeat;
  width:688px;
  height:167px;
}

div#barrehorizontale_haut
{
  background:url(barrehorizontale_haut.jpg) no-repeat;
  width:688px;
  height:11px;
}

/*
|--------------------------------------------|
| Le menu                                    |
|--------------------------------------------|
*/
div#menu ul
{
  margin:0 auto;
  margin-top:8px;
}

div#menu ul li
{
  list-style-type:none;
  float:left;
}

div#menu a
{
  width:90px;
  height:30px;
  display:block;
}

#menu ul li#kataclyst
{

  background:url(menu/kataclyst.jpg) no-repeat;
  width:150px;
  height:39px;
}

#menu ul li#accueil
{
  background:url(menu/accueil.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#apropos
{
  background:url(menu/apropos.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#services
{
  background:url(menu/services.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#portfolio
{
  background:url(menu/portfolio.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#demande
{
  background:url(menu/demande.jpg) no-repeat;
  width:90px;
  height:39px;
}

#menu ul li#contact
{
  background:url(menu/contact.jpg) no-repeat;
  width:90px;
  height:39px;
}


Vous pouvez voir le résultat ici : http://www.kataclyst.com/V2/Test2/

Merci d'avance!
Tu peux ajouter : 
div#menu ul {
overflow: auto;
}
Pour donner du contenu à ta page et ainsi faire en sorte d'avoir la même apparence sur ie et ff.
Par contre, tu as mis des "margin:0 auto;" un peu partout, cela risque d'être gênant par la suite.
Ton menu s'affiche sur deux ligne parce qu'il n'a pas de place pour faire autrement ; essayes "width:750px;" dans "div#page".
Modifié par papillon41 (07 Mar 2006 - 09:59)
Sujet clos
Aller à