Folgende Warnungen sind aufgetreten: | |||||||||||||||
Warning [2] Undefined property: MyLanguage::$archive_pages - Line: 2 - File: printthread.php(287) : eval()'d code PHP 8.2.25 (Linux)
|
[CSS] Layers - Druckversion +- 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> 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 |