Erstellen Sie eine horizontale nav-Leiste einfach in eine header

Habe ich eine gewisse Header mit meinem Logo und den Titel. Nur auf der rechten Seite des Titel-Mobility group möchte ich erstellen Sie eine Navigationsleiste, die Sie berührt den unteren Rand der Kopfzeile mit verschiedenen Registerkarten alle Weg auf der rechten Seite der Kopfzeile. Herumspielen war ich in der Lage, etwas zu erstellen, aber ich kann nicht scheinen, um es zu positionieren, richtig.

Ich kann einfach nicht herausfinden, wie Sie diese Navigationsleiste zu meinem header-div.

HTML-code:

<div id="page">
    <div id="header">
        <a href="http://wireless.fm.intel.com/test/index.php">
            <img src="http://wireless.fm.intel.com/test/logo2.png" border=0 >
        </a>

         <h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>

        <div id="navigation"> 
            <a href="#">About</a>
            <a href="#">Reports</a>
            <a href="#">Documents</a>
            <a href="#">Checklists</a>
            <a href="#">License Tools</a>
            <a href="#">Presentations</a>
            <a href="#">Software Releases</a>
        </div>
    </div>

    <div id="main"></div>
    <div id="footer"></div>
</div>

CSS-Code:

html, body {
    padding:0;
    margin:0;
    height:100%;
}
#page {
    min-height:100%;
    position:relative;
    height:100%;
}
#header {
    background-color:#115EA2;
    height:100px;
    width:97.5;
}
#main {
    width:1300px;
    margin-left:auto;
    margin-right:auto;
    background-color:#F1F2F3;
    min-height:90%;
    height:auto;
    height:89%;
    margin:0 auto -50px;
    vertical-align:bottom;
}
#footer {
    position:fixed;
    width:100%;
    bottom:0;
    height:35px;
    background-color: #115EA2;
}
#header img {
    float:left;
    display:inline;
}
#header h2 {
    text-align:center;
    font-size:44px;
    color:#FFFFFF;
    left:0px;
    top:20px;
    font-weight:bold;
    font-family: Sans-serif;
    float:left;
    margin-top:20px;
    margin-left:20px;
    text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active {
    color: #FFFFFF;
    text-decoration: none;
}

Navigation Bar Code:

#navigation {
    position:relative;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:70%;
    background-color:gray;
    color:green;
    height:35px;
    text-align:center;
    padding-top:15px;
}
#navigation a {
    font-size:14px;
    padding-left:15px;
    padding-right:15px;
    color:black;
    text-decoration:none;
}
#navigation a:hover {
    color:blue;
}

Update

Wollte nur sagen, ich Danke Ihnen allen für Ihre Hilfe.

  • Eine Liste verwenden! Sie werden es viel, viel einfacher
  • Dieses tutorial würde helfen, eine Menge
InformationsquelleAutor Krishp | 2013-07-12
  1. 1

    Anpassung Ihrer aktuellen Methode, um eine weitere html5-Ansatz, die Sie verwenden können header und nav tags besser machen markup-Dokument. Absolute Positionierung gibt Ihnen auch eine bessere Kontrolle über Ihre Elemente. Legen Sie die header, um eine relative position, und der nav-dem absoluten, und es ausgleichen, indem Sie die Höhe des header.

    nav {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 800px;
    text-align: left;
    height: 20px;
    padding: 10px 20px;
}

    Hier ist Ihre aktualisiert fiddle

    Und hier ist ein update mit dem nav-rechts, ein bisschen chaotisch wenn:

    http://jsfiddle.net/jHJK2/5/

    • Danke, dass Sie so viel der erste sieht wirklich schön! Die zweite ist die, die ich am meisten mag, außer ich nicht wollen, es zu füllen den gesamten header. Die position von Links nach rechts ist es perfekt ust muss nach unten bewegt werden und haben eine geringe Höhe und passt rechts in der Kopfzeile. Wenn du verstehst, was ich meine. Trotzdem danke ich werde versuchen zu Durcheinander um mit ihm ein wenig!!!! @lukeocom
    • ändern Sie einfach den Wert oben in der Höhe verstellen. oder entfernen Sie den Wert oben und es wird die aktuelle Höhe, die wird ignoriert 😉
    InformationsquelleAutor lukeocom
  2. 0

    Nicht 100% sicher, ob dies ist, wie Sie es möchten, da Ihre Anfrage nicht ganz klar war, aber hier ist was ich gemacht habe.
    http://jsfiddle.net/jHJK2/2/

    Änderungen:

    HTML:

    <div id="header">
<div id="navigation"> //moved this before the other elements
        <a href="#">About</a>
        <a href="#">Reports</a>
        <a href="#">Documents</a>
        <a href="#">Checklists</a>
        <a href="#">License Tools</a>
        <a href="#">Presentations</a>
        <a href="#">Software Releases</a>
</div>
<a href="http://wireless.fm.intel.com/test/index.php">
    <img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>

</div>

    CSS:

    #navigation {
    width:100%;
    background-color:gray;
    color:green;
    height:35px;
    text-align:center;
    padding-top:15px;
}
#navigation a {
    font-size:14px;
    padding-left:15px;
    padding-right:15px;
    color:black;
    text-decoration:none;
}
#navigation a:hover {
    color:blue;
}
    • Hey @taylorc93 Danke für Eure Hilfe! Es sieht gut aus, aber das ist nicht das, was ich suchte. Ich war auf der Suche nach mehr, dass die eigentlich für die Navigationsleiste im header. Wo sehen Sie die p in Mobility Group möchte ich es starten und enden am Ende der header und passen alle Registerkarten zwischen diesem Raum. Die Höhe der nav bar sollte ein kleines Ding, sobald wir ihn dort platzieren. Vielleicht kann ich versuchen und Durcheinander mit dem code ein wenig und sehen, ob ich arbeiten kann soemthing aus! Danke für die Hilfe, aber!
    InformationsquelleAutor taylorc93
  3. 0

    Machen Sie die folgenden CSS-änderungen:

    - Demo auf jsFiddle

    #header {
    background-color:#115EA2;
    height:100px;
    width:97.5;
    position: relative;
}
#navigation {
    position:absolute;
    /* top:0;
       left:0;*/
    right:0;
    bottom:0;
    width:70%;
    background-color:gray;
    color:green;
    height:35px;
    text-align:center;
    padding-top:15px;
}
    • Hallo das sieht wirklich gut auf! Ich werde versuchen, zu Durcheinander, um mit ihm und sehen, ob ich das gewünschte Ergebnis erhalten, die ich will! Danke!!!
    InformationsquelleAutor Swarnamayee Mallia
Schreibe einen Kommentar