• Beschreibungen
• Hilfe
• Downloads
• Versionen
• Impressum

Menüsystem 1 und CSS

Hier werden ich mich etwas über CSS auslassen, wenigstens soweit, wie Sie es verstehen sollten, damit Sie Ihre zentrale CSS-Datei Ihren Wünschen gemäß erstellen können. Als Vorlage verwende ich große Teile meiner zentralen CSS-Datei bei meiner anderen Webseite, die sich mit Wandern beschäftigt. Wenn Sie sich mehr mit CSS beschäftigen wollen, so können Sie hier näheres erfahren.
Als erstes wird festgelegt, für welches Gerät (Bildschirm, Drucker, etc)  die CSS Formatierungen gelten sollen. Bei mir ist das für alle Geräte gleich.
@media all
{
 Auf die geschweifte Klammer auf muss dann ganz am Ende der Datei auch wieder eine geschweifte Klammer zu folgen, damit es keinen Fehler gibt.
Dann habe ich festgelegt, dass alle Bilder als Standard keinen Rahmen haben sollen.  
* img {border:0;}
Sie sehen, ein ganzer Bereich kann auch aus nur einer Zeile bestehen.
Für den gesamten body Bereich der HTML-Seite habe ich dann die Schriftart und Schriftgröße festgelegt.
body {
    margin:0;
    padding:0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style:normal;
    font-variant:normal;
    font-size:11pt;
    font-weight:normal;
    line-height:1.4em;
    color:#000066;
    background-color:#FFCC66;
}
Hier werden Sie natürlich Ihre eigenen Schriftarten und Schriftgrößen, als natürlich auch eigene Farben setzen wollen. Denken Sie bei den Farben jedoch daran, wenn irgend möglich nur die websicheren Farben zu wählen. Also nur die, die auf allen Betriebssystemen gleich aussehen. Es schützt doch vor Überraschungen...... 
Dann habe ich die Bildschirmbereiche festgelegt. Sie können diese Bereiche natürlich anders benennen, denn der Besucher Ihrer Webseite kann sich natürlich den Quelltext (HTML-Text) der Webseite anzeigen lassen, wenn er/sie möchte und sich dann eventuell über komische Namen amüsieren.......
Als erstes habe ich den Kopfbereich festgelegt, in dem ich links ein Bild anzeigen will und rechts daneben die Hauptmenüzeile, die immer sichtbar sein soll.
#kopf_container {
    position:fixed;
    top:0; left:0; right:0;
    margin:0;
    height:40px;
    z-index:3;
}
Hier ist wichtig, dass Sie die Höhe Ihrer Schriftart und Schriftgröße anpassen. Die Positionsangabe fixed hält den Bereich immer an der gleichen Stelle, da mag der Besucher noch so sehr mit der Maus scrollen.......
#kopf_Bild {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    height:100%;
    color:#000066;
    background:#FFCC66;
    z-index:3;
    margin:0;
    padding:0;  
}
Falls Sie auf Ihrer Webseite links oben kein Bild einbauen wollen, so können Sie diesen Bereich einfach weglassen.
#kopf_Menue {
    position:absolute;
    top:0px; left:215px; right:0; bottom:0;
    height:100%;
    color:#000066;
    background:#FFCC66;
    z-index:3;  
    margin:0;
    padding-top:10px;
}
Falls Sie andere Bildgrößen verwenden, dann müssen Sie natürlich den Anfang der Menüzeile (left:215px;) ändern.
Das waren die Angaben für den feststehenden Kopfbereich jeder einzelnen Seite.
Nun die Ausgabebereiche. Davon habe ich insgesamt 2, da bei den Wanderungen noch ein weiteres Untermenü nach dem eigentlichen Untermenü vorhanden ist. Deshalb setzte ich diese auch wieder in einen "Container".
#ausgabe_container {
    padding-top:45px;
    padding-bottom:0;
    padding-left:0;
}
Also oben Platz lassen, links und unten nicht.
#ausgabe {
    padding: 0 0 0 0em;
    margin-left:240px;
    margin-right:0.5em;
}
Da dieser Bereich im ausgabe_container liegen soll ist also nur links Platz zu lassen.
#wander_ausgabe{
    padding: 0 0 0 0em;
    margin-left:350px;
    margin-right:0.5em;
}
Da hier wie gesagt noch eine weitere Untermenüauswahl Platz haben soll, brauche ich halt mehr Platz links, ehe den Bereich für die Textausgabe anfängt.
Da der Internet Explorer mehr als einige Schwierigkeiten (Fehler) hatte in den Versionen kleiner als 7 und dann auch noch unterschiedliche, so habe ich statt Browserweichen die offiziellen Star-HTML-Hacks genutzt. 
Das heißt nichts anderes, als dass Microsoft seinem Browsern diese Schalter eingebaut hat, um Fehler zu beseitigen. Es wird dem IE weis gemacht, es gäbe noch eine höhere Ebene als HTML. Nur er versteht das, alle anderen Browser überlesen es einfach und halten sich an die vorher gemachten Festlegungen. Ein betreffender Microsoft Browser jedoch überschreibt eventuelle vorherigen Angaben mit den neuen Werten.
* html, * html body {
    height:100%;
    overflow:hidden;
}
Also für den gesamten body Bereich.
* html #kopf_container {
    position:absolute;
    width:100%;
    padding-right:16px;
}
* html #kopf_Bild {
    position:static;
}
* html #ausgabe_container  {
    padding-top:45px;
    height:100%;
    overflow:auto;
}
* html div#ausgabe {
    height: 1em;
    padding-top:1em;
}
* html div#wander_ausgabe{
    height: 1em;
    padding-top:1em;
}
Diese beiden letzte Anweisungen bereinigen einen Rechenfehler von 3 Pixeln des IE.
Dann habe ich für alle Überschriftengrößen (h1..h5) die Größe und das weitere Aussehen festgelegt. Denken Sie daran: Eine Änderung hier wirkt sich sofort auf allen Ihren Seiten aus. Als Beispiel hier nur die Angabe für die größte und die kleinste Überschrift.
h1 {
    font-size:1.8em;
    margin: 0 0 0.25em 0;
    padding-top:1.5em;
}
h5 {
    font-size:1.0em;
    margin: 0 0 0.30em 0;
    padding-top:1em;
    font-weight:bold;
}
Als weiteres folgen dann die Angaben für die Elemente aus denen das Kopfmenü besteht.
#kopfmenue {
    color:Blue;
    background-color:#FFCC66;
    width:100%;
    margin:auto;
}
#kopfmenue ul {
    list-style-type:none;
}
#kopfmenue li {
    display:inline;
    margin-top:5px;
    margin-bottom:5px;
    padding-top:15px;
}
#kopfmenue li a {
    text-decoration:none;
    color:Blue;
    padding-right:10px;
    padding-left:10px;
    border-top:5px solid #000066;
    border-right:5px solid #000066;
    border-bottom:5px solid #000066;
    border-left:5px solid #000066;
    background-color:Silver;
}
#kopfmenue li a:visited {
    color:Blue;
    background-color:Silver;
}
#kopfmenue li a:hover {
    color:#ffA500;
    background-color:Gray;
}
#kopfmenue li a:focus {
    color:Yellow;
    background-color:Gray;
}
#kopfmenue li a:active {
    color:Yellow;
    background-color:Gray;
}
Natürlich können Sie das Kopfmenü nennen, wie Sie wollen, es kommt nur darauf an, dass Sie später in den Steuerdateien die entsprechende Angaben machen.  Man muss nicht bei Zustandsänderung eine andere Farben nutzen, manchmal wird dann das Menü zu unruhig. Aber das ist natürlich nur meine Ansicht.
Auch für die Menüpunkt des linken Menüs gibt es ähnliche Festlegungen.
#linksmenue {
    margin:0;
    margin-left:0;
    padding:5px;
    float:left;
    width:195px;
    text-align:center;
}
#linksmenue li {
    list-style-type:none;
    display:block;
    margin-top:0px;
    margin-bottom:0px;
 }
