Die Navigation bar unten, centerd - CSS

Ich brauche einen schnellen Tipp, wie die Verwaltung mit einem problem. Ich habe eine navi bar und zentrieren Sie es so, jetzt in der Mitte der Seite, egal wie groß oder wie klein ist der Bildschirm, aber, wie Sie, die bar zu bleiben unten auf der Seite ? Ich weiß, dass, wenn ich einen height zu .MainContainer es drängen, dass die bar unten, aber ich will es machen dependless von konstanter Höhe. Großer Dank für jeden Rat!

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;
}
nicht geben, youe-id ' s und Klassen mit dem gleichen Namen. Es nicht zu verwechseln Maschinen, aber es wird Sie verwirren.
ja, Du hast Recht .. zu verwechseln ist und ich vermeiden will 🙂

InformationsquelleAutor d3w00n | 2013-03-29

  1. 3

    Durch html und body height:100% und Anwendung von festen Positionierung Ihrer navigation.

    html, body {
 height: 100%;
}

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

    Hier ein jsFiddle: http://jsfiddle.net/nqKpe/1/

    Fühlen Sie sich frei, um die Größe der Fenster und sehen, dass Ihre navigation bleibt immer auf dem Boden.

    Und Zentrierung mit left: 0; right: 0;. Auch die ul Teil der Selektoren ist nicht notwendig. Die id ist ausreichend.
    die Zentrierung erfolgt durch width:100% in Kombination mit den bereits dort in den OP text-align:center. Ich Stimme mit der ul Teil in der Auswahl, aber der OP hat es schon da, also ließ ich es für Klarheit.
    Großen Dank @Bazzz für Ihre Zeit und Unterstützung es mein problem lösen 😀 -FelipeAls Dank für die Ratschläge, ich bin immer noch lerning zu verwalten mein code 🙂

    InformationsquelleAutor Bazzz

  2. 0

    Hier ist eine funktionierende JSFIDDLE für Sie

    Haben Sie einen Tippfehler:

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

    werden sollte:

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

    gemäß den HTML-Code. Fügen Sie auch position:fixed;:

     #MenuContainer {
            height: 70px;
            bottom:0;
            position:fixed;
        }
    update Kommentar nicht mehr gültig. OP hat sich verändert und die HTML. ----> Sie machen einige gültige Punkte, aber dies hat nicht einmal etwas mit der navigation, und sicherlich macht es nicht bleiben, am unteren Rand der Seite, dem Wunsch des OP.

    InformationsquelleAutor enb081

Schreibe einen Kommentar