CSS & Buttonshistory.back Pathfinder   

Funktion-Buttons für die Homepage

Edit: Letze Änderung [ Donnerstag , der 16.04.2009 ]


Anbindung:  Audio / Videocontroller
Lösungsweg 1.   <embed src="all_of_my_life.wma" width="400" height="44" type="audio/x-ms-wma" controller="true" autoplay="false">

Lösungsweg 2.   <object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="400" height="44"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
type="application/x-oleobject">
    <param name="fileName" value="all_of_my_life.wma">
    <param name="loop" value="1">
    <param name="autoStart" value="0">
    <param name="showControls" value="1">
    <param name="ShowDisplay" value="1">
    <param name="ShowStatusBar" value="1">
</object>

Lösungsansatz 3.   <!--[if lte IE 6]>
<object id="ie" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="400" height="44" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
type="application/x-oleobject">
<![endif]-->

<!--[if gte IE 7]><!-->
<object id="mozilla" data="all_of_my_life.wma" type="audio/x-ms-wma" height="44" width="400">
<!--<![endif]-->
    <param name="src" value="all_of_my_life.wma">
    <param name="fileName" value="all_of_my_life.wma">
    <param name="loop" value="1">
    <param name="autoStart" value="0">
    <param name="showControls" value="1">
    <param name="ShowDisplay" value="1">
    <param name="ShowStatusBar" value="1">
</object>

Abspiel-Controller Audio/Video:  Syntax 1 wurde für Netscape und Opera entwickelt. Auch IE und Firefox lassen sich mit diesem String einbinden. Leider ist die Syntax weder standardkonform noch valide. Zudem läuft sie nicht auf allen Browsern stabil. Die 2. Syntax ist valider Code, jedoch lediglich für den Internet Explorer zugänglich. Im String befindet sich das classid="CLSID.. Attribut, womit die übrige Browserwelt nichts anfangen kann. Anm. Da haben die Redmonder ausnahmsweise mal ihre Arbeit gemacht.

Um das Problem zu lösen, verwendeten wir Lösungsansatz 3.  Wie hier anschaulich zu sehen ist, kombinierten wir die Syntax beider Browser-Lager, um die Mozilla-Fraktion ebenfalls zu bedienen. Gleichzeitig betteten wir das IE-Markup in Conditional Comments ein und machten es somit für Mozilla unsichtbar. Durch diese geschickte Verschachtelung, sind die Angaben zu den Objektparametern nur ein einziges Mal zu notieren!

Seitenanfang scroll up scroll down


<input type="button" value="Download" onclick="location.href='Dateiname.zip'">

Download-Button:  zip-Datei

Seitenanfang scroll up scroll down


<!-- HTML-Code -->   <p id="zip-pos">
<button type="button" name="zip" id="zip"
onclick="location.href='files/test.zip'">Download<span id="zipinfo">In diesem Fenster erscheint die Info zum Download</span>
</button>
</p>   /* CSS-Code */   p#zip-pos {
  position: relative; }

button#zip {
  background: url("img_css/dat_formate/zip.gif") silver no-repeat 5px center;
  border: 3px solid;
  border-color: #e2bf87 #78561d #78561d #e2bf87;
  padding: 6px 10px 6px 27px;
  cursor: help }

button#zip span#zipinfo {
  display: none; }

button#zip:hover {
  color: #006666; }

button#zip:hover span#zipinfo {
  display: block;
  position: absolute; left: 270px; top: -30px;
  border: 2px solid;
  border-color: #e2bf87 #78561d #78561d #e2bf87;
  background: silver;
  padding: 10px 14px;
  white-space: nowrap; }

Download-Button mit Background-Image, über CSS eingebunden und formatiert. Der Vorteil: Durch die zentrale Formatierung in CSS, erhält der Button auf jeder Seite in der er eingebunden wird, das gleiche Layout. Wenn Sie den Button hovern erscheint als kleines Highlight eine Infoleiste, in der Sie Ihre online gestellten Downloads kommentieren können.

Ein erweiterter Schritt wäre der völlige Verzicht auf das <button>-Element. Der Aufbau ließe sich dann mit reinem CSS Gut noch vielfältiger und kreativer gestalten. Zumindest hätten IE5/6 auch etwas davon, da die beiden obige Hoveranweisungen ohne Hilfsmittel leider nicht umsetzen.

Seitenanfang scroll up scroll down


<input type="button" value="Play Midi" onclick="location.href='Dateiname.mid'">

Abspiel-Button:  Midi-Datei

Seitenanfang scroll up scroll down