#linksmenue li a {
    text-decoration:none;
    display: block;
    color:Blue;
    width:195px;
    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;
}
#linksmenue li a:visited {
    color:Blue;
    background-color:Silver;
}
#linksmenue li a:hover {
    color:#ffA500;
    background-color:Gray;
}
#linksmenue li a:focus {
    color:Yellow;
    background-color:Gray;
}
#linksmenue li a:active {
    color:Yellow;
    background-color:Gray;
}
Bitte experimentieren Sie ruhig, bis die Menüs Ihren Wünschen entsprechen.
Für die Menüs der 3. Ebene, bei mir nur für die Unter_UnterAuswahlmenüs beim Wandern genutzt, habe ich dann noch diese Festlegungen gemacht.
 #tourenmenue_container {
    margin:0;
    margin-left:3px;
    padding:5px;
    float:left;
    width:100px;
    text-align:center;
}
Sie sehen, auch hier nutze ich so etwas wie einen Container. Da die einzelnen Menüpunkte hier jedoch in einer Tabelle angezeigt werden, ist der einzelne Menüpunkt als Klasse definiert.
a.tourenmenue {
    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.tourenmenue:visited {
    color:Blue;
    background-color:Silver;
}
a.tourenmenue:hover  {
    color:#ffA500;
    background-color:Gray;
}
a.tourenmenue:focus {
    color:Yellow;
    background-color:Gray;
}
a.tourenmenue:active {
    color:Yellow;
    background-color:Gray;
}
Alle anderen Menüs oder menüähnlichen Angaben, die Sie noch brauchen könnten, sind im Wesentlichen von den hier vorgestellten Definitionen abzuleiten.
Auf ein besonderes Schmankerl möchte ich doch noch aufmerksam machen. Bei der Anzeige der Bilder, die ich bei meinen Wanderungen aufgenommen habe, fand ich es schade, dass in der Übersichtanzeige (64 kleine Bilder) nur die Bilder zu sehen waren.
Ich wollte zusätzlich Informationen bei den Einzelbildern anzeigen, es sollte nur keinen Extra-Platz auf dem Bildschirm benötigen. Dies geschieht dadurch, dass die zusätzlichen Informationen eingeblendet werden, wenn sich der Mauscursor direkt über einem Vorschaubild befindet.
Mit den nachfolgenden CSS Festlegungen und den entsprechenden <span> Angaben in den betreffenden Webseiten gelang es.
a span {
    display: none;
}
Beachten Sie: Hier wird die Anzeige untersagt!
a:hover span {
    display: block;
    position: absolute;
    top: auto;
    left: auto;
    padding: 2px;
    margin: 5px;
    color:#000066;
    background-color:#FFCC66;
    border:1px solid black;
    text-align: center;
}
Nur wenn die Maus über dem Bild ist, soll das was zwischen <span> und </span> steht angezeigt werden.
Natürlich wäre es zu einfach, wenn es nicht noch irgendwelche Besonderheiten bei den verschiedenen Browsern gäbe.
* html a:hover span { width: 200px; } 
Für den Internet Explorer < 7 
 *+html a:hover span { width: 200px; }
Nur für den Internet Explorer > 6 (7)
html > body a:hover span { width: 200px; }
Für den Opera etc.....
}
Sehen Sie sich das Ergebnis ruhig auf meiner Wanderwebseite an.
Sollten Sie mit dem Menüsystem 1 und/oder dieser Hilfeanleitung zufrieden sein, so können Sie gern eine Spende an die unter dem Menüpunkt Impressum angegebenen Adresse senden.