Centrer menu horizontal (HTML, CSS)
Serge
-
Serge -
Serge -
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
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:
- Centrer menu horizontal (HTML, CSS)
- Menu déroulant excel - Guide
- Editeur html - Télécharger - HTML
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
4 réponses
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
D'autres idées?
Merci
Serge
alors entours ton site d'une div (apres le <body> et avant le </body>), met lui un width en px et un margin:auto
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 ;-))
A+
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+