Floating Layer mit CSS und DHTMLWebsite-Elemente positionieren

Positionierung mit CSS

Floating Layer mit CSS und DHTML

Das primäre Ziel bei der Definition von CSS ist die Trennung zwischen Layout und Inhalt. Dabei werden wie bei einer Formatvorlage in einer Textverarbeitung wie Word verschiedene Formatierungseigenschaften zusammengefasst und mit einem Namen versehen. Dieses Format wird anschließend über eine ID dem HTML-Tag zugewiesen.

CSS erlaubt jedoch nicht nur, das Aussehen von Elementen innerhalb einer HTML-Seite zu beeinflussen, sondern auch deren Position. Die Stylesheets eignen sich sehr gut dazu, Elemente innerhalb einer Seite relativ oder absolut an einer bestimmten Position zu halten oder an einer bestimmten Position erscheinen zu lassen.

Mit dieser Technik verhelfen Sie dem Besucher Ihrer Site ohne großen Aufwand zu mehr Informationen und einer höheren Bequemlichkeit: Wichtige Elemente wie die Navigation bleiben an einer zentralen Stelle, und Zusatzinformationen können zu bestimmten Ereignissen eingeblendet werden.

Bei der Entwicklung der Beispiele wird darauf geachtet, dass die Kompatibilität zu den großen Browsern gewährleistet ist. Sie sollten dies bei Entwicklungen im Bereich CSS und DHTML stets vor der Veröffentlichung neuer Seiten testen. Zusätzlich ist es auch empfehlenswert, den Quellcode auf syntaktische Korrektheit zu überprüfen. Es gibt eine Reihe von Tools, die sowohl online als auch offline ihren Dienst versehen. Das W3 Konsortium stellt mit Jigsaw (jigsaw.w3.org/css-validator) einen kostenlosen Service zur Verfügung, der Probleme in allen drei CSS-Versionen finden kann.

Die einzige Voraussetzung für die Wirksamkeit dieser Entwicklungen ist die Aktivierung von Javascript. Ist diese Funktionalität innerhalb des Browsers nicht gegeben, so wird auch die Positionierung fehlschlagen.

Grafik in die Ecke

Floating Layer mit CSS und DHTML

Damit Sie einen besseren Überblick über die Funktionsweise von Layern bekommen, positionieren Sie im ersten Beispiel eine Grafik in der rechten oberen Ecke des Fensters.

Die initiale Aktivierung geschieht über das onLoad-Ereignis des Body-Tags. Hier rufen Sie die init()-Funktion aus dem Skript-Bereich des Headers auf.

Weiterhin definieren Sie im Body-Bereich einen Container, in dem Sie das Logo, dessen Aussehen und die Verlinkung definieren. Auf dieses Element wird im Folgenden immer namentlich zugegriffen (ID=”mylogo”).

Da mehrere unterschiedliche Browser bedient werden müssen, ist es notwendig, das Logo auf unterschiedliche Art und Weise anzusprechen.

Im ersten Schritt innerhalb der Funktion init() machen Sie das Logo sichtbar und rufen im Anschluss die Funktion keep_pos() auf. Der nächste Schritt ist die Ermittlung der aktuellen Größe des Fensters. Die Breite ermitteln Sie über die beiden Eigenschaften window.innerWidth und window.pageXOffset. Der erste Wert beschreibt die innere Breite des Fensters inklusive der Scrollbar, der zweite die Anzahl von Pixeln, die durch das Scollen nach rechts verdeckt wird.


var x=window.innerWidth+window.pageXOffset-100
var y=window.pageYOffset


Zur richtigen Positionierung wird die Anzahl von Pixeln benötigt, die beim Scollen nach unten verdeckt wird. Mit den folgenden beiden Werten erledigen Sie die Positionierung:


document.all.mylogo.style.posLeft = n
document.all.mylogo.style.posTop = n


