Winfried Sobottka betreffend CSS und tolle Button-Menüs / HTML, HTML für Einsteiger, Klick-Buttons, HTML-Links, HTML-Menüs


Wenn ich ehrlich über meine Mühen schreibe, das eine oder andere herauszufinden, so wird es natürlich immer welche geben, die da sagen können: „Meine Güte! Da hätte er sich aber geschickter anstellen können!“ Diesen Leuten möchte ich sagen, dass sich eben nicht alle Menschen immer optimal geschickt anstellen, auch ich nicht. Und diesen Leuten möchte ich sagen, dass sich daraus die Menschenpflicht ableiten lässt, letztlich alles so einfach den Informationsbedürfnissen der Menschen entsprechend darzulegen, wie es überhaupt möglich ist.

Materielle Informationsfreiheit setzt nicht nur voraus, dass alles so veröffentlicht werden kann, dass es für alle zugänglich ist, sondern auch, dass es so dargeboten wird, wie es den Informationsbedürfnissen der Menschen entspricht, und die sind nun mal, insofern bin keine Ausnahme, nicht stets und jederzeit von ultimativ genialem Geiste beseelt. Kurz gesagt: Im Grunde sind wir alle zumindestens gelegentlich Trottel, und darum sollte man alles für Trottel verständlich erklären.

Schon vor zwei Jahren bewegte mich die Frage, wie ich abgesehen von den one.com-Standard-Homepage-Vorlagen (templates) button-Menüs in meinen HTML-Seiten einsetzen könne.

Ich eröffnete mit dem one.com Page-Composer eine neue Unter-HP auf Basis einer Standardvorlage von one.com, die ein mein mir gefällig erscheinendes Button Menü enthielt. Dann löschte ich alles andere als das Button-Menü, also Bilder, Texte, Tabellen. Dann legte ich die Unterseiten an, die ich haben wollte. Dann probierte ich ein wenig in den Quelltexten herum, um das Menü dann letztlich so auf der Seite zu haben, wie ich es dort haben wollte. Vor allem war es mir darum gegangen, auch zwei voneinander unabhängige Button-Menüs einsetzen zu können. Das bekam ich dann hin, aber nicht ganz: Speicherte ich eine so veränderte Seite wieder mit dem Web-Composer ab, dann wirbelte er mir wieder eine Menge Farbattribute durcheinander. Praktisch ahnungslos, kam ich damals am Page-Composer aber nicht vorbei.

