Hier beschriebe ich, wie bestimmte Teile aus technischer Sicht vom Seitenlayout entstanden sind. Ausschlag gebend dafür war, dass ich oft danach gefragt werde wie ich die Menue Buttons kreiert habe, denn diese sind für den ein oder anderen wahrscheinlich auf eine etwas weniger konventionelle Art entstanden.
Bevor es losgeht, liste ich hier die verwendeten Tools, die alle so gut wie nichts kosten und gerade deshalb möchte ich sie auch hier nennen:
Nvu hat auch ein eingebauten CSS Editor, den ich aber nicht mehr benutzte, da er den Text im CSS-File umformatiert und teilweise sogar Höhenangaben und Breitenangaben gelöscht hat, wenn ich am Seitenlayout gearbeitet habe.
Gehosted wird meine Seite von Bighosting 
Gerade der letzte Punkt ist ganz entscheidend gewesen für meinen gewählten Ansatz. Normaler Weise würde man die Menue Buttons einzeln mit einem Grafikprogramm bearbeiten, jeweils den Text einbauen und diese dann jeweils in der Seite referenzieren. Zum einen will ich nicht jedes Mal den Text mit einem Grafiktool ändern wenn ich einen neuen Button brauche und zum anderen verlängert jede Grafik zusätzlich die Ladezeit. So wollte ich nur zwei Grafiken eine normale und eine hervorgehobene benutzen.
Bevor ich aber auf die Button Programmierung eingehe zunächst aber einmal zum Design der Buttons, was der Abfolge des Erstellens entspricht.
Als erstes habe ich eine neue weisse Grafik (130px x 20px) von oben zur Hälfte mit einer rechteckigen Maske (130px x 10px) mit der Grundfarbe (rgb: 198 125 0 bzw. Hex C67D00) gefüllt. Von oben weil ja in meiner Menue Leiste es ja langsam von oben Schwarz in unten Weiss übergeht:
Dann alles selektiert und mit dem radialen Weichzeichner 7Grad verzerrt:
Diesen Layer habe ich kopiert um daraus den hervorgehobenen Button zu generieren. Zum hervorheben sollter er etwas „leuchten“. Dazu gibt es das Glow-Tool (Radius 2 Helligkeit -68 und Kontrast -54)
Damit auch noch ein „Knopf“ Eindruck entsteht habe ich einen neuen leeren Layer mit Schwarz gefüllt und aus diesem mit der rechteckigen Maske einen Rand (2px breit) „ausgestanzt“:
alles Markiert und mit Gaussscher Unschärfe 3px erhält man das:
Nun wurden die Layer im Wechsel übereinander gelegt,
und als button.jpg bzw. button_hover.jpg gespeichert. Ergebnis: die
Buttons so wie ich sie hier auf der Seite verwende.
Normal:
Hervorgehoben:
Simpel, einfach und das passt sich hervorragend in das Farbschema meiner Seite ein. Nun galt es diese mit den Anforderungen wie oben beschrieben zu integrieren.
Die Internetseite SELFHTML ist für mich als „Hobbyprogramierer“ immer eine gute Hilfe. Für meine Anforderungen fand ich jedoch keine für mich befriedigende Antwort. Also habe ich mich sebler ans Werk gemacht.
Um den Button nun anzuzeigen kann ich nicht das Standard <a href“…“ > img src=“…“ alt““ </a> verwenden da ich ja kein Text mit dem Grafiktool auf dem Button generiert habe. Dies würde für alle Links einfach einen Button ohne Text zeigen. Eine „background-image“ kann man so auch nicht einbinden. Also definiere ich ein Bereich mit „div“ der als Style einen Background haben kann. Da ich so viel wie möglich im Style Sheet „verstecken“ möchte habe ich eine neue „id“ für „div“ in meinem style.css File definiert, so dass möglichst wenig Formatierungen im HTML Doc notwendig sind:
div#menue_button
{width: 130px; height: 20px; margin-top: 1px; background-image:
url(bilder/button.jpg); text-align: center; vertical-align: middle;}
„menue_button“ ist die zu referenzierende ID im HTML Doc. Die Breite und Höhe wird mit „width“ und „heigth“ gleich der Grösse meines Buttons gesetzt. Mit „margin-top“ sorge ich dafür, dass es zwischen den Buttons im Menue immer einen Abstand von mindestens 1px hat. background-image: url(bilder/button.jpg) bindet nun den normalen Button als Hintergrundbild ein. Mit text-align und vertical-align sorge ich dafür, dass der Linktext immer schön in der Mitte ausgerichtet ist.
Benutzt wird nun der „style“ im HTML Doc nun wie folgt:
<div
id="menue_button">
<a style="padding: 0px 13px;"
href="….">Kontakt NixtrixUs</a>
</div>
Damit erscheint dann schon einmal der normale Button mit dem Link. Warum ich da noch ein „padding“ habe erkläre ich später, nur so viel schon an dieser Stelle gesagt, damit ist auch der gesamte Button sensitiv wenn man mit der Maus drüber geht. Das reicht nun aber nicht aus, wenn ich den Button hervorheben möchte, wenn ich mit der Mouse drüber bin.
Da hilft die Pseudoklasse a:hover im CSS Sheet mit einem Trick:
a:hover{color: rgb(00, 0, 0); text-decoration:none; background-color:#080; background-image: url(bilder/button_hover.jpg);}“color” bestimmt hier die Farbe vom Text wenn ich mit der Maus über der Referenz bin. „text-decoration:none;“ bewirkt, dass der Unterstrich unter dem Linktext nicht gezeigt wird. „background-color:#080“ bestimmt eigentlich die Farbe mit dem der Linktext hinterlegt werden soll, diese ist mir aber total egal. Ich brauch diese Anweisung nur, damit auch „background-image: url(bilder/button_hover.jpg);“ wie gewünscht den Button „verändert“ bzw. den normalen Button von „div“ überzeichnet. Ohne diesen Umweg über die Hintergrundfarbe zeigt mein IE Browser den hervorgehobenen Button nicht an.
Zurück zum „padding: 0px 13px;“. Ohne dem würde immer nur der hervorgehobene Hintergrund da erscheinen wo der Text vom Link steht und auch immer rechts oben ausgerichtet. Mit „padding: 0px 13px;“ erreiche ich nun eine automatische Zentrierung und dass der Button wunderbar komplett überzeichnet werden kann. Dies muss ich für jeden neuen Linktext natürlich auf die entsprechende Textlänge anpassen.
Mit wenig Code habe ich mein Ziel damit erreicht. Mein PDA „frisst“ den Code auch, ohne Maus sehe ich das Hervorheben aber natürlich nicht. Anregungen und Kommentare nehme ich sehr gerne entgegen und auch Feedback wenn es bei anderen Browsern nicht funktioniert.
