28106 sujets

CSS et mise en forme, CSS3

Bonjour,

j'ai remarqué un problème sur mon menu horizontal fait avec des listes, lorsque je réduis le zoom de mon navigateur, les float qui compose se menu ne s'aligne plus !

J'aimerais savoir comment faire pour qu'importe le zoom (surtout réduit) mon menu reste le même.

Merci !!!

Les floats sont dans une div avec une width définie, je pense que le problème vient de là, mais c'est utile pour centre mon menu.

<div id="centre">
    <ul id="menu">
        <li class="nav1">
            <a href="#">Rubrique 1</a>
                <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                </ul>
        </li>
        <li class="nav2">
            <a href="#">Rubrique 2</a>
                <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                </ul>
        </li>
        <li class="nav3">
            <a href="#">Rubrique 3</a>
                <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                </ul>
        </li>
    </ul>
</div>


#centre{
    width: 800px;
    margin: 0 auto;
    padding: 0;
}
 
#ul{
    position: relative;
    width: 800px;
    margin: 0;
    padding: 0;
    display: block;
}
 
.nav1{
    float : left;
    width: 200px;
    margin: 0;
    padding: 0;
    display: block;
}
.nav2{
    float : left;
    width: 250px;
    margin: 0;
    padding: 0;
    display: block;
}
.nav3{
    float : left;
    width: 350px;
    margin: 0;
    padding: 0;
    display: block;
}
Pourquoi ne pas centrer directement sur ton ul#menu ??

Et sinon, je pense que tu as un soucis CSS sur #ul qui n'existe pas !