Aber das Thema klickbarer Buttons mit Links und Ankern interessierte mich natürlich ganz besonders, als ich mich jetzt endlich einmal ein wenig mit HTML und CSS befasste. Festzustellen ist zunächst, dass es gar keine unmittelbare Lösung dafür gibt, in einem Menü den Button besonders zu markieren, der anzeigt, auf welcher Seite man sich gerade befindet, weder „link“ noch „visited“ noch „active“ usw. entsprechen dem Tatbestand. Also gibt es nur die mittelbare Lösung: Man muss auf jeder Seite den Button-Link von der Seite selbst (auf der man sich gerade befindet, wenn man sie aufruft) als eine eigenständige Klasse behandeln, was im CSS-Teil der HTML-Datei(zwischen <head> und </head> z.B. so aussieht:

<style type=“text/css“>

<!–

a.cssmenu:link {

width : 150px;

color : #000000;

background-image: url(bilder/buttonx01.jpg);

text-align : center;

text-decoration : none;

font-size : 14px;

border-top : 1px black;

border-right : 1px black;

border-left : 1px black;

border-bottom : 1px black;

padding-top : 2px;

padding-right : 4px;

padding-left : 4px;

padding-bottom : 2px;

margin-right : 2px;

}

a.cssmenu:visited {

width : 150px;

color : #000000;

background-image: url(bilder/button02.gif);

text-align : center;

text-decoration : none;

font-size : 14px;

border-top : 1px ;

border-right : 1px black;

border-left : 1px;

border-bottom : 1px;

padding-top : 2px;

padding-right : 4px;

padding-left : 4px;

padding-bottom : 2px;

margin-right : 2px;

}

a.cssmenu:hover {

width : 150px;

color : white;

background-image: url(bilder/button03.gif);

text-align : center;

text-decoration : none;

font-size : 14px;

border-top : 1px black;

border-right : 1px red;

border-left : 1px black;

border-bottom : 1px black;

padding-right : 4px;

padding-left : 4px;

padding-bottom : 2px;

padding-top : 2px;

}

a.cssmenu2:link {

width : 150px;

color : #000000;

background-color: #ffffff;

text-align : center;

text-decoration : none;

font-size : 16px;

border-top : 1px black;

border-right : 1px black;

border-left : 1px black;

border-bottom : 1px black;

padding-top : 2px;

padding-right : 4px;

padding-left : 4px;

padding-bottom : 2px;

margin-right : 2px;

}

a.cssmenu2:visited {

width : 150px;

color : #000000;

background-color: #ffffff;

text-align : center;

text-decoration : none;

font-size : 16px;

border-top : 1px black;

border-right : 1px black;

border-left : 1px black;

border-bottom : 1px black;

padding-top : 2px;

padding-right : 4px;

padding-left : 4px;

padding-bottom : 2px;

margin-right : 2px;

}

a.cssmenu2:hover {

width : 150px;

color : white;

background-image: url(bilder/button03.gif);

text-align : center;

text-decoration : none;

font-size : 14px;

border-top : 1px black;

border-right : 1px red;

border-left : 1px black;

border-bottom : 1px black;

padding-right : 4px;

padding-left : 4px;

padding-bottom : 2px;

padding-top : 2px;

}

//–>

</style>

Damit sind für alle Buttons innerhalb des Menüs zwei Klassen der Darstellung festgelegt: Klasse cssmenu2 für den Button der jeweiligen Seite, und cssmenu für alle anderen Buttons. So kann man den Button, der auf die Seite selbst verlinkt, beliebig anders gestalten als die übrigen Buttons, für „hover“ würde sich z.B. die Anzeige „hier sind Sie gerade!“ empfehlen, und für „link“ ein besonders markanter Button, zu bestimmen über background-image und color in den CSS-Vorgaben.

Im HTML-Programm („body“) sieht das Menü dann z.B. im Falle der Seite sub-02.html so aus, dass nur der Button für den LINK „sub-02.html“ der Klasse cssmenu2 zugewiesen wird, alle anderen der Klasse cssmenu:

<a class=“cssmenu“ href=“index.html“>&nbsp;Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

<a class=“cssmenu“ href=“sub-01.html“>&nbsp;Schwerpunkte&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

<a class=“cssmenu2″ href=“sub-02.html“>&nbsp;Service&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

<a class=“cssmenu“ href=“sub-03.html“>&nbsp;Pers&ouml;nliches&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

<a class=“cssmenu“ href=“sub-04-kontakt.php“>&nbsp;Kontakt&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

<a class=“cssmenu“ href=“sub-05.html“>&nbsp;Impressum&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

Die vielen erzwungenen Leerzeichen (&nbsp;) sollten nicht verwirren, sie dienen nur der Auffüllung der angezeigten Texte auf die Maximallänge des Buttons, sonst wäre die Anzeige nicht so schön.

Ich werde, inklusive aller Haupt- und Unterdateien, sehr bald ein sehr einfaches Beispiel dazu veröffentlichen, dabei auch auf alle anderen Fragen in dem Zusammenhang eingehen. Ich weiß, dass es für viele trivialer Stoff ist, aber ich weiß auch aus eigener Erfahrung, wie wichtig es für manche in manchen Lagen sein kann, diesen Stoff kompakt geboten zu bekommen, so dass ich es nicht für überflüssig halte.

Dipl.-Kfm. Winfried Sobottka

Dem wahren Satanismus auf der Spur / Karen Haltaufderheide, Doris Kipsieker,Annika Joeres, Die Grünen Wetter, Die Grünen Berlin, Die Grünen Hamburg, Die Grünen Koblenz, Renate Künast, Die Linke Witten

Advertisements

Über belljangler
Dipl.-Kfm. Winfried Sobottka, geb. 16.07.1958 in Waltrop, Kreis Recklinghausen, wohnhaft: Karl-Haarmann-Str. 75 in 44536 Lünen, Tel. 0231 986 27 20

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: