ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!?
Hallo,
ich bin ein ganz neuer Frischling. ich spiele schon seit Tagen rum. Ich habe schon so viele Tutorials gelesen und mich auch schon entschlossen, welche Programierungsvariante ich nehme. Ich habe vorher schon mit Float schon ein wenig rumgespielt und schon ein wenig damit hinbekommen. Ich wollte die relative und Absolute Positionierung nutzen da es sich ja den verschiedenen Auflösungen anpasst und ich das Recht nützlich finde. Hier mein Problem: Berichtigt mich falls ich falsch liege. Mit der absolute Positionierung lege ich doch mit left,right usw fest, wo genau ich das Bild ( z.B. ) hinlege. ich habe folgenden Satz gefunden den ich nicht einordnen kann, "Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout." Wofür brauch man diese Variante. Wo ist es sinnvoll absolute posis zu nutzen? die relative Positionierung verstehe ich gar nicht. Ich verstehe es so. Das Element ist auf der HP, mit der rela. posi. kann man es verschieben. So aber der Bereich wo das Element vorher war wird ja irgendwie reserviert. Was bedeutet das? Wozu braucht man die. Wie setzt man die richtig ein? Kann mir das mal wer erklären das ich es so verstehe? sorry Leute aber bei den ganzen Guides peile ich das nicht. Ich bedanke mich schon einmal |
Die relative Positionierung zu erklären, ist wohl das Einfachere der beiden.
Relativ positioniert heißt, dass das Element relativ seiner normalen Position positioniert wird, wobei der normale Fluss unverändert bleibt. Ein einfaches Beispiel: Code:
<span style="background-color:#F00">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="position:relative; top:0.5em; left:0.5em; background-color:#FF0">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> Bei einer absoluten Positionierung ist nun nicht die normale Position des Elements die Ausgangsposition, sondern ein Referenzelement. Gleichzeitig wird ein absolut positioniertes Element aus der Umgebung gerissen. Das Referenzelement ist das nächst übergeordnete Element, das entweder relativ oder ebenfalls absolut positioniert ist, oder eben das Wurzelelement. |
Zitat:
Zitat:
Wäre das erstellen für Weblayouts mit Floats besser als mit den Posis? MfG |
Relativ heißt, das Du es relative zum Dokumentenfluss positionierst.
Absolut heißt, das es aus diesem Fluss herausgenommen wird und an jedweder Stelle positioniert werden kann. Dies ist grade für Anfänger verlockend, aber gerade für diese ein Risiko, da sie versucht sind, ein Element festzunageln - das kann unschön werden. Ganz interessant: Learn CSS Positioning in Ten Steps: position static relative absolute float |
Bevor noch mehr Tutorials auf ihn einstürmen, würde ich zu einem Buch raten; Little Boxes I wäre angemessen und bezahlbar. Die Fragen richten sich schließlich mehr nach dem Begriff des Flusses der Boxen einer Seite.
|
Moin,
ich hab dir mal je ein Beispiel für position:static, position:relative und position:absolute zusammengestellt. Einfach in deinen Editor kopieren abspeichern und den Anweisungen und Erklärungen folgen.;) position:static: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Gruß Klaus |
Mahlzeit,
ich muss noch ein Beispiel mit position:fixed nachtragen. position:fixed Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Klaus |
Danke für die Antworten. :)
Klaus danke für deinen Beispielcode der hat mir sehr geholfen. Ich verstehe jetzt wie die einzelnen Posis funktionieren. Mir bleibt eine Frage bei denem Beispielcode. Genauer gesagt bei der Relativen Variante, wurde Box Eins ja verschoben. Der Ausgangsort bleibt aber unversehen und wie du sagtest ist da ein "unsichtbarer Kasten" noch drum. Meine Frage jetzt, kann man in diesem Bereich jetzt nichts mehr machen? Ist der quasi reserviert für die Box Eins und ist gesperrt für alles andere? Hoffe es war verständlich. :) Andreas dein Link hat mir auch sehr geholfen. Wurde da sehr gut erklärt. Fazit für mich: absolute Posi. kann man doch am besten für Menüs benutzen, quasi alles was sich Boxmässig nicht verändert. Relative Posi. ist doch daher besser für z.B. "Newsbereiche" wo sich die Box dann verändern muss nachher. (wenn zuviel geschrieben wird) Dann wäre eine sinnvolle Kombination aus den ganzen Posis und floats die effektivste Möglichkeit. |
Hi,
Zitat:
Gruß Klaus edit. Noch ein Nachtrag: position:absolute/relative setze ich persönlich nur da ein wo es nicht anders geht, z.B. Grafische Menüs, Image Replacement Technik nach Gilder/Levin und für die skiplinks/skiplinktabs. Ich versuche alles möglichst mit float/clear u. padding/margin zu lösen. Durch relat./absol. Posit. machst du nämlich dein Layout in dem Bereich unflexibel und diesen Riesenvorteil den Webseiten gegenüber Buchseiten haben möchte ich mir erhalten. |
Also ich hab "in der Praxis" noch nie mit position: gearbeitet. Bis jetzt gings immer mit float: meiner Meinung nach "sauberer".
|
okay dann werde ich mich erstmal wieder um float kümmern und damit anfangen ein wenig zu baun.
kennst du zufällig ein gutes einsteigerfreundliches Tutorial mit Float/Clear und Padding/Margin? |
schau dich einfach mal hier um: The StyleWorks { Herzlich Willkommen }
|
okay danke für eure Hilfe ich werde mich auf der Seite mal weiterbilden. :)
|
Alle Zeitangaben in WEZ +2. Es ist jetzt 21:01 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023