28172 sujets

CSS et mise en forme, CSS3

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 :


<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 !
Personne pour m'aider à résoudre ce casse-tête ? je galère dessus depuis le début de la semaine, j'avoue que c'est chaud... Smiley sweatdrop
Smiley cligne