Menü? Brauche dringen Hilfe!

lima-city → Forum → Sonstiges → Spam und sonstiges Unvergütetes

Autor dieses Themas

fantastic-hogwarts hat kostenlosen Webspace.

18:38, 29.6.2016

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

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

mein-wunschname hat kostenlosen Webspace.
20:17, 29.6.2016
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
Autor dieses Themas
fantastic-hogwarts

fantastic-hogwarts hat kostenlosen Webspace.

15:08, 1.7.2016
Danke:) Ich weiß noch nicht ob ich es ausprobierenwerde.
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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city