yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Nebeneinander positionieren



1. Aneinanderreihung von `Inline´-Objekten

Wenn ich mehrere Wörter in einem Satz schreibe, so landen diese auch hintereinander. Es stört absolut nicht, wenn weitere Inline-Elemente dabei auftauchen, wie z.B. Bilder, Links oder stark hervorgehobener Text. Auch Elemente, die Blöcke sind (z.B. Tabellen oder Formulare), kann man mittels CSS zu Inline-Objekten machen:

Code:
display:inline;


Bei Inline-Elementen hat man allerdings den Nachteil, daß Attribute wie Textausrichtung nur auf die gesamte Zeile (bzw. Block) greifen. Ein Foto am linken Rand, und das dazugehörige Aufnahmedatum rechtsbündig ausgerichtet, geht also nicht.

2. Blinde Tabellen

Der üblichste Weg sind blinde Tabellen. Jeder Zelle kann man einzeln Attribute zuordnen, die Umsetzung beherrscht jeder Browser, die Schattenseite dieser Variante ist die Zweckentfremdung des Elements. Eigentlich erwartet man in einer Tabelle excel-artigen Inhalt. Für das Auge mag das egal sein, aber ein Blinder würde jede Zelle einzeln vorgelesen bekommen, auch wenn da drin nur Leerzeichen enthalten sind. Außerdem blähen solche Tabellen in der Regel nur den Code auf, siehe das beispiel

3. Frames

Man baut mehrere Frames nebeneinander. Da aber Frames aus dem XHTML-Standard rausgeflogen sind, zudem immense Nachteile besitzen, werden sie nicht weiter erwähnt.

4. Textumfluß

Hat man ein Bild, und möchte daneben Text schreiben, so ist float eine wunderbare Lösung:

Code:
float:left;


Der Text wird um das Bild herumgebrochen. Der Vorteil bei float ist, daß man damit den äußeren Rahmen sehr variablel gestalten kann. Ist der Text zu einem Bild etwas länger, so wird die gesamte Seite nicht in die Unendlichkeit gezerrt, sondern unter dem Bild wird die volle Breite für das Bild benutzt. Möchte man den neuen Absatz unter dem Bild aber beginnen lassen, so empfielt sich folgender Code:

Code:
clear:all;


Der Nachteil bei float ist, daß die Elemente nicht wirklich nebeneinander sind. Folglich kann man diese nie wie zwei Zellen behandeln. Zum Beispiel kann man dazwischen nie eine Trennlinie einfügen, die unabhängig der Größe der beiden Elemente durchgängig ist. Des weiteren hat der InternetExplorer an einigen Stellen Darstellungsfehler, wenn float eingesetzt wird!

5. Layouttabellen

Mit dem display-Attribut kann man ebenso Elemente nebeneinander positionieren. Dies funktioniert jedoch nicht im Internet Explorer. (Anleitung)

Damit kann man Elemente, die in Wirklichkeit keine Tabellen sind, denoch wie Layouttabellen darstellen. Im Gegensatz zu reinen HTML-Tabellen gibt es leider nur eine Einschränkung: Es gibt kein entsprechendes Gegenstück zu colspan / rowspan

6. Absolutes Positionieren

Mit dieser Variante kann man Elemente an bestimmte Stellen zuweisen. Wenn man `nur´ ein Hauptelement am linken und eins am rechten Rand haben möchte, so geht das sehr einfach. Aber auch diese Variante funktioniert leider nicht perfekt. Schauen wir uns einmal dieses Beispiel an:

Betrachten wir erst einmal nur c0, c1 und c2. c0 bildet den Rahmen, er soll 100% groß sein. c2 stellt ein Menu dar. Es ist relativ wenig enthalten, wir sagen dennoch, er soll sich auf 100% ausdehnen. c1 ist nun unsere Inhaltsspalte, die mehr Text enthält, als eine Seite fassen kann. Ohne Rücksicht auf Verluste wird diese größer ? c2 läßt sich davon nicht beeindrucken.

c3 und c4 sind zwei weitere Elemente mit position:absolute;. Diese Angaben top, left und right orientieren sich am Elternelement c1. Das funktioniert auch soweit, allerdings enthält c3 mehr Text als c1 und überschreitet damit die Grenzen seines Elternelementes.

c5 und c6 sind Elemente mit position:relative;. Dabei gibt es keine Chance beide Elemente nebeneinander zu bewegen. Selbst mit negativen Werten läßt sich der Browser nicht beeindrucken.

FAZIT:

Es gibt keine optimale Lösung, Elemente nebeneinander zu positionieren. Auf jeden Fall sollte man aber versuchen, Variante 2 zu meiden ? und wenn es nur die Nicht-IE-Darstellung ist!

Geschrieben von René am 12.08.2004 (9915x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

nettes Tutorial, für mich persönlichnix neues... ;D

Zur letzten Variante hätte ich noch was: wenn man bspw. einen Layer mit Content hat, rechts das Menü und unter die Contentspalte noch ein Footer mit (c) machen möchte (ja, ich weiß mittlerweile das es in D-Land kein (c) gibt) dann geht folende möglichkeit: wir nehmen einen Layer mit hight: auto; machen da einen Layer mit hight: auto; und position: relative; und positionieren den: left: 0px; top: 0px; - dann wird der äußere Layer solange, wie die Contentspalte - nach der Contentspalte können wir ohne absolute positionierung noch den Footer einfügen - das ist die einzige Möglichkeit, die ich gefunden habe, wie sich sowas lösen lässt.
Würde die Contentspalte position: absolute; sein, würde nämlich die Höhe dieser Spalte nicht im äußeren Layer übernommen

Lange Rede kurzer sinn: es stellt sich mri die Frage, ob es so nicht auch möglich ist ein Menü eben solange wie die Contentspalte zu machen?

Ein äußeren Layer #aussen mit position: absolute; left: 0px; top: 0px; width: 100%; height: auto; darein ein Layer #content mit position: relative; left: 0px; top: 0px; width: 600px; height: auto; jetzt kommt noch der Layer #menu mit position: absolute; left: 620px; top: 0px; width: 100px; height: 100%;
Das würde meines Erachtens genau das bewirken, was du dachtest nicht zu gehen?!

PS: wäre schön gewesen, wenn du die Layer auch so beschriftet hättest, wie du hie rvon ihnen sprichst, damit man sich nicht erst den Quelltext anschauen muss ^^
Geschrieben von michi
Rene rult halt alle weg. Schönes tut war mir aber nach ner Zeit klar das das nichts wird ;)
Geschrieben von example
Zum Tutorial: mein Ziel war nicht, irgendwas neues hier zu zeigen - sondern einfach einmal eine Zusammenfassung der Möglichkeiten. Denn in SelfHTML stehen diese in den verschiedensten Kapiteln.

Deine Vorschlag mit den Bezeichnungen werde ich berücksichtigen (habe die Datei noch einmal überarbeitet, lade ich heute hoch)

height:auto funktioniert aber irgendwie nicht so, wie ich es möchte.
Geschrieben von René
height: auto; funktioniert unter der Bedingung, das alle layer, die darin liegen position: relative sind ;)
Geschrieben von michi
also ich habe jetzt in einem anderen Projekt den Härtefall mit position:absolute;

Ich durchsuchte die Template, die wüstes HTML/CSS-Gemisch ist, natürlich jedes Tag mit position:absolute; - wollte nur an die drei Stellen, die ersetzt werden, und suchte verzweifelte noch zwei Stellen ...

wo waren sie? Am Ende der Templatedatei, obwohl sie auf der Seite fast oben waren ... das schreckt einfach einmal ab!
Geschrieben von René
Bei mir funktioniert 'float' sehr gut, sogar der Internet Explorer stellt es richtig da.

Hab ein drei Spalten Layout, links und rechts 20% breite und in der mitte 60%. Die linke und die mittlere Spalte haben 'float : left' (wobei die mittlere Spalte 'margin-left : 1%' hat, damit sie nicht an der linken 'klebt'), die rechte 'float : right', und es funktioniert perfekt.


Finde die 4te Loesung auf jeden Fall die beste.


PS: Bitte nicht loeschen wegen falscher Email-Adresse, sie stimmt naemlich wirklich.
Geschrieben von Manuel Thurner