+- net-board.net Archiv (https://net-board.net)
+-- Forum: Deine eigene Homepage (https://net-board.net/forumdisplay.php?fid=26)
+--- Forum: Scriptsprachen (+Datenbanksysteme) (https://net-board.net/forumdisplay.php?fid=19)
+---- Forum: Tutorials und Artikel: Programmieren und Datenbanken (https://net-board.net/forumdisplay.php?fid=15)
+---- Thema: [CSS] Layers (/showthread.php?tid=2968)
Seiten:
1
2
[CSS] Layers - Zerogiven - 03.11.2003
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
- marlem - 03.11.2003
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?
- Zerogiven - 03.11.2003
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
- marlem - 03.11.2003
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!
- Zerogiven - 03.11.2003
Ist es jetzt besser:
http://www.boldluck.at/tutorials/layers.html
mfg
- Zerogiven - 03.11.2003
Falls du den Code zu meinem Beispiel wissen möchtest, brauchst du nur in den Quelltext des Beispiels schauen
mfg
- marlem - 03.11.2003
sorry! habe mich ungeschickt ausgedrückt!
meinte hier im FORUM!!!
CODE:
- Zerogiven - 04.11.2003
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
- marlem - 04.11.2003
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!
- Zerogiven - 04.11.2003
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
mfg