[CSS] Layers
#1
Ein Layer ist nichts weiter als eine frei verschiebbare Rahmenkonstruktion, also eine leere Hülle. Das witzige ist, das man mittels CSS mit fast allen HTML Elementen solche Layer machen kann.
Das einzige Problem ist wie immer die Browserkompatibilität, da ältere Browser damit nichts anfangen können. Trotzdem ist es möglich bereits jetzt mit dem Einsatz von Layern zu arbeiten. Die Funktionalität von Layern ist mit ein bisschem CSS wissen schnell durchschaubar, wenn wir uns mal ein Beispiel Layer ansehen:
Code:
<div id="Layer1" style="border:1px solid black; position:absolute; width:200px; height:100px; z-index:1; background-color:#FFFF00;"></div>

Nun eine kurze Erläuterung dazu:

border:1px solid black; = Wir machen einen Rahmen rund um den Layer

position: absolute; = Mit position können Sie die Positionsart bestimmen
absolute : absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.
fixed : absolute Positionierung, gemessen am Rand des Elternelements. Bleibt beim Scrollen stehen.
relative : relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
static : keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).

width:...; height:...; = Höhe und Breite des Layers gemessen in pc (Pica), pt (Punkt), in (Inch), mm (Millimeter), cm (Zentimeter) oder % (Prozentsatz vom Wert des übergeordneten Elements)

z-index:1; = Diese Angabe ist sinnvoll in Verbindung mit mehreren Layern, da sich hier die Sichtposition einzelner Layer bestimmen lässt

background-color:...; = Angabe zur Hintergrundfarbe von Layern

So, damit der Layer aber auch dort angezeigt wird, wo wir wollen, können wir nun Angaben zur Positionierung machen. Dies machen wir wieder mit CSS Befehlen. Die Angaben können genauso wie bei der Höhen/Breiten Angabe gemacht werden. Folgende Befehle können verwendet werden:

top:...; = Positionierung vom oberen Rand des Browsers
left:...; = Positionierung vom linkem Rand des Browsers
right:...; = Positionierung vom rechtem Rand des Browsers
bottom:...; = Positionierung vom unterem Rand des Browsers

Ein fertiger Layer könnte nun so aussehen:
Code:
<div id="Layer1" style="position:absolute; width:200px; height:100px; z-index:1; top:50px; left:50px; border:1px dotted black; background-color:#FFFFFF;">Dies ist ein Layer mit Text</div>


Hier habe ich noch eine DEMO Seite, wo sich 2 Layer überschneiden:
LINK

So, ich wünsch euch viel Spass damit

mfg
Zerogiven

© by http://www.boldluck.at
<a href="http://www.boldluck.at" target="_blank">
[Bild: boldluck468603.gif] </a>
  Zitieren
#2
hi zero,

das thema ist interessant!
aber aufgrund meiner farbenblindheit kann ich deine code-beispiele
beim besten willen nicht entziffern!

kannst die nochmal bitte so als beitrag posten?

dann noch ne frage:
welcher browser(versionen) können keine layer darstellen?
  Zitieren
#3
Also, sag mir einfach, welche Farben für Farbenblinde optimal sind, damit ich das generell ändern kann

Zu deiner 2. Frage, es ist mit allen Browsern kompatibel!

mfg
Zerogiven
<a href="http://www.boldluck.at" target="_blank">
[Bild: boldluck468603.gif] </a>
  Zitieren
#4
hi zero,

zum thema farben. möchte das nicht auf irgendwelche farben fest-
legen, KONTRAST ist wichtig! also dunkler hintergrund, helle schrift,
heller hintergrund dunkle schrift!
also zum beispiel hellbau und dunkelblau geht auch!
aber dunkelblau und schwarz ist zum beispiel keine gute idee!
  Zitieren
#5
Ist es jetzt besser:
http://www.boldluck.at/tutorials/layers.html

mfg
<a href="http://www.boldluck.at" target="_blank">
[Bild: boldluck468603.gif] </a>
  Zitieren
#6
Falls du den Code zu meinem Beispiel wissen möchtest, brauchst du nur in den Quelltext des Beispiels schauen

mfg
<a href="http://www.boldluck.at" target="_blank">
[Bild: boldluck468603.gif] </a>
  Zitieren
#7
sorry! habe mich ungeschickt ausgedrückt!
meinte hier im FORUM!!!
CODE:
  Zitieren
#8
O.K. Hier der Code des Beispiels:

Code:
<HTML>
<HEAD>
<TITLE>Layers</TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF">
<div id="Layer1" style="position:absolute; width:300px; height:200px; z-index:1; top:50px; left:50px; border:1px dotted black; background-color:#FFFFFF;"><br><center>Dies ist ein Layer mit Text</center></div>

<div id="Layer1" style="position:absolute; width:300px; height:200px; z-index:2; top:100px; left:100px; border:1px dotted black; background-color:#FFFFFF;"><br><center>Noch ein Layer mit Text</center></div>

<div id="Layer1" style="position:absolute; width:300px; height:200px; z-index:2; top:150px; left:150px; border:1px dotted black; background-color:#FFFFFF;"><br><center>Und noch ein Layer mit Text</center></div>
</BODY>
</HTML>

mfg
<a href="http://www.boldluck.at" target="_blank">
[Bild: boldluck468603.gif] </a>
  Zitieren
#9
hi zero bzw. pattex,

kann man die farbe des codes hier im forum nicht ändern?
ich sehe echt nischt!
habe aber einen trick entdeckt!
wenn ich den code MARKIERE wird die schrift WEIS!
aber vielleicht kann man das standardmäßig weis
machen!
  Zitieren
#10
Jo kann man, hab aber die Admin Daten das ich das ändern könnte, in meinem Postfach zuhause. Bin aber gerade in der Arbeit, evtl. kann es Pattex früher ändern Wink

mfg
<a href="http://www.boldluck.at" target="_blank">
[Bild: boldluck468603.gif] </a>
  Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 2 Gast/Gäste