Hallo,
ich wollte mal wieder ein neues Tutorial schreiben aber als aller erstes möchte ich mich bei den M-Core Team bedanken, das Sie mich als Probe-Moderator hier im Coding Bereich eingestellt haben. Ich versuche mich möglichst oft hier zu melden und versuche auch, anderen Usern bei ihren Problemen zu helfen.
Zurück zum Thema:
Wie gesagt werde ich in diesem Tutorial beschreiben, wie man z.B. ein Bild, innerhalb eines Elements z.B. einem <div></div>, positionieren kann.
Ich werde eine Möglichkeit nennen, es gibt noch andere aber diese hier ist sehr einfach.
Wir gehen davon aus, wir haben ein <div></div> in unserer Datei, wo wir einen Bereich mit einer definierten Breite & Höhe haben, in diesem Bereich haben wir jetzt ein Bild hinzugefügt.
Hier ein Beispiel:
Alles anzeigen
So könnte unsere Datei aussehen.
Der div (in CSS so angesprochen: #unser_bereich) "unser_bereich" hat eine feste Höhe (height) und eine feste Breite (width), in CSS würde das ganze dann so aussehen:
So, jetzt möchten wir aber, dass das Bild in diesem <div>, sich an einer bestimmten Stelle befindet. Das Bild (in HTMl: <img...>) sprechen wir in der CSS Datei so an:
#unser_bereich img
Wie ich es dieses Bild jetzt positioniere zeige ich in unsere CSS Datei die nun so aussehen sollte:
Mit dem Zeichen /* und */ verfasse ich ein Kommentar in der CSS Datei die nichts als nur eine Beschreibung bewirkt.
In unseren {} Klammern wurde noch nichts definiert doch wir machen nun folgendes:
Wir haben unserem Bild die Position Absolute gegeben, da wir nun mit diesen CSS Befehlen unser Element ganz leicht positionieren können:
top: 0;
left: 0;
right: 0;
bottom: 0;
Es müssen nicht alle vier Befehle verwendet werden, je nach dem wie ihr es positionieren wollt müsst ihr die einzelnen Befehle ansprechen.
Wollen wir es zum Beispiel oben Rechts haben machen wir folgendes:
Er wird jetzt in einem Abstand von 0 Pixel am oben Rand positioniert und mit einem Abstand von 0 Pixel von rechten Rand, spricht in der oberen rechten Ecke.
Bei Fragen meldet euch hier! Ich werde auf eure Fragen schnellst möglich eingehen uns sie beantworten. :)
z0r
ich wollte mal wieder ein neues Tutorial schreiben aber als aller erstes möchte ich mich bei den M-Core Team bedanken, das Sie mich als Probe-Moderator hier im Coding Bereich eingestellt haben. Ich versuche mich möglichst oft hier zu melden und versuche auch, anderen Usern bei ihren Problemen zu helfen.
Zurück zum Thema:
Wie gesagt werde ich in diesem Tutorial beschreiben, wie man z.B. ein Bild, innerhalb eines Elements z.B. einem <div></div>, positionieren kann.
Ich werde eine Möglichkeit nennen, es gibt noch andere aber diese hier ist sehr einfach.
Wir gehen davon aus, wir haben ein <div></div> in unserer Datei, wo wir einen Bereich mit einer definierten Breite & Höhe haben, in diesem Bereich haben wir jetzt ein Bild hinzugefügt.
Hier ein Beispiel:
PHP-Quellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=windows-1250">
- <meta name="generator" content="PSPad editor, www.pspad.com">
- <title></title>
- </head>
- <body>
- <div id="unser_bereich"><img src="bild.jpg" alt="" /></div>
- </body></html>
So könnte unsere Datei aussehen.
Der div (in CSS so angesprochen: #unser_bereich) "unser_bereich" hat eine feste Höhe (height) und eine feste Breite (width), in CSS würde das ganze dann so aussehen:
So, jetzt möchten wir aber, dass das Bild in diesem <div>, sich an einer bestimmten Stelle befindet. Das Bild (in HTMl: <img...>) sprechen wir in der CSS Datei so an:
#unser_bereich img
Wie ich es dieses Bild jetzt positioniere zeige ich in unsere CSS Datei die nun so aussehen sollte:
Mit dem Zeichen /* und */ verfasse ich ein Kommentar in der CSS Datei die nichts als nur eine Beschreibung bewirkt.
In unseren {} Klammern wurde noch nichts definiert doch wir machen nun folgendes:
Wir haben unserem Bild die Position Absolute gegeben, da wir nun mit diesen CSS Befehlen unser Element ganz leicht positionieren können:
top: 0;
left: 0;
right: 0;
bottom: 0;
Es müssen nicht alle vier Befehle verwendet werden, je nach dem wie ihr es positionieren wollt müsst ihr die einzelnen Befehle ansprechen.
Wollen wir es zum Beispiel oben Rechts haben machen wir folgendes:
Er wird jetzt in einem Abstand von 0 Pixel am oben Rand positioniert und mit einem Abstand von 0 Pixel von rechten Rand, spricht in der oberen rechten Ecke.
Bei Fragen meldet euch hier! Ich werde auf eure Fragen schnellst möglich eingehen uns sie beantworten. :)
z0r