Sujet Précédent Sujet Suivant

Centrer menu horizontal (HTML, CSS)

Fermé
Serge - 4 nov. 2009 à 15:59
 Serge - 5 nov. 2009 à 11:42
Bonjour,

J’aimerais centrer un menu horizontal, de façon a ce qu’il se trouve tout le temps au milieu de la page, quelque soit la résolution de l’écran et le navigateur utilise.
Quelles modifications dois-je apporter à mon code ?

HTML :

<ul class="menu">
<li><a href="A.html">A</a></li>
<li><a href="B.html">B</a></li>
<li><a href="C.html">C</a></li>
<li><a href="D.html">D</a></li>
</ul>

CSS :

body {width: 100%; margin: 0; padding: 0}

.menu {width: 100%; position: fixed; padding: 0; margin: 0 auto}

.menu li {float: left; margin: 0 1% 0 1%}

.menu li a {display: block; float: left; width: 100px; text-decoration: none; text-align: center}

Merci beaucoup de votre aide

Serge
A voir également:

4 réponses

Réponse 1 / 4
phenX Messages postés 704 Date d'inscription mercredi 4 mai 2005 Statut Membre Dernière intervention 28 août 2012 23
4 nov. 2009 à 16:00
body {width: 100%; margin: auto; padding: 0}
0
Réponse 2 / 4
Serge
4 nov. 2009 à 16:23
Merci pour votre réponse mais j'ai essayé et ca ne fonctionne pas. J'arrive a déplacer le menu vers la droite, donc je pourrais le centrer mais des que je change de résolution d'écran il n'est plus centré. J'ai essayé d'utiliser les % au max mais je n'y arrive toujours pas...
D'autres idées?
Merci
Serge
0
Réponse 3 / 4
phenX Messages postés 704 Date d'inscription mercredi 4 mai 2005 Statut Membre Dernière intervention 28 août 2012 23
4 nov. 2009 à 16:51
alors entours ton site d'une div (apres le <body> et avant le </body>), met lui un width en px et un margin:auto
0
Réponse 4 / 4
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
4 nov. 2009 à 18:06
SALUT

un exemple avec le menu dans une div totalemant centre dans la page en position "fixed" ,

et une div "lorem" centre en margin auto

un petit + la transparence , utilie si tu veux vraiment laisser le menu au centre de le page ;-)) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="http://radservebeer.free.fr" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/*<![CDATA[*/
body{
  margin:0;/* pour eviter les marges */
  text-align:center/* pour corriger le bug de centrage IE */
}

#menucont{
  position:fixed;
  background-color:#CCFFCC;
  left:50%;
  top:50%;
  width:500px;
  height:50px;
  margin-top:-25px;/* moitie de la hauteur */
  margin-left:-250px;/* moitie de la largeur */
  border:1px solid #000;
  /* transparence */
  filter: alpha(opacity=60);
  -moz-opacity:.60;
  opacity:.60
}

.menu li{
  float:left;
  list-style-type:none
}

.menu li a{
  display:block;
  width:100px;
  text-decoration:none
}

