|
|||
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 |
Sponsored Links |
Sponsored Links |
|
|||
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"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Position:static</title> <style type="text/css"> * { padding:0; margin:0; } body { background-color:#696969; } div { color:#f5f5f5; font-weight:bold; padding:2em; border:3px solid yellow; margin:0.5em; } p { width:650px; color:#000; background-color:#dcdcdc; padding:1em; margin:2em auto; } #green { background-color:green; } #red { background-color:red; } #blue { background-color:blue; } </style> </head> <body> <div id="green">Box 1 = grün<br />position:static; - Der normale Fluss der Elemente.</div> <div id="red">Box 2 = rot<br />position:static; -Der normale Fluss der Elemente.</div> <div id="blue">Box 3 = blau<br />position:static; - Der normale Fluss der Elemente.</div> <p>position:static muss nicht extra angegeben werden, es ist die Grundeinstellung ( oder default-Einstellung) der Browser.<br /> <div> und <p> sind Blockelemente und erzeugen einen eigenen Absatz.<br /> D.h. sie ordnen sich untereinander an und werden so breit wie es geht, wenn sie kein <width> erhalten haben.</> </body> </html> Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position:relative;</title> <style type="text/css"> * { padding:0; margin:0; } body { background-color:#696969; font:100.01%/1.5 verdana, arial, helvetica, sans-serif; } div { width:600px; color:#f5f5f5; font-weight:bold; padding:1em; border:3px solid yellow; margin:0.5em; } p { width:650px; color:#000; background-color:#dcdcdc; padding:1em; margin:2em 0 0 0.5em; } .aenderungen { color:#c20810; } #green { background-color:green; } #red { background-color:red; } #blue { background-color:blue; } </style> </head> <body> <div id="green">Box 1 = grün.<br /> position:relative; - Box kann relativ zu ihrem Standpunkt im Fluss verschoben werden.<br /> Mögliche Positionsangaben: top, bottom, left, right. </div> <div id="red">Box 2 = rot.<br />position:static; -Der normale Fluss der Elemente </div> <div id="blue">Box 3 = blau<br />position:static; - Der normale Fluss der Elemente -</div> <p>Bitte tragen sie in die CSS-Anweisungen im Kopf dieses Dokumentes bei #green folgendes <strong>zusätzlich</strong> ein:<br /><strong class="aenderungen">#green { position:relative; }</strong><br /> Speichern und im Browser betrachten.<br /> Wie wir sehen, sehen wir nichts!<br /> Da die Box keine Angaben für eine neue Position bekommen hat ist sie nun zwar "relative" bleibt aber ansonsten an ihrem Platz.<br /> Anschließend ergänzen sie die Gestaltungsanweisungen von #green noch um folgendes:<br /> <strong class="aenderungen">#green { left:100px; top:100px; }</strong><br /> Speichern und im Browser betrachten.<br /> Sie sehen das die grüne Box die 100px von ihrem alten Standpunkt aus gemessen hat, einen Zaun um den alten Platz gelegt hat, damit während ihrer Abwesenheit keine andere Box dahin kann und dann erst an ihren neuen Platz marschiert ist.</p> </body> </html> Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position:absolute;</title> <style type="text/css"> * { padding:0; margin:0; } body { background-color:#696969; font:100.01%/1.5 verdana, arial, helvetica, sans-serif; } div { color:#f5f5f5; font-weight:bold; border:3px solid yellow; } #wrapper { width:700px; background-color:#dcdcdc; border:2px solid #000; margin:2em auto; } #green { width:400px; background-color:green; padding:1em; } #red { width:400px; background-color:red; padding:1em; } #blue { width:400px; background-color:blue; padding:1em; } p { width:650px; color:#000; background-color:#dcdcdc; padding:1em; margin:2em auto; } .aenderungen { color:#c20810; } </style> </head> <body> <div id="wrapper"> <div id="green">Box 1 = grün<br /> position:absolute; - Box wird komplett aus dem Fluss genommen und die anderen Elemente tun so als wäre die absolut positionierte Box nicht da.<br /> Mögliche Positionsangaben: top, bottom, left, right.</div> <div id="red">Box 2 = rot<br />position:static; -Der normale Fluss der Elemente </div> <div id="blue">Box 3 = blau<br />position:static; - Der normale Fluss der Elemente </div> </div><!--Ende #wrapper--> <p>Bitte tragen sie in die CSS-Anweisungen im Kopf dieses Dokumentes bei #green folgendes <strong>zusätzlich</strong> ein:<br /><strong class="aenderungen">#green { position:absolute; }</strong><br /> Speichern und im Browser betrachten.<br /> Die grüne Box bleibt scheinbar an ihrem Platz, die rote Box ist verschwunden und die blaue Box teilweise verdeckt.<br /> Was ist passiert?<br /> Durch position:absolute; hat sich die grüne Box auf den Betrachter zubewegt. Die rote und die blaue Box sind darunter nach oben gerutscht, an den Platz wo vorher die grüne Box war.<br /> Anschließend ergänzen sie die Gestaltungsanweisungen von #green noch um folgendes:<br /> <strong class="aenderungen">#green { left:0; top:0; }</strong><br /> Speichern und im Browser betrachten.<br /> Die grüne Box haut nach ganz oben links im Bildschirm ab. Da sie absolut ist, nimmt sie auch die Positionsangaben absolut, d.h. sie positioniert sich 0px vom linken Rand des Bildschirms und 0px vom oberen Rand des Bildschirms. Die grüne Box orientiert sich in diesem Fall also an <body><br /> Jetzt sehen wir auch das die grüne Box die beiden anderen Boxen vorher ganz und teilweise verdeckt hat.<br /> Bitte ergänzen sie die Gestaltungsanweisungen von #wrapper um folgendes:<br /> <strong class="aenderungen">#wrapper { position:relative; }</strong><br /> Speichern und im Browser betrachten.<br /> Die grüne Box ist an ihren alten Platz zurückgesprungen. Wir haben dem umgebenden Element von #green, nämlich #wrapper <i>position:relative;</i> mit auf den Weg gegeben. Für die grüne Box heißt das: Ich orientiere mich bei den Positionsangaben nicht mehr an <body> sondern an meinem Elternelement, #wrapper.</p> </body> </html> Gruß Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten 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"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>position:fixed;</title> <style type="text/css"> * { padding:0; margin:0; } body { color:#000; background-color:#f5f5f5; font:100.01%/1.5 verdana, arial, helvetica, sans-serif; } div { font-weight:bold; } #wrapper { width:800px; background:url(fauxcolumns.gif) repeat-y left top; border:1px solid #000; margin:2em auto; } #links { float:left; width:90px; background-color:#dcdcdc; padding:5px; } #mitte { float:left; width:170px; background-color:#cbf1f7; padding:15px; } #rechts { float:left; width:480px; background-color:#f7f1cb; padding:10px; } .fixed { width:88px; color:#f5f5f5; background-color:green; border:1px solid red; } .aenderungen { color:#c20810; } .unterstrichen { text-decoration:underline; color:#c20810; } .clear { clear:both; height:0; width:0; visibility:hidden; border:0; } </style> </head> <body> <div id="wrapper"> <div id="links"><p class="fixed">Fixierte Box die mitscrollt!</p></div> <div id="mitte"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum </p></div> <div id="rechts"><p>Bitte tragen sie in die CSS-Anweisungen im Kopf dieses Dokumentes bei .fixed folgendes <strong>zusätzlich</strong> ein:<br /><strong class="aenderungen">.fixed { position:fixed; left:15px; top:15px; }</strong><br /> Speichern und im Browser betrachten.<br /> Das fixierte Element orientiert sich bei den Positionsangaben <span class="unterstrichen">immer</span> an <body>. Es nützt auch nichts (wie bei position:absolute;!) #wrapper <i>position:relative;</i> zu geben.<br /> Das fixierte Element bleibt buchstäblich oben links an den Bildschirm genagelt.<br /> Auch wenn sie die Seite nach unten scrollen, es bleibt an derselben Stelle im Bildschirm stehen.<br /> Ein Nachteil von <i>position:fixed</i> ist, das der Internet Explorer bis einschließend Version 6 <i>position:fixed;</i> nicht kennt und es deshalb ignoriert. </p></div> <hr class="clear" /> </div><!--Ende #wrapper--> <p></p> </body> </html> Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten 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.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus Geändert von hubspe (27.08.2008 um 14:23 Uhr) |
Sponsored Links |
|
||||
Also ich hab "in der Praxis" noch nie mit position: gearbeitet. Bis jetzt gings immer mit float: meiner Meinung nach "sauberer".
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div-höhe? - Hauptcontainer über ganze Seite will nicht... | AndMei | CSS | 5 | 13.12.2010 14:43 |
Problem mit CSS relative, absolute & float | FrageHabe | CSS | 3 | 13.08.2010 14:40 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 14:30 |
Was übersehe ich? | Psyclown | CSS | 2 | 19.10.2008 13:00 |
prblemme mit mein inhalt div | carlos587261 | CSS | 3 | 23.04.2008 14:07 |