Damit das Logo fortlaufend neu positioniert wird und auf Veränderung beim Scrollen sowie bei der Größenänderung des Fensters reagiert werden kann, benötigen Sie einen Timer. Dies wird über den Befehl setTimeout realisiert. Der erste Parameter ist die aufzurufende Funktion, der zweite das Zeitintervall bis zum nächsten Aufruf. Die temporale Angabe erfolgt in Millisekunden, der Wert 1000 entspricht also einer Sekunde.

setTimeout("keep_pos()", 500)

Dieser Befehl bewirkt die Einrichtung einer rekursiven Schleife, die im diesem Beispiel alle 500 Millisekunden die Funktion keep_pos() neu aufruft und damit zu einer Neupositionierung des Logos führt.

Fixierte Fenster

Floating Layer mit CSS und DHTML

Nachdem die Funktionsweise im Allgemeinen klar geworden ist, betrachten Sie im zweiten Beispiel eine Art Unterfenster, das am oberen Ende des Browserfensters platziert wird und dort auch während des Scrollvorgangs seine Position nicht verändert.

Das innere Fenster definieren Sie über eine Tabellenstruktur. Diese ist zur besseren Formatierung sinnvoll. Sie können die Tabelle natürlich durch mehrere Spalten und Links auch noch wie jede andere Tabelle erweitern. Das Beispiel stellt lediglich eine Rahmenkonstruktion dar und kann beliebig ausgebaut werden.

Sehr wichtig ist die Festlegung des Doctypes zu Beginn des Dokuments. Gerade der Firefox-Browser hat ein wenig Probleme bei der Interpretation von position:absolute innerhalb des Body-Tags. Sie müssen deswegen in den strict-Modus schalten. Danach hat auch der Firefox-Browser keine Probleme mehr mit den Positionsangaben.

Da der Layer immer in der linken oberen Ecke platziert werden soll, ist bei diesem Beispiel keine separate Berechnung mehr für die x- und y-Koordinaten notwendig. Die y-Koordinate setzen Sie über die div-Angabe immer auf den festen Wert 0.

Layer als Tippgeber

Floating Layer mit CSS und DHTML

Nachdem Sie einen Einblick in die Positionierung von Elementen bekommen haben, steigen Sie im nächsten Schritt ein wenig tiefer in die Programmierung von Layern und deren Positionierung ein. Beim Überfahren eines Links soll nun eine Tippbox angezeigt werden, die zusätzliche Hinweise in Textform anzeigen soll.

Das Ein- und Ausblenden der Tipps steuern Sie durch die OnMouse-Ereignisse des Anchor-Tags.



Internet Professionell


Bei der ersten Berührung des Links wird die Box aktiviert, gezeichnet und der Layer auf sichtbar geschaltet. Gleichzeitig wird durch die Bewegung der Maus auch das Ereignis onMouseMove aktiviert, das die Positionierung des Layers übernimmt.

document.onmousemove=tipp_positionieren

Die Position in der Vertikalen der linken oberen Ecke legen Sie über die clientX-Variable, die den x-Wert des Mauszeigers relativ zum Fenster, und die scrollLeft-Variable, die den Abstand zwischen dem Rand des Elements und dem linken Rand seines Inhalts beschreibt, fest. Analog dazu ermitteln Sie die Position innerhalb der Horizontalen.


var pos_x=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var pos_y=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;


Damit die Tippbox nicht an einem der angrenzenden Browserränder aneckt, prüfen Sie den Abstand. Ist der Mauszeiger zu nah an einem der Ränder, wird die Box auf der horizontalen oder vertikalen Achse verschoben.

Verlässt der Mauszeiger den Aktionsradius der Verlinkung wieder, tritt das Ereignis onMouseout auf den Plan. Darüber wird die Funktion tipp_ausschalten aktiviert, die den Layer unsichtbar macht und die sonstigen Eigenschaften initialisiert oder auf einen neutralen Wert setzt.