<input type="button" value="Play Video" onclick="location.href='Dateiname.avi'">

Abspiel-Button:  Play-Video

Seitenanfang scroll up scroll down


<input type="button" value="E-Mail schreiben" onclick="location.href='mailto:ihre-mail.de'">

E-Mail-Button:  e-Mail Schreiben

Seitenanfang scroll up scroll down


<input type="button" value="Gehe zu Seite 1" onclick="location.href='Seite1.htm'">

Seitenwechsel-Button:  gehe zu Seite...

Seitenanfang scroll up scroll down


<input type="button" value="Seite drucken" onclick="javascript:self.print()">

Druck-Button:  Seite drucken

Seitenanfang scroll up scroll down


<input type="button" value="zurück" onclick="javascript:history.back()">

Zurück-Button: Mit der Funktion "history.back" gelangen Sie zur letzten besuchten Seite. Die Funktion dient auch zum Navigieren innerhalb einer Website.

Seitenanfang scroll up scroll down


<input type="button" value="vorwärts" onclick="javascript:history.forward()">

Vorwärts-Button: Mit der Funktion "history.forward" gelangen Sie vor.

Seitenanfang scroll up scroll down 


<form name="passwort" action="input_password.htm">
 <input type="password" name="word" size="27">
 <input type="button" value="ok" onclick="location.href=this.form.word.value+'.html'">
</form>

Passwortschutz: Im Eingabefeld geben Sie den Namen Ihrer passwortgeschützten Html-Datei ein, allerdings ohne die Datei-Endung .html und drücken dann auf OK.

Seitenanfang scroll up scroll down


C S S - Selektoren

Attribut-Selektoren auf unserer Website

Edit: Letze Änderung [ Donnerstag , der 16.04.2009 ]

/* Attribut Selektoren [attr^="Wert"] mit CSS 3 */


a[href^="http://"]   a[href^="https://"]                      Selektor: [ ^= ] am Anfang   a[href$=".pdf"]                                               Selektor: [ $= ] am Ende
a[href$=".txt"]
a[href$=".zip"]
a[href$=".mp3"]      a[href$=".wma"]
a[href$=".mpg"]      a[href$=".mpeg"]     a[href$=".wmv"]
a[href$=".swf"]
a[href$=".xls"]      a[href$=".ods"]
a[href$=".doc"]      a[href$=".odt"]
  a[href*=".rss2"]     a[href*=".rss"]      a[href*=".feed"]    Selektor: [ *= ] in der Mitte  
/* Beispielcode: a[href^="alle ausgehenden Hyperlinks"] */


ul li a[href^="http://"], ul li a[href^="https://"] {
background: url("img/folder_beige_href_http.png") no-repeat 0px center; }

ul li a[href^="http://"]:hover, ul li a[href^="https://"]:hover {
background: url("img/folder_orange_href_http.png") no-repeat 0px center; }

  <!-- und Hypertext Markup Language... absolut schlank und übersichtlich -->   <ul>
  <li><a href="files/test.zip">Datei.zip</a></li>
  <li><a href="files/test.xls">Datei.xls</a></li>
  <li><a href="files/test.doc">Datei.doc</a></li>
  <li><a href="files/test.pdf">Datei.pdf</a></li>
  <li><a href="mailto:ihre-mailanschrift.de">.mailto</a></li>
  <li><a href="files/test.wma">Datei.wma</a></li>
  <li><a href="files/test.wmv">Datei.wmv</a></li>
  <li><a href="http://www.gibbstech.co.uk/">GIBBS Quadski</a></li>
</ul>

Für Technik-Interessierte zeigen wir im obigen Textarea die auf unserer Website verwendeten Attribut-Selektoren a[attr^="Wert"], nach der kommenden CSS3 Spezifikation. Wie am Beispiel der unteren Link-Formatierung anschaulich zu sehen ist, erhielten Verweise mit unterschiedlichen Funktionen, durch den Einsatz der Attr.-Selektoren ihre individuelle optische Charakteristik. Positiver Nebeneffekt: Für die Menueführung entsteht ein völlig schlanker und klassenloser class="Wert" Quelltext. Leider können der IE6.0 und andere ältere Browser nichts damit anfangen. [ Browser-Update siehe unter Sitetechnik ]

Auf der Seite CSS3 Selektoren finden Sie eine nahezu komplette Übersicht aller künftigen Selektorgruppen und deren Funktionen. Außerdem konnen Sie dort testen, ob Ihr Browser für diese Technologie schon gerüstet ist.

Seitenanfang scroll up scroll down