Centrer menu horizontal (HTML, CSS)
Serge
-
4 nov. 2009 à 15:59
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
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
4 nov. 2009 à 16:00
body {width: 100%; margin: auto; padding: 0}
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
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
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
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
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 ;-))
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+
