kostenloser Webspace werbefrei: lima-city


Menü? Brauche dringen Hilfe!

lima-cityForumSonstigesSpam und sonstiges Unvergütetes

  1. Autor dieses Themas

    fantastic-hogwarts

    fantastic-hogwarts hat kostenlosen Webspace.

    Wenn man bei html mit diesem Code ein Menü mactr sieht das ja nicht gerade spektakulär aus!:

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Beispiel 4: Navigationsleiste mit Überschriften</title>
        <style type="text/css">
    
          body {
            font: normal 1em Helvetica, Arial, sans-serif;
          }
     
          nav ul {
            width: 10em;
            margin: 0; 
            padding: 0.2em 0.8em 0.8em;
            border: 1px solid black;
            background-color: silver;
          }
     
          nav li {
            list-style: none;
            margin: 0.4em; 
            padding: 0;
          }
     
          nav a, nav span, nav h2 {
            display: block;
            padding: 0.4em;
            text-decoration: none; font-weight: bold;
            border: 1px solid blue;
            border-radius: 10px;
            box-shadow: 0px 5px 10px white inset;
            color: gold; 
            background-color: royalblue;
          }
     
          nav a:focus,
          nav a:hover,
          nav a:active,
          nav span {
            color: royalblue; 
            background-color: gold;
            border-color: gold;
          }
          nav h2 {
            font-size: 1em;
            margin: 1.1em 0 0;
            color: black;
            border-color: transparent;
            background-color: transparent;
            box-shadow:n one;
          }
    
        </style>
      </head>
      <body>
        <h1>Beispiel 4: Navigationsleiste mit Überschriften</h1>
     
        <nav>
          <ul>
            <li><h2>Rubrik 1</h2></li>
            <li><a href="#">Beispiel 1</a></li>
            <li><a href="#">Beispiel 2</a></li>
            <li><a href="#">Beispiel 3</a></li>
     
            <li><h2>Rubrik 2</h2></li>
            <li><span>aktuelle Seite</span></li>
            <li><a href="#">Beispiel 5</a></li>
            <li><a href="#">Beispiel 6</a></li>
          </ul>
        </nav>
     
      </body>
    </html>


    Wie kann man es jetzt machen, das man anstatt der normalen Boxen die eine andere Farbe haben, wenn man darüberfahrt ein Bild ist. Aber nicht das in der Box ein Bild ist, sondern, das die Form es Buttons ie Form eines Bildes ist.
    Sowie bei Zauberhogwarts (http://Zauberhogwarts.de ) ganz oben.

    Wie geht das ?

    Beitrag zuletzt geändert: 29.6.2016 18:38:52 von fantastic-hogwarts
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Auf der von dir genannten Webseite sind für die einzelnen "Buttons" Hintergrundbilder festgelegt. Der CSS-Code beim Button Einloggen sieht so aus:
    #head #navigation li.einloggen {
        width: 150px;
        height: 62px;
        background-image: url('images/navigation/einloggen.png');
    }

    Die Grafiken dafür sind als PNG-datei erstellt, so dass ein durchsichtiger Hintergrund möglich ist. Außerdem ist in einer Grafik jeweils der Normal-Zustand und auch der hover-Zustand (bei Mausberührung) gespeichert. Siehe als Beispiel:
    http://www.zauberhogwarts.de/design/images/navigation/einloggen.png
    Bei :hover wird die Position des Hintergrundbildes verschoben, so dass mal der eine, mal der andere teil zu sehen ist. Das sieht im CSS-Code so aus:
    Normalzustand
    #head #navigation li {
        float: left;
        display: block;
        margin: 0 5px;
        background-position: top;
    }

    :hover-Zustand
    #head #navigation li:hover {
        background-position: bottom;
    }

    Das ganze sieht auf den ersten Blick recht hübsch aus, ist aber auch arbeitsaufwendig und unflexibel.

    Beitrag zuletzt geändert: 29.6.2016 20:26:56 von mein-wunschname
  4. Autor dieses Themas

    fantastic-hogwarts

    fantastic-hogwarts hat kostenlosen Webspace.

    Danke:) Ich weiß noch nicht ob ich es ausprobierenwerde.
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!