Heinz-Jürgen Schymura

Menüsystem 2 und CSS


Hier werden ich mich nicht sehr über über CSS auslassen, sondern nur soweit, wie hier im Menüsystem 2 etwas Neues hinzu gekommen ist. Falls Sie mehr wissen wollen, oder Links benötigen um tiefer einzusteigen, so sehen Sie bitte unter Hilfe Menüsystem 1 nach.
Auch hier sind die Schriftarten und -größten für alles festgelegt worden, auch das kopf_Bild und das kopfmenue und auch die unterschiedlichen Bildschirm-(ausgabe)bereiche und auch das linksmenue.
Hier zeige ich nur die  Jahresmenüs im Linksmenü als Tabelle:
a.jahre {
        text-decoration:none;
        display:block;
        color:Blue;
        width:190px;
        padding:2px;
        border-top:1px solid #000066;
        border-right:1px solid #000066;
        border-bottom:1px solid #000066;
        border-left:1px solid #000066;
        background-color:Silver;
        text-align: center;
    }
    a.jahre:visited {
        color:Blue;
        background-color:Silver;
  }
  a.jahre:hover  {
    color:#ffA500;
    background-color:Gray;
  }
  a.jahre:focus {
    color:Yellow;
    background-color:Gray;
  }
   a.jahre:active {
    color:Yellow;
    background-color:Gray;
  }
Und nun auch die Monatsmenüs im Linksmenü als Tabelle:
a.monate {
        text-decoration:none;
        display:block;
        color:Blue;
        width:170px;
        padding:2px;
        border-top:1px solid #000066;
        border-right:1px solid #000066;
        border-bottom:1px solid #000066;
        border-left:1px solid #000066;
        background-color:Silver;
        text-align: center;
    }
    a.monate:visited {
        color:Blue;
        background-color:Silver;
  }
  a.monate:hover  {
    color:#ffA500;
    background-color:Gray;
  }
  a.monate:focus {
    color:Yellow;
    background-color:Gray;
  }
   a.monate:active {
    color:Yellow;
    background-color:Gray;
  }
Dann noch die Tagesmenüs im Linksmenü als Tabelle:
  a.tage {
        text-decoration:none;
        display:block;
        color:Blue;
        width:30px;
        padding:2px;
        border-top:1px solid #000066;
        border-right:1px solid #000066;
        border-bottom:1px solid #000066;
        border-left:1px solid #000066;
        background-color:Silver;
        text-align: center;
    }
    a.tage:visited {

        color:Blue;
        background-color:Silver;
  }
  a.tage:hover  {
    color:#ffA500;
    background-color:Gray;
  }
  a.tage:focus {
    color:Yellow;
    background-color:Gray;
  }
   a.tage:active {
    color:Yellow;
    background-color:Gray;
  }
Und dann hier auch nochmal, weil es im Menüsystem 2 fest vorgesehen ist als Möglichkeit, auch im MenueGenerator2, die Ausgabe von Span Texten, wenn sich der Mauscursor über dem Link befindet:
  a span {
    display:none;
    width:300px;
  }
  a:hover span {
    display:block;
    position:absolute;
    top:auto;
    left:auto;
    padding:2px;
    margin:5px;
    color:Blue;
    background-color:Silver;
    border:1px solid black;
    text-align:center;
  }
Der Trick ist also, dass für <span> im Link die Anzeige verboten ist (display:none;). Nur wenn der Mauscursor sich über dem Link befindet (hover) wird der Text angezeigt, der sich zwischen <span> und </span> im Link befindet.
Beispiel 1:
<a class="tage" href="index.php?Auswahl=Archiv&amp;Jahr=2009&amp;Monat=Mai&amp;Tag=27">27<span>Münchehof, Lautenthal, Hahnenklee</span></a>
Hier wird also Münchehof, Lautenthal, Hahnenklee angezeigt, wenn sich der Mauscursor über der 27 auf der Webseite befindet
Beispiel 2:
<a href="images/Gross/2009/Mai/27_0001.jpg" target="_blank"><img src="images/Normal/2009/Mai/27_0001.jpg" alt="2009/Mai/27_0001.jpg" border="0" height="600" width="800"><span>Blick vom Hangweg, etwa 1 km vor dem
Grünen Platz nach Westen</span></a>
Und hier Blick vom Hangweg, etwa 1 km vor dem Grünen Platz nach Westen, wenn sich der Mauscursor über dem Bild befindet.