Hallo!
Wie bewerkstellige ich es am besten, einige DIVs stufenförmig nebeneinander anzuordnen, so dass sie sich jeweils an der oberen rechten bzw. unteren linken Ecke berühren?
Liebe Grüße
Hugo
Moin,
genauso wie mit jedem anderen Block-Element auch.
Ist denn div das richtige Element?
Oder anders gesagt, da sind mehr Infos nötig. Immerhin passen sich Elemente u.U. ihrem Inhalt an. Absolute Positionierung und fixe Elementgrößen könnten Abhilfe schaffen, bergen aber auch ganz andere Probleme, wenn es um Viewport- oder Schriftgröße geht.
Also gib uns doch bitte einen Link zur Seite mit den Inhalten und dazu vielleicht ein abstraktes Bild, wie Du es Dir vorstellst.
Grüße,
-Efchen
Hallo Efchen!
Danke für deine Antwort.
Ist denn div das richtige Element?
Davon gehen wir einfach mal aus. 
Also gib uns doch bitte einen Link zur Seite mit den Inhalten
und dazu vielleicht ein abstraktes Bild, wie Du es Dir
vorstellst.
Und wenn die Seite noch gar nicht existiert? :-/
Hier mal ein Bild:
http://www7.pic-upload.de/19.04.12/69cgj56yyql4.jpg
Liebe Grüße
Hugo
PS: Das Ganze sollte möglichst skalierbar sein.
Moin,
Ist denn div das richtige Element?
Davon gehen wir einfach mal aus.
Meine Erfahrung mit den Beiträgen hier zeigt mir, dass man sowas nicht tun darf. Die meisten verwechseln das allgemeine Block-Element mit einem Wundertag für alle Anwendungen.
Und wenn die Seite noch gar nicht existiert? :-/
Dann nützt aus Sicht von HTML auch das Bild nichts. Weil man das Layout erst machen kann, wenn die Semantik steht und die erst mit dem Inhalt gemacht werden kann.
Soll das z.B. ein Menü sein, kommt sicher kein div zur Anwendung.
Aber interessant wären eben die Inhalte gewesen. Sind das Bilder oder ist das Text? Text ist unterschiedlich groß, Bilder normalerweise nicht. Oder wird SVG verwendet? Dass das skalierbar sein soll, ist schon klar, immerhin kann der Nutzer eines Browsers seine bevorzugte Schriftgröße im Browser einstellen, die Größe der Elemente kann also variieren. Aber auch die Größe des Viewports, weswegen die Elemente evtl. am Rand des Viewports umbrechen könnten.
Kann sein, dass ich irgendeine Blockade habe, aber mir erschließt sich der Sinn des Ganzen noch nicht, weswegen ich mir auch keine Lösung vorstellen kann. Man könnte das Ganze ja auch als ein einziges Bild umsetzen, das wäre dann auch skalierbar, wenn der Nutzer nicht „Nur Text zoomen“ eingestellt hat.
Ich hatte mir mit dem Bild etwas mehr erhofft, vor allem Inhalte. Muss mir das unten rechts etwas sagen?
Liebe Grüße,
-Efchen
Das „einfachste“ - was aber mit an Sicherheit grenzender Wahrscheinlichkeit falsch wäre - ist wohl eine Tabelle.
Aber wir wissen ja alle, dass Tabellen zu Layoutzwecken Quatsch sind.
Ansonsten kann ja jedes div einfach eine feste Größe und eine feste Position (position:absolute) bekommen. Damit das alles skalierbar bleibt, muss halt eine skalierbare Einheit angegeben werden, also „em“ oder „ex“ anstatt „px“.
Vermutlich wolltest Du das hören - wobei ich mich immer noch frage, was das Ganze am Ende werden soll…
Beispiel:
.eins { border:1px solid red; width:30%}
.zwei { margin-left:30.25% }
.drei { margin-left:60.5% }
eins
zwei
drei
Hallo Efchen!
Danke für deine Antwort.
Meine Erfahrung mit den Beiträgen hier zeigt mir, dass man
sowas nicht tun darf. Die meisten verwechseln das allgemeine
Block-Element mit einem Wundertag für alle Anwendungen.
Es ist auch grundsätzlich gut, dass du nachfragst, um dadurch mögliche Fehler ans Licht zu bringen. In diesem Fall ging es mir aber einfach darum, wie man das per CSS umsetzt. Ob die Inhalte dann in DIVs, Listen oder anderen Block-Elementen daherkommen, sei darum mal dahingestellt.
Dann nützt aus Sicht von HTML auch das Bild nichts. Weil man
das Layout erst machen kann, wenn die Semantik steht und die
erst mit dem Inhalt gemacht werden kann.
Soll das z.B. ein Menü sein, kommt sicher kein div zur
Anwendung.
Wie gesagt, mir ging es um CSS.
Aber interessant wären eben die Inhalte gewesen. Sind das
Bilder oder ist das Text? Text ist unterschiedlich groß,
Bilder normalerweise nicht. Oder wird SVG verwendet? Dass das
skalierbar sein soll, ist schon klar, immerhin kann der Nutzer
eines Browsers seine bevorzugte Schriftgröße im Browser
einstellen, die Größe der Elemente kann also variieren. Aber
auch die Größe des Viewports, weswegen die Elemente evtl. am
Rand des Viewports umbrechen könnten.
Text.
Kann sein, dass ich irgendeine Blockade habe, aber mir
erschließt sich der Sinn des Ganzen noch nicht, weswegen ich
mir auch keine Lösung vorstellen kann. Man könnte das Ganze ja
auch als ein einziges Bild umsetzen, das wäre dann auch
skalierbar, wenn der Nutzer nicht „Nur Text zoomen“
eingestellt hat.
Denk zum Beispiel an ein Wasserfallmodell.
Ich hatte mir mit dem Bild etwas mehr erhofft, vor allem
Inhalte. Muss mir das unten rechts etwas sagen?
Das unten rechts sollte nur zeigen, dass die einzelnen DIVs so zum Beispiel aufgeteilt sein könnten. Das spielt aber eigentlich keine Rolle.
Liebe Grüße
Hugo
Hallo Efchen!
Danke für deine Antwort.
Das „einfachste“ - was aber mit an Sicherheit grenzender
Wahrscheinlichkeit falsch wäre - ist wohl eine Tabelle.Aber wir wissen ja alle, dass Tabellen zu Layoutzwecken
Quatsch sind.
Darum habe ich auch darauf verzichtet es mithilfe einer Tabelle zu lösen.
Ansonsten kann ja jedes div einfach eine feste Größe und eine
feste Position (position:absolute) bekommen. Damit das alles
skalierbar bleibt, muss halt eine skalierbare Einheit
angegeben werden, also „em“ oder „ex“ anstatt „px“.
Danke für den Ansatz.
Vermutlich wolltest Du das hören - wobei ich mich immer noch
frage, was das Ganze am Ende werden soll…
„Hören“ wollte ich nichts Bestimmtes, sonst hätte ich ja nicht fragen brauchen.
Liebe Grüße
Hugo
1 Like
Hallo Küchentiger!
Sauber, vielen Dank! 
Liebe Grüße
Hugo
1 Like
Moin,
ich dachte, die sollten sich an die Größe des Inhalts anpassen. Tun sie nicht. Sie sind immer 30% von der Größe des Elternelements breit und so hoch wie der Inhalt. Wenn der Inhalt mal breiter ist als 30% und nicht umgebrochen werden kann (was bei Vergrößerung der Schriftart schnell geht), ragt der Inhalt über den Rand hinaus.
Gruß,
-Efchen
Hallo Efechen!
Das habe ich nicht bedacht, da hast du natürlich recht. Aber vom Ansatz her ist das auf jeden Fall, was ich meinte.
Liebe Grüße
Hugo