#lorem{
  margin:auto;
  width:800px;
}
/*]]>*/
</style>
  </head>
  <body>
    <div id="menucont">
      <ul class="menu">
        <li>
          <a href="A.html">A</a>
        </li>
        <li>
          <a href="B.html">B</a>
        </li>
        <li>
          <a href="C.html">C</a>
        </li>
        <li>
          <a href="D.html">D</a>
        </li>
      </ul>
    </div>
    <div id="lorem">
      <p>
        Lorem ipsum dolor sit amet consectetuer Vestibulum venenatis vitae sed leo. Id laoreet Sed Morbi et dolor
        laoreet risus Aenean sit in. Condimentum urna semper sit et senectus justo dui semper Curabitur pretium. Ligula
        est condimentum fermentum at iaculis Nam Sed tincidunt ligula ullamcorper. Malesuada risus quam urna sed
        facilisi laoreet Mauris leo egestas quis. Odio dignissim hendrerit at lacus mus Nullam Nam Vestibulum libero.
      </p>
      <p>
        Vitae cursus Sed sed in senectus laoreet In tincidunt ante wisi. Urna ut Integer eros tincidunt lacus porttitor
        feugiat neque a tellus. Arcu in dictum Vestibulum Nunc tincidunt velit Mauris risus ut et. Adipiscing gravida
        cursus neque elit a cursus Maecenas quis ut semper. Hendrerit purus quis ligula id urna ut In pellentesque
        tincidunt eu. Nibh fames orci et Vivamus vitae interdum velit In laoreet massa. Vitae sagittis.
      </p>
      <p>
        Quis Aenean metus cursus Nulla adipiscing nec Nam laoreet ut ac. Leo facilisis auctor Cras nisl nulla felis
        odio fringilla ridiculus est. Convallis consequat nascetur et a sem at elit elit malesuada Ut. Congue metus
        sagittis hac congue faucibus venenatis tellus eu massa Sed. Lorem Phasellus nec tempus ac Curabitur pretium id
        nibh et ut. Feugiat natoque ac semper Lorem consequat metus egestas interdum scelerisque.
      </p>
      <p>
        Congue ante odio Vestibulum Sed ullamcorper est mauris tempus a wisi. Nibh interdum ullamcorper libero amet
        nunc Morbi mauris interdum condimentum augue. Congue malesuada id non sit mus in neque Curabitur nec libero.
        Est ipsum eget justo enim dui nisl euismod nec Vestibulum nunc. Sed felis tempus Praesent interdum leo dui
        tempus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetuer cursus Sed dapibus volutpat Aenean. Sed tempor id amet urna nonummy
        semper in libero natoque porta. Eros libero eget faucibus enim elit condimentum tellus congue Nullam
        condimentum. Et quis cursus cursus ante ante sollicitudin elit justo consequat condimentum. Ac at accumsan
        laoreet orci velit nibh et sed justo mauris. Congue penatibus Nam et est interdum Sed Fusce justo.
      </p>
      <p>
        Ante et hendrerit interdum quis lorem Vestibulum Curabitur lobortis Integer tristique. Est tincidunt Morbi
        condimentum sem consectetuer eu In elit pellentesque at. Vivamus nec Integer pretium tincidunt Nam Donec id
        Aenean dui ut. Nascetur wisi amet Integer nascetur metus Nunc ac Nulla ut non. Porttitor id urna magna massa
        Praesent tristique suscipit eros eleifend sit.
      </p>
      <p>
        Lorem semper sociis facilisis sed Nam pede elit turpis Nulla orci. Augue accumsan ridiculus eget Ut ipsum
        condimentum Nam sed justo eget. Quam eget urna mauris montes est Sed interdum et risus cursus. Dignissim a
        Morbi orci ac quis vitae ut sagittis interdum semper. Dictumst auctor natoque pede suscipit congue orci magna
        Duis Phasellus interdum. Elit penatibus quis turpis nibh Morbi Aliquam.
      </p>
      <p>
        Nulla elit porta orci Vestibulum interdum ante amet commodo dui Vestibulum. Volutpat ante lorem sapien quis
        molestie accumsan ante lacus vel risus. Pellentesque tempor nonummy Sed vel Nunc mauris wisi Nam tincidunt
        Curabitur. Nec ac tincidunt risus dui id Nam eros semper hac laoreet. Dui vitae et Mauris ante cursus lobortis
        tempus dolor hendrerit justo. Velit mollis accumsan.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetuer Vestibulum venenatis vitae sed leo. Id laoreet Sed Morbi et dolor
        laoreet risus Aenean sit in. Condimentum urna semper sit et senectus justo dui semper Curabitur pretium. Ligula
        est condimentum fermentum at iaculis Nam Sed tincidunt ligula ullamcorper. Malesuada risus quam urna sed
        facilisi laoreet Mauris leo egestas quis. Odio dignissim hendrerit at lacus mus Nullam Nam Vestibulum libero.
      </p>
      <p>
        Vitae cursus Sed sed in senectus laoreet In tincidunt ante wisi. Urna ut Integer eros tincidunt lacus porttitor
        feugiat neque a tellus. Arcu in dictum Vestibulum Nunc tincidunt velit Mauris risus ut et. Adipiscing gravida
        cursus neque elit a cursus Maecenas quis ut semper. Hendrerit purus quis ligula id urna ut In pellentesque
        tincidunt eu. Nibh fames orci et Vivamus vitae interdum velit In laoreet massa. Vitae sagittis.
      </p>
      <p>
        Quis Aenean metus cursus Nulla adipiscing nec Nam laoreet ut ac. Leo facilisis auctor Cras nisl nulla felis
        odio fringilla ridiculus est. Convallis consequat nascetur et a sem at elit elit malesuada Ut. Congue metus
        sagittis hac congue faucibus venenatis tellus eu massa Sed. Lorem Phasellus nec tempus ac Curabitur pretium id
        nibh et ut. Feugiat natoque ac semper Lorem consequat metus egestas interdum scelerisque.
      </p>
      <p>
        Congue ante odio Vestibulum Sed ullamcorper est mauris tempus a wisi. Nibh interdum ullamcorper libero amet
        nunc Morbi mauris interdum condimentum augue. Congue malesuada id non sit mus in neque Curabitur nec libero.
        Est ipsum eget justo enim dui nisl euismod nec Vestibulum nunc. Sed felis tempus Praesent interdum leo dui
        tempus.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetuer cursus Sed dapibus volutpat Aenean. Sed tempor id amet urna nonummy
        semper in libero natoque porta. Eros libero eget faucibus enim elit condimentum tellus congue Nullam
        condimentum. Et quis cursus cursus ante ante sollicitudin elit justo consequat condimentum. Ac at accumsan
        laoreet orci velit nibh et sed justo mauris. Congue penatibus Nam et est interdum Sed Fusce justo.
      </p>
      <p>
        Ante et hendrerit interdum quis lorem Vestibulum Curabitur lobortis Integer tristique. Est tincidunt Morbi
        condimentum sem consectetuer eu In elit pellentesque at. Vivamus nec Integer pretium tincidunt Nam Donec id
        Aenean dui ut. Nascetur wisi amet Integer nascetur metus Nunc ac Nulla ut non. Porttitor id urna magna massa
        Praesent tristique suscipit eros eleifend sit.
      </p>
      <p>
        Lorem semper sociis facilisis sed Nam pede elit turpis Nulla orci. Augue accumsan ridiculus eget Ut ipsum
        condimentum Nam sed justo eget. Quam eget urna mauris montes est Sed interdum et risus cursus. Dignissim a
        Morbi orci ac quis vitae ut sagittis interdum semper. Dictumst auctor natoque pede suscipit congue orci magna
        Duis Phasellus interdum. Elit penatibus quis turpis nibh Morbi Aliquam.
      </p>
      <p>
        Nulla elit porta orci Vestibulum interdum ante amet commodo dui Vestibulum. Volutpat ante lorem sapien quis
        molestie accumsan ante lacus vel risus. Pellentesque tempor nonummy Sed vel Nunc mauris wisi Nam tincidunt
        Curabitur. Nec ac tincidunt risus dui id Nam eros semper hac laoreet. Dui vitae et Mauris ante cursus lobortis
        tempus do
      </p>
    </div>
  </body>
</html>


A+
0
Serge
5 nov. 2009 à 11:42
Merci RADZONE,

En effet ca marche mais j'aurais préferé éviter de donner un width en px, je voudrais faire ca en % pour que le site s'adapte mieux a toutes les résolutions d'écran.
Est ce possible??
Merci
Serge
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse