nicht angemeldet
DIV - VerständnisProblem
Nabend zusammen,
der Thread beruht auf einen älteren Thread
Nachdem ich mich einige Zeit leider nicht mit dem Thema auseinandersetzten konnte (zeitliches Problem). Wollte ich nochmal auf das Problem zurückkommen.
Ich hab derweil den Code von Suit (danke nochmal) etwas modifiziert, jedoch stoße ich auf das Problem, das sich alle Ebenen überlappen. Daher frage ich mich ob es richtig/wichtig ist in einem tableless-design margin-left, right etc. zu nutzen um die Ebenen zu positionieren.
Ich habe die CSS-Anweisung fürs erste in die HTML gelegt (export erfolgt später ;) )
Grüße
Klaas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>Template</title>
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen, projection" />
</head>
<body>
<div id="container" style="width:850px; margin:auto; position:relative; background-color:#0FF;">
<div id="header" style="position:absolute; margin-left:370px; width:480px; height:200px; background-color:#09F;">
<h1><a href="/">Nightfall Events</a></h1>
</div>
<div id="content" style="display:block; position:absolute; margin-top:200px; background-color:#0F6">
<h2>Ãœberschrift</h2>
<div id="col0">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>
</div>
<div id="menu" style="position:absolute; background-color:#009; z-index:1;">
<h2>Navigation</h2>
<ul>
<li>Menüpunkt</li>
<li>Menüpunkt</li>
<li>Menüpunkt</li>
</ul>
</div>
<div id="media" style="position:absolute;"><img src="foo.jpg" height="200px" alt="foo" /></div>
<div id="footer" style="background-color:#009; position:absolute; bottom:0px;">
footer
</div>
</div>
</body>
</html>
-
Ich hab derweil den Code von Suit (danke nochmal) etwas modifiziert, jedoch stoße ich auf das Problem, das sich alle Ebenen überlappen.
Das ist auch sinn der sache, das du die Dinger übereinanderpositionieren kannst - die Reihenfolge der Überlappung wird durch z-index (hast du ja bereits entdeckt) bestimmt. Ein höhrerer z-index ist aber nicht gleich eine höhere Position (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index@title=Erläuterung lesen).
Daher frage ich mich ob es richtig/wichtig ist in einem tableless-design margin-left, right etc. zu nutzen um die Ebenen zu positionieren.
Aussenabstände sind ein wichtiges Werkzeug - man kann damit z.B. aufeinanderfolgende Elemente überlappen (mit negativen Außenabständen) ohne überhaupt position benutzen zu müssen - zur Positionierung selbst sind sie aber nicht wirklich geeignet (außer für gefinkeltere Tricks wo man eben aus z-index-Gründen kein Position einsetzen kann/darf) - da du ohnehin schon mit position: absolute arbeitest, ist es hier wesentlich schlauer die dafür gedachten Eigenschaften (top, right, bottom und left) zu verwenden.
Ich habe die CSS-Anweisung fürs erste in die HTML gelegt (export erfolgt später ;) )
Ein Online-Beispiel wäre komfortabler :)
<div id="container" style="width:850px; margin:auto; position:relative; background-color:#0FF;">
<div id="header" style="position:absolute; margin-left:370px; width:480px; height:200px; background-color:#09F;">
"left" anstatt "margin-left"
<div id="content" style="display:block; position:absolute; margin-top:200px; background-color:#0F6">
Auf die position-Angabe kannst du verzichten. - auch auf den Margin - das würde ich tendentiell mit einem Innenabstand oben im Element mit der ID "container" lösen.
<div id="footer" style="background-color:#009; position:absolute; bottom:0px;">
footer
</div>das Ding braucht keine position-Angabe - ist später ohnehin im Textfluss.
Du hast übrigens ein Zeichencodierungsproblem - offenbar hast du UTF-8-Daten, der Quelltext sieht aber nach ANSI aus.
-
Hallo Suit,
danke für deine Antwort. Deiner Bitte bin ich direkt nachgekommen und hier kann nun der Fortschritt eingesehen werden "Aktuell"
"left" anstatt "margin-left"
Danke dir habe ich sofort ausgetauscht und es funktioniert noch immer, daher musste ich es richtig umgesetzt haben ;)
Auf die position-Angabe kannst du verzichten. - auch auf den Margin - das würde ich tendentiell mit einem Innenabstand oben im Element mit der ID "container" lösen.
Ich nutze jetzt dafür die padding-top-function, - ist es richtig, wenn der Contentbereich nun von oben nach unten gezogen wird? Es hat eine hellgrüne Farbe.
Aktuell habe ich das Problem mit meiner Navigation und dem MediaBild (dunkelgrün) welches sich unter dem Content einordnet. Liege ich falsch wenn ich das Problem mittels Z-Index lösen möchte?
Grüße
Klaas-
Ich korrigiere mein Problem und hoffe das die Lösung richtig ist bzw verwendbar ist.
Auf die position-Angabe kannst du verzichten. - auch auf den Margin - das würde ich tendentiell mit einem Innenabstand oben im Element mit der ID "container" lösen.
Ich nutze jetzt dafür die padding-top-function, - ist es richtig, wenn der Contentbereich nun von oben nach unten gezogen wird? Es hat eine hellgrüne Farbe.
Ich hab das Problem mit der Navi und Media durch Top="0px" gelöst und nun sind diese am oberen Rand geordnet.
Grüße
Klaas-
Sieht mittlerweile ganz gut aus, nur mit dem Hintergrund happerts noch :D
Irgendwelche Fragen?
-
-
"left" anstatt "margin-left"
Danke dir habe ich sofort ausgetauscht und es funktioniert noch immer, daher musste ich es richtig umgesetzt haben ;)
right: 0 ist natürlich auch möglich - ggf. sogar logischer (und einfacher kontrollierbar, sollte sich die Breite mal ändern).
Ich nutze jetzt dafür die padding-top-function, - ist es richtig, wenn der Contentbereich nun von oben nach unten gezogen wird? Es hat eine hellgrüne Farbe.
Es wird richtig (dh. so wie es sollte) dargestellt, ja - aber aus Gründen der Logik/Übersichtlihckeit würde ich das padding-top auf #container anwenden.
Aktuell habe ich das Problem mit meiner Navigation und dem MediaBild (dunkelgrün) welches sich unter dem Content einordnet. Liege ich falsch wenn ich das Problem mittels Z-Index lösen möchte?
Ansich ja - aber ohne einen offset-wert für top, right, bottom oder left wird sich das Ding nur aus dem Textfluss entfernen und an seiner ursprünglichen Position verbleiben.
Btw: du solltest dringend sämtliche CSS-Regeln in ein externes Stylesheet verfrachten und mit Firebug oder einem ähnlichen Werkzeug entwickeln - das[1] geht wesentlich schneller (beim Herumprobieren) als entsprechende Werte im Style-Attribut zu notieren.
[1] CSS -> Bearbeiten
Wenn das aussehen passt das CSS per Copy&Paste übernehmen - Firebug kann NICHT das eigentliche CSS-File überschreiben :)
-
Hi!
Danke dir habe ich sofort ausgetauscht und es funktioniert noch immer, daher musste ich es richtig umgesetzt haben ;)
right: 0 ist natürlich auch möglich - ggf. sogar logischer (und einfacher kontrollierbar, sollte sich die Breite mal ändern).
Ich halte es prinzipiell für "grob fahrlässig" offensichtlich "unerfahrenen" CSS-Anwendern die Verwendung von position:absolute anzuraten.
Die Erfahrung zeigt, dass gerade diese Anwender diese Eigenschaft als die vermeintlich "einfachste" Art & Weise ansehen, ihre Elemente auf der Seite wie gewünscht zu platzieren, bzw. auszurichten.
Dies ist aber in den seltensten Fällen richtig. Vielmehr sollte man ihnen die Möglichkeiten aufzeigen, bei denen die Elemente im "normalen Fluß" belassen werden.
Auch in dem hier vorliegenden Fall kann ich keinen Grund erkennen, warum man mit absoluter Positionierung arbeiten sollte. Was dabei herauskommt kann man sehr schön sehen, wenn man bspw. im FF mal nur den Text ein ganz kleines bischen zoomt.
Btw: du solltest dringend sämtliche CSS-Regeln in ein externes Stylesheet verfrachten und mit Firebug oder einem ähnlichen Werkzeug entwickeln - das[1] geht wesentlich schneller (beim Herumprobieren) als entsprechende Werte im Style-Attribut zu notieren.
[1] CSS -> Bearbeiten
Wenn das aussehen passt das CSS per Copy&Paste übernehmen - Firebug kann NICHT das eigentliche CSS-File überschreiben :)
Die Webdeveloper Toolbar kann das u.a.!
Gruß Gunther
-
Ich halte es prinzipiell für "grob fahrlässig" offensichtlich "unerfahrenen" CSS-Anwendern die Verwendung von position:absolute anzuraten.
Wieso? Für einen Fall wo absolute Positionierung eine schlaue Lösung ist, warum nicht?
Die Erfahrung zeigt, dass gerade diese Anwender diese Eigenschaft als die vermeintlich "einfachste" Art & Weise ansehen, ihre Elemente auf der Seite wie gewünscht zu platzieren, bzw. auszurichten.
Ich empfehle auch nicht, alles absolut zu positionieren - sondern nur das, was notwendig ist (bzw. die Flexibilität des Textflusses nicht einschränkt).
Dies ist aber in den seltensten Fällen richtig. Vielmehr sollte man ihnen die Möglichkeiten aufzeigen, bei denen die Elemente im "normalen Fluß" belassen werden.
Elemente logisch und semantisch in eine vernünftige Abfolge zu bringen ist in den meisten fällen (wie auch beidem hier gewählten Layout) unmöglich mit normalem Textfluss zu realisieren. Wenn man es hingegen doch macht, kann man gleich wieder bei einem linearen, starren Tabellenlayout bleiben.
Auch in dem hier vorliegenden Fall kann ich keinen Grund erkennen, warum man mit absoluter Positionierung arbeiten sollte.
Das mag daran liegen, dass ich das eigentliche Design schon mal gesehen habe :) - die Vorlage ist zwar noch online, allerdings weiß ich nicht, ob der OP möchte, dass der Link hier veröffentlicht wird.
Was dabei herauskommt kann man sehr schön sehen, wenn man bspw. im FF mal nur den Text ein ganz kleines bischen zoomt.
Der Problematische Teil oben wird später durch Image-Replacement-Techniken vollständig durch ein festgezimmertes Pixel-Design ersetzt - da is nix mit flexibel. Der Fließtext selbst wird es aber schon sein.
Wenn man hingegen auch das flexibel lösen möchte, besteht immer noch die möglichkeit das Layout auf relative Angaben - wie etwa em - umzurechnen, dann klappts auch mit dem zoomen.
Anstatt padding-top: 200px gibts halt dann rund 10 bis 12,5 em. Aber wie gesagt wäre dies mit dem definierten Layout imho nicht vereinbahr.
-
Ich halte es prinzipiell für "grob fahrlässig" offensichtlich
Die Erfahrung zeigt, dass gerade diese Anwender diese Eigenschaft als
Das mag daran liegen, dass ich das eigentliche Design schon mal gesehen habe :) - die Vorlage ist zwar noch online, allerdings weiß ich nicht, ob der OP möchte, dass der Link hier veröffentlicht wird.Ich denke das Original dürfte hier dann doch schon hilfreich sein, damit jeder die gleichen Informationen hat ;)
Hier das Original
Grüße
Klaas -
Hi!
Ich halte es prinzipiell für "grob fahrlässig" offensichtlich "unerfahrenen" CSS-Anwendern die Verwendung von position:absolute anzuraten.
Wieso? Für einen Fall wo absolute Positionierung eine schlaue Lösung ist, warum nicht?
Ja, aber die Frage ist halt, "wo absolute Positionierung eine schlaue Lösung ist"?
Die Erfahrung zeigt, dass gerade diese Anwender diese Eigenschaft als die vermeintlich "einfachste" Art & Weise ansehen, ihre Elemente auf der Seite wie gewünscht zu platzieren, bzw. auszurichten.
Ich empfehle auch nicht, alles absolut zu positionieren - sondern nur das, was notwendig ist (bzw. die Flexibilität des Textflusses nicht einschränkt).
Womit wir hier dann bei der Frage wären, "was notwendig ist"?
Dies ist aber in den seltensten Fällen richtig. Vielmehr sollte man ihnen die Möglichkeiten aufzeigen, bei denen die Elemente im "normalen Fluß" belassen werden.
Elemente logisch und semantisch in eine vernünftige Abfolge zu bringen ist in den meisten fällen (wie auch beidem hier gewählten Layout) unmöglich mit normalem Textfluss zu realisieren.
Das wiederum lässt dann in den allermeisten Fällen die Frage zu, ob die gewählte Abfolge wirklich "logisch und semantisch" vernünftig ist?
Wenn man es hingegen doch macht, kann man gleich wieder bei einem linearen, starren Tabellenlayout bleiben.
Jetzt wirfst du aber mit Äpfeln und Birnen um dich. ;-)
Eine HTML Datei ist halt immer linear und es gehört mit Sicherheit seit Anbeginn an zu den Unzulänglichkeiten von CSS, dass es bis heute[1] keine vernünftige Möglichkeit gibt, diese Linearität in der Darstellung zu druchbrechen.Auch in dem hier vorliegenden Fall kann ich keinen Grund erkennen, warum man mit absoluter Positionierung arbeiten sollte.
Das mag daran liegen, dass ich das eigentliche Design schon mal gesehen habe :) - die Vorlage ist zwar noch online, allerdings weiß ich nicht, ob der OP möchte, dass der Link hier veröffentlicht wird.
OK, vielleicht ändert das die Sachlage. Ich kann nur von dem hier vom OP verlinkten Beispiel ausgehen. Und da wäre die Argumentation für die absolute Positionierung einzig die, dass man die Navigation im Quelltext nach dem eigentlichen Seiteninhalt haben möchte.
Ich halte dies für einen "nicht ausreichenden" Grund. Dass die andere Variante auch nicht die "einzig wahre", oder "optimalste" Variante ist, steht dabei auf einem anderen Blatt. Nur wie gesagt, halte ich sie für das "kleinere" Übel.
Was dabei herauskommt kann man sehr schön sehen, wenn man bspw. im FF mal nur den Text ein ganz kleines bischen zoomt.
Der Problematische Teil oben wird später vollständig durch ein festgezimmertes Pixel-Design ersetzt - da is nix mit flexibel.
Na ja, noch so ein "fragwürdiges" Vorhaben, wozu ich aber ebenfalls in Ermangelung ausreichender Informationen über das eigentlich gewünschte Layout und den Aufbau der Quelldatei nichts weiter zu sagen kann.
Gruß Gunther
[1] WDs mal aussenvorgelassen (ja, ich kenne das CSS3 Layout-Modul)
-
-
-
Hi Suit,
danke dir FireBug vereinfacht die ganze Arbeit sehr schnell (im Aufwand) ;)
Ich habe nun meine Media und Header nun aneinander gelegt, damit der Container nicht mehr im Platz dazwischen durch kommt.
Das Padding-Top musste ich um 19 Pixel kürzen, damit der Container verschwindet. Wobei ich dies nicht so ganz verstehe, da der Header eine height von 200px hat und dem Container ein padding-top:200px zugewiesen wurde. Jedoch blickte dann der Container durch.
Nachdem ich dem Container ein p-t:181px zugewiesen habe, war der Container nicht mehr sichtbar.Jetzt bleibt leider nur noch das Problem mit dem Footer, ändere ich den Bottom wandert nur der Footer hoch.
An dieser Stelle nochmal vielen Dank für die Hilfe
Grüße
Klaas
-
-
-