Barre de Navigation en bas, centerd - CSS

J'ai besoin d'un conseil rapide comment gérer avec un problème. J'ai créé un navi bar et le centre informatique donc, désormais ses dans le milieu de la page, peu importe comment grand ou petit écran, mais comment faire pour que la barre de rester sur le bas de la page ? Je sais que lorsque j'ajoute un height à .MainContainer il pousser la barre vers le bas, mais je veux le faire dependless de hauteur constante. Un grand merci pour tous les conseils!

HTML

<html>
<head>
</head>  
<body>
    <div class="MainContainer">
    </div>  
    <div id="MenuContainer">
        <ul id="navigation">
            <li class="x"><a title="1" href="indexX-1.html" >1</a></li>
            <li class="x"><a title="2" href="#" >2</a></li>
            <li class="x"><a title="3" href="#" >3</a></li>
            <li class="x"><a title="4" href="#" >4</a></li>
            <li class="x"><a title="5" href="#" >5</a></li>
            <li class="contact" class="last"><a title="6" href="#" >6</a></li>
        </ul>
    </div> 
</body>
</html>

CSS

.MainContainer {
    width: 1200px;
    background-color: #0066CC;
}
.MenuContainer {
    height: 70px;
    bottom:0;
}
ul#navigation {
    height: 70px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-width: 1px 0;    
    text-align: center;
    font-size: 22px;
    font-family: 'Cham-WebFont', Arial, sans-serif;
    background-color: #FFF;
}
ul#navigation li {
    display: inline;
    margin-right: .75em;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#navigation li.last {
    margin-right: 0;
}
ne donnez pas de youe id et classes du même nom. Il ne confond pas des machines, mais il va vous confondre.
oui, Vous avez raison .. confondre est omething je veux éviter 🙂

OriginalL'auteur d3w00n | 2013-03-29

  1. 3

    En faisant html et body height:100% et en appliquant la correction du positionnement de votre navigation.

    html, body {
 height: 100%;
}

ul#navigation {
 position: fixed;
 bottom: 0;
 width: 100%;
}

    Ici est un jsFiddle: http://jsfiddle.net/nqKpe/1/

    Se sentir libre pour redimensionner la fenêtre et de voir que votre navigation reste toujours au fond.

    Et le centrage avec left: 0; right: 0;. Aussi la ul partie de la sélecteurs n'est pas nécessaire. L'id est suffisant.
    le centrage se fait par width:100% en combinaison avec le déjà là dans l'OP text-align:center. Je suis d'accord avec le ul partie dans le sélecteur, mais l'OP a-t-elle là alors je l'ai laissé pour plus de clarté.
    Grand merci @Bazzz pour votre soutien et Votre temps à résoudre mon problème :D-FelipeAls merci pour les conseils, je suis toujours lerning pour gérer mon code 🙂

    OriginalL'auteur Bazzz

  2. 0

    Voici un travail JSFIDDLE pour vous

    Vous avez une faute de frappe:

    .MenuContainer {
    height: 70px;
    bottom:0;
}

    devrait être:

    #MenuContainer {
        height: 70px;
        bottom:0;
    }

    en fonction de votre code HTML. Également ajouter position:fixed;:

     #MenuContainer {
            height: 70px;
            bottom:0;
            position:fixed;
        }
    mise commentaire n'est plus valide. L'OP a changé le code HTML. ----> - Vous faire quelques points valables mais, cela ne veut même pas faire n'importe quoi avec la navigation, et n'est certainement pas à la faire rester au bas de la page, comme demandé par l'OP.

    OriginalL'auteur enb081