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 g
eschweifte 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.