Bonjour à tous,
J'ai un petit souci concernant le placement d'un menu au sein d'une page web.
Mon menu (<nav>) est inclus dans un div ("main_wrapper"), et contient 4 liens (4 puces <li> donc). Ce que j'aimerai faire, c'est centrer proprement ces 4 liens, et faire en sorte que les 2 liens aux extrémités s'alignent bien sur la ligne de la div "main_wrapper". Je ne sais pas si je suis bien clair dans ma description; en tout cas, voici le code correspondant :
-->Le fait d'avoir mit la largeur de mon <nav> à 110% ne convient pas, car il dépasse le <div> main_wrapper par la droite, ce qui n'est pas sans poser de problème sur certains écrans. En gros, ce que je parviens pas à faire, c'est de bien caler le côté droit de mon dernier lien (LIEN4), avec la bordure du <div> (et donc avec la bordure du <nav>, qui est elle-même calée sur la bordure du <div>). Le côté gauche du LIEN1 doit bien sûr être calé sur la bordure gauche du <div> (donc du <nav>).
Quelqu'un aurait-il une idée ? Merci !
J'ai un petit souci concernant le placement d'un menu au sein d'une page web.
Mon menu (<nav>) est inclus dans un div ("main_wrapper"), et contient 4 liens (4 puces <li> donc). Ce que j'aimerai faire, c'est centrer proprement ces 4 liens, et faire en sorte que les 2 liens aux extrémités s'alignent bien sur la ligne de la div "main_wrapper". Je ne sais pas si je suis bien clair dans ma description; en tout cas, voici le code correspondant :
<div id="main_wrapper">
<nav id="nav">
<ul>
<li><a href="blabla.html">LIEN1</a></li>
<li><a href="bloblo.html">LIEN2</a></li>
<li><a href="http://www.blublu.fr/">LIEN3</a></li>
<li><a href="blibli.html">LIEN4</a></li>
</ul>
</nav>
<!--suite du code-->
</div>
nav
{
display: inline-block;
font-size: 2em;
width: 110%;
border-radius: 10px;
text-align: justify;
}
nav ul
{
list-style-type: none;
margin: 0px 0px;
padding: 0px;
}
nav li
{
display: inline-block;
}
nav ul li
{
border-top: 2px white solid;
border-bottom: 2px white solid;
margin-right: 85px;
}
#main_wrapper
{
width: 80%;
margin: auto;
}
-->Le fait d'avoir mit la largeur de mon <nav> à 110% ne convient pas, car il dépasse le <div> main_wrapper par la droite, ce qui n'est pas sans poser de problème sur certains écrans. En gros, ce que je parviens pas à faire, c'est de bien caler le côté droit de mon dernier lien (LIEN4), avec la bordure du <div> (et donc avec la bordure du <nav>, qui est elle-même calée sur la bordure du <div>). Le côté gauche du LIEN1 doit bien sûr être calé sur la bordure gauche du <div> (donc du <nav>).
Quelqu'un aurait-il une idée ? Merci !