function tipp_ausschalten(){
if (ns6||ie){
tipp_an=false
mytipbox.style.visibility="hidden"
mytipbox.style.left="-1000px"
mytipbox.style.backgroundColor=''
mytipbox.style.width=''
}


Tipp mit Bild

Floating Layer mit CSS und DHTML

In manchen Fällen ist es auch nicht schlecht, im Tippkasten noch ein Bild darzustellen. Es kann entweder den Link näher beschreiben, so wie im Beispiel, oder auch ein zusätzliches Bild zum bereits vorhandenen präsentieren.

Als Basis dient das dritte Beispiel. Hier erzeugen Sie nach dem Aufruf der Funktion tipp_anzeigen() eine Tabelle. Über die Hilfsvariable temp generieren Sie diese und reichern sie mit einem Text aus dem Aufruf an.


var temp = "

\n" +" \n" +text+" " +"\n \n" +"

"


Die komplette Konstruktion weisen Sie abschließend der Eigenschaft innerHTML von mytipbox zu, was die Ausgabe des HTML-Quelltextes veranlasst. Achten Sie bei der Verlinkung des Bilds unbedingt darauf, dass keine Anführungszeichen um den Bildnamen herum gegeben sind. Sonst kann es zu Problemen beim Aufbau des Strings kommen.

Das restliche Listing kann unverändert bleiben. Abhängig von der Größe des Bildes sollten Sie zudem noch die Breite des Tippkastens verändern. Dies geschieht direkt über die Variable, die Sie dem Aufruf von tipp_anzeigen() mitgeben.

Mit Layern navigieren

Floating Layer mit CSS und DHTML

Auf Basis all dieser Grundlagen sind Sie nun auch in der Lage, eine Tabelle zu generieren, mit der Sie eine statische Navigation schaffen können. Sicherlich ist dies nur sinnvoll, wenn Sie eine Ein-Frame-Seite besitzen, aber auch solche Seiten gibt es immer noch.

Das Schema ist im Wesentlichen das gleiche wie in den vorherigen Beispielen. Sie bauen eine Tabelle auf, die allerdings dieses Mal eine Reihe weiterer Attribute besitzt. Durch die MouseOver– und MouseOut-Eigenschaften werden unterschiedliche Farbschemata CSS-Styles zugewiesen, so dass der jeweils aktive Link farblich unterlegt ist. Die Einstellungen lassen sich im Stylesheet menu_aktiv pflegen.


menu_aktiv{
BORDER-COLOR : #FFFF99 ;
Border-Left : #FFFF99 ;
Border-Top : #FFFF99 ;
Padding-Left : 1px ;
Padding-Top : 1px ;
Background-Color : #FFFF99 ;
}


Das Menü wird dynamisch generiert, und so ist das Hinzufügen weiterer Menüeinträge auch kein Problem. Sie müssen lediglich die beiden Arrays menu_index und menu_link anpassen. Fügen Sie einfach nach Bedarf weitere Einträge parallel in beiden Arrays hinzu.

Die Breite des Menüs bestimmen Sie über die Variable menu_breite, den Abstand von der linken, oberen Ecke mit den beiden Offset-Variablen x_offset und y_offset.

Allgemeine Hinweise

Floating Layer mit CSS und DHTML

DHTML und Layer bringen in vieler Hinsicht Erleichterungen bei der Positionierung von Objekten. Allerdings funktionieren die Skripts nicht auf allen Browsern gleich. Sie sollten daher auf jeden Fall, wie auch in den Beispielen durchgeführt, eine Fallunterscheidung vornehmen und die Funktionalität der Skripts auf den wichtigsten Browsern testen.
Gerade zu Zeiten einer zu nehmenden Bedrohung im Internet sind immer mehr Surfer ohne Javascript oder mit nur bedingt aktiviertem Javascript unterwegs. Sie sollten deswegen auf jeden Fall zu Beginn eine Überprüfungsroutine einbauen, die nachsieht, ob Javascript im Browser aktiviert ist und für diejenigen ohne Javascript eine Alternative anbieten – vor allem, wenn Sie bei Ihrer Navigation auf Javascript setzen.

Alle Dateien und Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.