Navigation, aber wie?


  • Joacheg
  • 881 Aufrufe 13 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Navigation, aber wie?

    Hallo,
    ich möchte für meine Homepage ein Navigationsmenü einbauen, ich weiß nur nicht wie ich das anstelle. Es sollte ungefähr so ausschauen, wie auf folgenden 2 Homepages:

    Website template: Natural Essence (preview)
    und
    Home page | Mozilla Europe

    Also eine Horizontale Leiste, welche beim Drüberfahren leicht aufleuchtet.

    Kann mir jemand ein gutes Tutorial für sowas zeigen, oder es mir vielleicht erklären?

    Vielen Dank im Voraus
    Joacheg

  • Hallo,

    HTML Code
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Horizontale Navigationsleiste zentriert</title>
    <style type="text/css">
    body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
    }

    ul#Navigation {
    margin: 0; padding: 0.8em;
    text-align: center;
    border: 1px solid black;
    background-color: silver;
    }
    ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
    }

    ul#Navigation a, ul#Navigation span {
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
    }
    * html ul#Navigation a, * html ul#Navigation span {
    width: 1em; /* nur fuer IE 5.0x erforderlich */
    w/idth: auto; /* sicherheitshalber fuer IE 6 zurueckgesetzt */
    }
    ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
    }

    </style>
    </head>
    <body>
    <h1 id="Beispiel">Horizontale Navigationsleiste zentriert</h1>

    <ul id="Navigation">
    <li><a href="#Beispiel">Seite&nbsp;1</a></li>
    <li><a href="#Beispiel">Seite&nbsp;2</a></li>
    <li><a href="#Beispiel">Seite&nbsp;3</a></li>
    <li><span>aktuelle&nbsp;Seite</span></li>
    <li><a href="#Beispiel">Seite&nbsp;5</a></li>
    <li><a href="#Beispiel">Seite&nbsp;6</a></li>
    </ul>

    </body>
    </html>


    Die Abstände werden für <ul> und <li> auf 0 gesetzt und das Aufzählungszeichen für <li> wird über list-style:none beseitigt. So erhalten Sie eine Darstellung der Links ohne erkennbare Listenformatierung, aufgrund der blockbildenden Eigenschaft der Listenpunkte jedoch untereinander angeordnet.

    Farben und Overscroll Effekt sieht so aus (CSS)

    ul#Navigation {
    width: 10em;
    margin: 0; padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
    }
    * html ul#Navigation { /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
    }
    ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0.2em;
    border: 1px solid gray;
    background-color: #eee;
    }

    ul#Navigation a {
    text-decoration: none; font-weight: bold;
    color: maroon; background-color: #ccc;
    }
    ul#Navigation a:hover {
    color: white; background-color: gray;
    }

  • Habe auch etwas für Dich ;)
    Eine horizontale Menütabelle mit CSS

    Der Quelltext für den Headbereich

    Quellcode

    1. <head>
    2. <style type="text/css">
    3. <!--
    4. #links {
    5. width: 120px;
    6. border-collapse:collapse;
    7. }
    9. #links a {
    10. display: block;
    11. background: #E0E0E0;
    12. color: #000000;
    13. font: bold 11px Verdana,Arial;
    14. margin: 0px auto;
    15. padding: 4px 2px;
    16. text-decoration: none;
    17. width: 120px;
    18. }
    20. #links a:hover {
    21. background-color: #FFFFCC;
    22. color: blue
    23. }
    25. .td {
    26. border:1px solid #800000;
    27. background-color:#E0E0E0;
    28. width:120px;
    29. text-align: center;
    30. }
    31. -->
    32. </style>
    34. </head>
    Alles anzeigen


    und das ist der Quelltext für den Bodybereich

    Quellcode

    1. <body>
    2. <table id="links" width="100" cellpadding="0" cellspacing="0" border="0" align="center">
    3. <tr>
    4. <td class="td"><a href="menue3.html">Homepage</a></td>
    5. <td class="td"><a href="menue3.html">Startseite</a</td>
    6. <td class="td"><a href="menue3.html">Weitere Links</a></td>
    7. <td class="td"><a href="menue3.html">Weitere Links</a></td>
    8. <td class="td"><a href="menue3.html">Weitere Links</a</td>
    9. <td class="td"><a href="menue3.html">Weitere Links</a></td>
    10. <td class="td"><a href="menue3.html">Weitere Links</a></td>
    11. </tr>
    12. </table>
    14. </body>
    Alles anzeigen


    Farben, Größe und alles andere kannst Du nach Deinen wünschen ändern.
    Ich hoffe das ich Dir ein wenig helfen konnte ;)

  • Hey Danke,

    weißt du vielleicht auch, wie anstatt Hintergrundfarbe auch Hintergrundgrafiken einbauen kann?

    Und die Menüpunkte sollten irgendwie komplett die selbe Farbe haben und nur beim Drüberfahren leicht aufleuchten.
    Eben ganz genauso wie bei mozilla-europe.org!

    Vielen Dank!

  • Joacheg schrieb:

    Hey Danke,

    weißt du vielleicht auch, wie anstatt Hintergrundfarbe auch Hintergrundgrafiken einbauen kann?

    Und die Menüpunkte sollten irgendwie komplett die selbe Farbe haben und nur beim Drüberfahren leicht aufleuchten.
    Eben ganz genauso wie bei mozilla-europe.org!

    Vielen Dank!


    HTML-Quellcode

    1. .td {
    2. border:1px solid #800000;
    3. background-image: url(hintergrund.jpg);
    4. background-repeat: no-repeat;
    5. width:120px;
    6. text-align: center;
    7. }


    Sollte gehen.

    Greetz
    Misserfolg ist eine Chance, es beim nächsten Mal besser zu machen!
    [SIZE="1"]Henry Ford[/SIZE]

  • Wenn du mit Tabellen programmierst passiert das doch von alleine? :confused:

    Quellcode

    1. <table id="links" style="width:100px;" cellpadding="0" cellspacing="0" border="0" align="center">
    2. <tr>
    3. <td class="td"><a href="menue3.html">Homepage</a></td>
    4. <td class="td"><a href="menue3.html">Startseite</a</td>
    5. <td class="td"><a href="menue3.html">Weitere Links</a></td>
    6. <td class="td"><a href="menue3.html">Weitere Links</a></td>
    7. <td class="td"><a href="menue3.html">Weitere Links</a</td>
    8. <td class="td"><a href="menue3.html">Weitere Links</a></td>
    9. <td class="td"><a href="menue3.html">Weitere Links</a></td>
    10. </tr>
    11. </table>
    Alles anzeigen


    Oder willst du das ganze mit Div lösen? Dann brauchst den befehl "float:left;" und "clear:both;"

    Greetz
    Misserfolg ist eine Chance, es beim nächsten Mal besser zu machen!
    [SIZE="1"]Henry Ford[/SIZE]

  • So schwer ist es nicht:

    HTML

    Quellcode

    1. <div id="menu1"><a href="#" target="_self">Link1</a></div>
    2. <div id="menu2"><a href="#" target="_self">Link2</a></div>
    3. <div id="menu3"><a href="#" target="_self">Link3</a></div>
    4. <div id="content">hier steht mein Text</div>


    CSS:

    Quellcode

    1. # menu1 {
    2. background-image: url(bild.jpg);
    3. background-repeat: no-repeat;
    4. width: 100px;
    5. height: 30px;
    6. float: left;
    7. }
    9. # menu2 {
    10. background-image: url(bild.jpg);
    11. background-repeat: no-repeat;
    12. width: 100px;
    13. height: 30px;
    14. float: left;
    15. }
    17. # menu1 {
    18. background-image: url(bild.jpg);
    19. background-repeat: no-repeat;
    20. width: 100px;
    21. height: 30px;
    22. float: left;
    23. }
    25. # content {
    26. clear: both;
    27. }
    Alles anzeigen


    Greetz
    Misserfolg ist eine Chance, es beim nächsten Mal besser zu machen!
    [SIZE="1"]Henry Ford[/SIZE]