Textausrichtung innerhalb von DIVs

[Maria]

Hallo Miteinander,

Tabellen sollen ja nicht mehr zur Ausrichtung von Text genutzt werden, sondern nur für Daten bzw. Inhalte in Tabellenform.
Wie kann ich denn aber Text dann innerhalb meiner DIVs ausrichten?
Mir würde mal ein einfaches Beispiel reichen, wenn ich innerhalb eines DIV-Elements rechts ausgerichtet ein Bild haben möchte und links davon einen Text, der allerdings ganz unten am Ende des DIV-Elements auf der linken Seite angeordnet ist.

Also ungefähr so:

freier Raum        BildBildBild
    freier Raum        BildBildBild
    freier Raum        BildBildBild
mein gewünschter Text  BildBildBild

Gibt es dabei auch eine Eigenschaft, dass man den Text auch in das Bild laufen lassen kann? Ähnlich wie bei DIV-Elementen über Z-Index?

freier Raum    BildBildBild
    freier Raum    BildBildBild
    freier Raum    BildBildBild
mein gewünschter TextldBildBild

[Beat]

Also ungefähr so:
    freier Raum        BildBildBild
    freier Raum        BildBildBild
    freier Raum        BildBildBild
mein gewünschter Text  BildBildBild

Hier kannst du, ein <img>Element vorausgesetzt, vertical-align verwenden.

Gibt es dabei auch eine Eigenschaft, dass man den Text auch in das Bild laufen lassen kann? Ähnlich wie bei DIV-Elementen über Z-Index?

freier Raum    BildBildBild
    freier Raum    BildBildBild
    freier Raum    BildBildBild
mein gewünschter TextldBildBild

Hier bindest dein Bild als Background ein und arbeitest mit padding.

mfg Beat

[Maria]

Also ungefähr so:
    freier Raum        BildBildBild
    freier Raum        BildBildBild
    freier Raum        BildBildBild
mein gewünschter Text  BildBildBild

Hier kannst du, ein <img>Element vorausgesetzt, vertical-align verwenden.

Als Unterelement von dem <img>-Element?
Ungefähr so?:
<img src="Bild.jpg" style="float:right" vertical-align="bottom"><p>mein gewünschter Text</p></img>

Gibt es dabei auch eine Eigenschaft, dass man den Text auch in das Bild laufen lassen kann? Ähnlich wie bei DIV-Elementen über Z-Index?

freier Raum    BildBildBild
    freier Raum    BildBildBild
    freier Raum    BildBildBild
mein gewünschter TextldBildBild

Habe das kurz ausgetestet, aber es wurde das Bild nicht nur einmal innerhalb des <div>-Elements dargestellt, sondern über die gesamte Seite verteilt als Hintergrund.

Hier bindest dein Bild als Background ein und arbeitest mit padding.

mfg Beat

[ChrisB]

Hi,

Als Unterelement von dem <img>-Element?
Ungefähr so?:
<img src="Bild.jpg" style="float:right" vertical-align="bottom"><p>mein gewünschter Text</p></img>

Nein, ganz sicher nicht.
Das IMG keine Kindelemente haben kann, weißt du, wenn du dich mit den Grundlagen von HTML beschäftigt hast.

Hier bindest dein Bild als Background ein und arbeitest mit padding.

Habe das kurz ausgetestet, aber es wurde das Bild nicht nur einmal innerhalb des <div>-Elements dargestellt, sondern über die gesamte Seite verteilt als Hintergrund.

Dann lies bitte in SELFHTML bei der Beschreibung der Hintergrundeigenschaften von CSS nach, wie man das verhindert.
Und mach das bitte nächste Mal, bevor du fragst!

MfG ChrisB

[Maria]

Hi,

Als Unterelement von dem <img>-Element?
Ungefähr so?:
<img src="Bild.jpg" style="float:right" vertical-align="bottom"><p>mein gewünschter Text</p></img>

Nein, ganz sicher nicht.
Das IMG keine Kindelemente haben kann, weißt du, wenn du dich mit den Grundlagen von HTML beschäftigt hast.

Ich bin gerade dabei, hänge aber ein bissel, weswegen ich eigentlich auf ein klein wenig Hilfe hoffe, um den Denkfehler zu überwinden. Die Referenz ist sehr umfangreich und ich habe mir schon viele Artikel durchgelesen, aber möchte gerade das ein oder andere austesten. Dabei hänge ich insbesondere aktuell, wie ich Texte und Bilder innerhalb meiner Seitenstruktur in Form von DIVs anordnen kann. Leider finde ich bei den Artikeln, die ich durchsucht habe, nicht den entscheidenden Hinweis. *brettvordemkopf*

Hier bindest dein Bild als Background ein und arbeitest mit padding.

Habe das kurz ausgetestet, aber es wurde das Bild nicht nur einmal innerhalb des <div>-Elements dargestellt, sondern über die gesamte Seite verteilt als Hintergrund.

Dann lies bitte in SELFHTML bei der Beschreibung der Hintergrundeigenschaften von CSS nach, wie man das verhindert.
Und mach das bitte nächste Mal, bevor du fragst!

MfG ChrisB

[Felix Riesterer]

Liebe Maria,

Das IMG keine Kindelemente haben kann, weißt du, wenn du dich mit den Grundlagen von HTML beschäftigt hast.

Ich bin gerade dabei, hänge aber ein bissel, [...] Die Referenz ist sehr
umfangreich [...] möchte gerade das ein oder andere austesten.

dagegen spricht überhaupt nichts. Aber...

Dabei hänge ich insbesondere aktuell, wie ich Texte und Bilder innerhalb meiner Seitenstruktur in Form von DIVs anordnen kann.

... Du vermischst hier zwei grundlegend verschiedene Denkkonzepte. Zum einen Schreibst Du von "Seitenstruktur". Das bedeutet, Du beschäftigst Dich mit _Struktur_. Das ist eine oft von Anfängern unterschätzte Hauptsache. Ohne sinnvolle Struktur ist eine Seite kaum sinnvoll zu gestalten. Deshalb bitte ich Dich, poste doch einen Link zu einer Beispielseite, damit man sich die Struktur einmal anschauen, und Dich dabei beraten kann. Gerade mit der Struktur haben es Anfänger meiner Erfahrung nach nicht so besonders, da ihnen die Erfahrung fehlt.

Dann sprichst Du von "anordnen". Das ist Layouten. Das Gestalten. Das ist eine völlig andere Hauptsache, die mit völlig anderen Denkkonzepten umgesetzt wird. Beat hat Dir schon einen kleinen Hinweis gegeben: "vertical-align". Was er allerdings verschwiegen hat, ist die Tatsache, dass Du hier nicht mit (X)HTML, sondern mit CSS als Technologie arbeitest. Diese setzt auf einer gegeben Struktur in einem vorhandenen (X)HTML-Dokument auf. Daher habe ich im vorherigen Abschnitt so auf die Struktur abgehoben.

Dann lies bitte in SELFHTML bei der Beschreibung der Hintergrundeigenschaften von CSS nach, wie man das verhindert.
Und mach das bitte nächste Mal, bevor du fragst!

MfG ChrisB

Hier kannst Du sehen, dass ChrisB bereits CSS erwähnt, allerdings geht auch er davon aus, dass Du schon genau weißt, was Du tust. Ich gehe nicht davon aus. Meiner Meinung nach solltest Du erst einen Schritt nach dem anderen tun. Zuerst eine sinnvolle Struktur Deines Dokuments, dann eine darauf aufbauende Gestaltung mittels CSS. Deshalb biete ich Dir an, Deine Seitenstruktur mit Dir zu besprechen, damit Du anschließend mit dieser Struktur Deine Gestaltung überhaupt sinnvoll vornehmen kannst.

Was sagst Du dazu?

Liebe Grüße,

Felix Riesterer.

[Maria]

Hallo Felix,

Liebe Maria,

Das IMG keine Kindelemente haben kann, weißt du, wenn du dich mit den Grundlagen von HTML beschäftigt hast.

Ich bin gerade dabei, hänge aber ein bissel, [...] Die Referenz ist sehr
umfangreich [...] möchte gerade das ein oder andere austesten.

dagegen spricht überhaupt nichts. Aber...

Dabei hänge ich insbesondere aktuell, wie ich Texte und Bilder innerhalb meiner Seitenstruktur in Form von DIVs anordnen kann.

... Du vermischst hier zwei grundlegend verschiedene Denkkonzepte. Zum einen Schreibst Du von "Seitenstruktur". Das bedeutet, Du beschäftigst Dich mit _Struktur_. Das ist eine oft von Anfängern unterschätzte Hauptsache. Ohne sinnvolle Struktur ist eine Seite kaum sinnvoll zu gestalten. Deshalb bitte ich Dich, poste doch einen Link zu einer Beispielseite, damit man sich die Struktur einmal anschauen, und Dich dabei beraten kann. Gerade mit der Struktur haben es Anfänger meiner Erfahrung nach nicht so besonders, da ihnen die Erfahrung fehlt.

Dann sprichst Du von "anordnen". Das ist Layouten. Das Gestalten. Das ist eine völlig andere Hauptsache, die mit völlig anderen Denkkonzepten umgesetzt wird. Beat hat Dir schon einen kleinen Hinweis gegeben: "vertical-align". Was er allerdings verschwiegen hat, ist die Tatsache, dass Du hier nicht mit (X)HTML, sondern mit CSS als Technologie arbeitest. Diese setzt auf einer gegeben Struktur in einem vorhandenen (X)HTML-Dokument auf. Daher habe ich im vorherigen Abschnitt so auf die Struktur abgehoben.

Dann lies bitte in SELFHTML bei der Beschreibung der Hintergrundeigenschaften von CSS nach, wie man das verhindert.
Und mach das bitte nächste Mal, bevor du fragst!

MfG ChrisB

Hier kannst Du sehen, dass ChrisB bereits CSS erwähnt, allerdings geht auch er davon aus, dass Du schon genau weißt, was Du tust. Ich gehe nicht davon aus. Meiner Meinung nach solltest Du erst einen Schritt nach dem anderen tun. Zuerst eine sinnvolle Struktur Deines Dokuments, dann eine darauf aufbauende Gestaltung mittels CSS. Deshalb biete ich Dir an, Deine Seitenstruktur mit Dir zu besprechen, damit Du anschließend mit dieser Struktur Deine Gestaltung überhaupt sinnvoll vornehmen kannst.

Was sagst Du dazu?

sehr gerne nehme ich natürlich Dein Angebot an und Danke Dir bereits vorab recht herzlich.

Mir geht es wirklich nicht, um die schnelle Hilfe auf die Art "macht mir mal (m)eine Internetseite, sondern es geht mir darum mich Grundsätzlich damit zu beschäftigen.
Dabei fehlt mir in der Tat noch der ein oder andere Grundsatz, auch wenn mir durchaus Dinge wie CSS und W3C ein Begriff sind. Gerade deswegen mag ich es mir auch nicht einfach machen und eine Tabelle mit zwei Spalten rein machen, was ohne Zweifel auch zum Ergebnis führen würde, sondern ich möchte mich damit beschäftigen, wie man das nach den heutigen Standards sinnvoll löst.

Ich habe eine Grundstruktur, gemäß nachfolgendem Link:
http://www.d-u-m-m-y.de/maria/test.html

Hoffe, das darf man Struktur nennen?! ;-) Ich weiß beispielsweise nicht, ob ich hier das ein oder andere DIV-Element insofern "vergewaltige", da ich auch die weißen Balken zur Gestaltung aus DIV-Elementen gestaltet habe.

Innerhalb des Bereichs der 3 Balken möchte ich meine unterschiedlichen Inhalte platzieren.

Momentan zum Beispiel auf der rechten Seite ein Bild und links unten ein Text, der möglichst noch in das Bild rein laufen soll. Bei anderen Inhalten aber auch ohne Überschneidung.

Ich habe vor allem da einen Hänger, dass ich nicht weiß, welche Elemente ich innerhalb eines DIV-Elements zur Gestaltung nutzen kann, um alle gewünschten Elemente (insbesondere Text und Bilder) nach belieben anzuordnen.
Muss ich weitere Elemente einfügen, um gestalterisch etwas umzusetzen oder kann ich einfach ein DIV-Element einfügen, das die Fläche innerhalb der 3 Balken hat und innerhalb dessen, direkt mit Bild- und Textelementen tätig werden?

Danke Dir schon mal für Deine Mühe!

Liebe Grüße

Maria

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Liebe Maria,

bitte zitiere nur das, worauf Du Dich im Einzelfall auch direkt beziehst. Komplettzitate stören hier eher, als dass sie weiterhelfen.

Ich habe eine Grundstruktur, gemäß nachfolgendem Link:
http://www.d-u-m-m-y.de/maria/test.html

Die Dokumentstruktur ist folgende:

<body>  
<div id="apDiv2"></div>  
<div id="apDiv3"></div>  
<div id="apDiv4"></div>  
<div id="apDiv5"></div>  
</body>

Die Bezeichner "apDiv2" - "apDiv5" ergeben keinen Sinn. Kannst Du sie so benennen, dass sie etwas mit dem Inhalt zu tun haben, den sie enthalten? Vielleicht etwas dieser Art:

<body>  
<div id="content"></div>  
<div id="navi"></div>  
<div id="header"></div>  
<div id="footer"></div>  
</body>

Damit sagen die Bezeichner tatsächlich etwas aus. Darauf könnte man dann aufbauen. Um nun Dein konkretes Problem tatsächlich in Angriff zu nehmen fehlt allerdings Beispielinhalt. Kannst Du eine Seite mit Platzhaltertexten und -bildern erstellen, bei der man nun wirklich einmal etwas zu sehen bekommt?

Liebe Grüße,

Felix Riesterer.

[Maria]

Die Bezeichner "apDiv2" - "apDiv5" ergeben keinen Sinn. Kannst Du sie so benennen, dass sie etwas mit dem Inhalt zu tun haben, den sie enthalten? Vielleicht etwas dieser Art:

Die Bezeichnungen wurden von Dreamweaver erstellt. Kann diese gerne noch abändern. Die 4 DIVs in dem Beispiel sind aber noch gar keine Bereiche für Inhalte. Es handelt sich dabei um den schwarzen Bereich und die 3 weißen Balken und zwar folgendermaßen:
apDiv2 --> Schwarzer Bereich
apDiv3 --> vertikaler Balken
apDiv4 --> horiziontaler Balken oben
apDiv5 --> horiziontaler Balken unten

Die Bereiche mit Inhalten sind demnach erst noch zu definieren. Ich gehe hier davon aus (da bin ich mir aber nicht sicher, ob ich da bereits meinen Fehler mache), dass ich weitere DIV-Elemente definieren muss. Die Navigation, Footer etc. können wir gerne außen vor lassen, da ich mich da dann wieder selbst weiter durcharbeiten kann.
Ich möchte einen Content-Bereich, der sich genau zwischen den 3 weißen Balken abspielt. Dabei soll der Abstand zwischen oberem und unterem weißen Balken fix sein (222px), weswegen ich dieses neue DIV-Element als Unterelement von dem oberen horiziontalen Balken anbringen würde. So wie ich auch den unteren weißen Balken (apDiv5) als Unterelement des oberen (apDiv4) eingefügt habe, also in diese Richtung:

<body>  
<div id="apDiv2"></div>  
<div id="apDiv3"></div>  
<div id="apDiv4"><div id="content"></div><div id="apDiv5"></div></div>  
</body>

Damit sagen die Bezeichner tatsächlich etwas aus. Darauf könnte man dann aufbauen. Um nun Dein konkretes Problem tatsächlich in Angriff zu nehmen fehlt allerdings Beispielinhalt. Kannst Du eine Seite mit Platzhaltertexten und -bildern erstellen, bei der man nun wirklich einmal etwas zu sehen bekommt?

Innerhalb dieses DIV-Elements "content" möchte ich dann Inhalte anbringen. Beispielsweise rechts ein Bild und links Text:
http://www.d-u-m-m-y.de/maria/test3.html

Wie kann ich solche Elemente nun Positionieren und mit Abständen arbeiten. Zum Beispiel wenn ich den Text nicht direkt in der Ecke links oben haben möchte. Dass ich das über margin und padding machen kann ist mir klar, allerdings fehlen mir die Elemente mit denen ich arbeiten soll, um mit dementsprechenden Abständen zu arbeiten, wenn ich keine Tabelle verwenden soll.

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Liebe Maria,

das mit dem Zitieren hat nun schon wesentlich besser geklappt. ;-)

Die Bezeichnungen wurden von Dreamweaver erstellt.

Mir schwant böses... Es ist leider eine Tatsache: Mit Dreamweaver "gestaltete" Seiten sind aus technischer Sicht eine regelmäßige Katastrophe. Wenn Du es "richtig" machen willst, dann trittst Du das Teil umgehend in die Tonne. Da steht zwar "professionell" drauf, aber Profis, die es "richtig" machen wollen, benutzen das Teil überhaupt nicht. Im Forumsarchiv kannst Du nachlesen, wann die Profis tatsächlich auf den Dreamweaver zurückgreifen, nämlich genau dann, wenn es "quick and dirty" sein soll.

Willst Du "quick and dirty"? Oder willst Du es "richtig"?

Kann diese gerne noch abändern. Die 4 DIVs in dem Beispiel sind aber noch gar keine Bereiche für Inhalte. Es handelt sich dabei um den schwarzen Bereich und die 3 weißen Balken und zwar folgendermaßen:
apDiv2 --> Schwarzer Bereich
apDiv3 --> vertikaler Balken
apDiv4 --> horiziontaler Balken oben
apDiv5 --> horiziontaler Balken unten

Du musst Dich sofort von der Vorstellung trennen, dass das Markup (der (X)HTML-Code) irgendetwas mit dem Aussehen zu tun hätte. Das ist zwar nicht 100%ig zu trennen, aber in der Vorstellung musst Du von einer 100%igen Trennung ausgehen, wenn Du vernünftig arbeiten willst: HTML hat nichts damit zu tun, wie das Ganze später einmal aussieht!

Also: Uns interessiert das Markup ersteinmal überhaupt garnicht. Uns interessiert in aller erster Linie der Inhalt, Inhalt und sonst garnichts. In diesem Zusammenhang sei auf das HTML-Tutorial verwiesen, in dem das Beispielhaft vorgeführt wird.

Welche Inhalte hast Du denn auf der Seite? Sei doch so gut und stelle einmal Inhalte vor! Solange wir keine vorliegen haben, ist Dir nicht wirklich sinnvoll weiterzuhelfen.

Die Bereiche mit Inhalten sind demnach erst noch zu definieren.

Falscher Ansatz! Zuerst ist Inhalt. Dieser wird dann semantisch ausgezeichnet. Wenn das gegeben ist, dann kann man über Gestaltung reden - eher nicht!

Ich gehe hier davon aus (da bin ich mir aber nicht sicher, ob ich da bereits meinen Fehler mache), dass ich weitere DIV-Elemente definieren muss.

NEIN! Zuerst willst Du den Inhalt haben. Wenn Du den sinnvoll mit HTML ausgezeichnet hast, dann kann man darüber nachdenken, wie das Ganze aussehen soll. Wenn das alles geklärt ist, dann kann man über eine technische Realisierung sprechen. Einen Schritt nach dem anderen!

Die Navigation, Footer etc. können wir gerne außen vor lassen, da ich mich da dann wieder selbst weiter durcharbeiten kann.

Nein. Eben nicht! Auch die Navigation und der Footer sind Inhalte auf Deiner Seite, die in der Struktur mit abgebildet werden müssen. Dass das immerwieder gleiche, fest stehende Seitenelemente werden, ist kein Widerspruch.

Ich möchte einen Content-Bereich, der sich genau zwischen den 3 weißen Balken abspielt.

Das ist eine visuelle, keinesfalls aber eine strukturelle Aussage. Lass mal Content sehen! Dann kann man darüber reden, wie der gestaltet werden kann, nachdem man ihn sinnvoll ausgezeichnet hat.

Dabei soll der Abstand zwischen oberem und unterem weißen Balken fix sein (222px)

Schon wieder eine visuelle Vorgabe und keine strukturelle. Merkst Du was...?

dieses neue DIV-Element als Unterelement von dem oberen horiziontalen Balken anbringen würde.

So langsam tendiert Deine Formulierung ins Unsinnige. Dieser Satz hat strukturell betrachtet keinen Sinn!

Innerhalb dieses DIV-Elements "content" möchte ich dann Inhalte anbringen. Beispielsweise rechts ein Bild und links Text:

Dann lass mal den Text und das Bild sehen! Mit Platzhaltertexten kommen wir hier offensichtlich nicht weiter.

allerdings fehlen mir die Elemente mit denen ich arbeiten soll, um mit dementsprechenden Abständen zu arbeiten, wenn ich keine Tabelle verwenden soll.

Eben. Dir fehlen Elemente, da Du noch keine Inhalte hast, die mit passenden Elementen hätten ausgezeichnet werden können. Also her mit den Inhalten. Die passenden Elemente finden sich dann fast wie von selbst!

Liebe Grüße,

Felix Riesterer.

[Maria]

Eben. Dir fehlen Elemente, da Du noch keine Inhalte hast, die mit passenden Elementen hätten ausgezeichnet werden können. Also her mit den Inhalten. Die passenden Elemente finden sich dann fast wie von selbst!

Liebe Grüße,

Felix Riesterer.^

Hm, also ich habe noch nicht wirklich die Texte, die ich letztendlich rein setzen möchte. Macht das einen Unterschied, was nachher im Text steht?
Ich möchte ja generell weiter kommen und kapieren, wie ich unterschiedliche Inhalte innerhalb eines bestimmten Bereichs unterbringe.
Hast Du mir keinen Ansatz, wie Du es umsetzen würdest, wenn Du im Quadrat zwischen den 3 Balken irgendeinen Text und ein Bild auf der rechten Seite, haben wollen würdest und wie Du es machst, dass Du diesen Text innerhalb des DIV-Elements ausrichtest?
Also so wie auch in dem Beispiel:
http://www.d-u-m-m-y.de/maria/test3.html
Dort habe ich jetzt für den Text ein extra DIV-Element mit padding 10px gemacht, damit der Text nicht direkt links oben im Eck sitzt und für das Bild ein extra DIV-Element, da ich bei diesem nicht möchte, dass da ein Abstand zu den Balken ist.
Es gibt da aber doch bestimmt elegantere und sinnvollere Lösungen.
Früher hätte man ja im Grunde wohl eine Tabelle zur Gestaltung genutzt und einfach den Zellen-Elementen, die dementsprechenden Abstände zugewiesen.
Mit welchen Elementen zur Textausrichtung arbeitet man da heute innerhalb eines DIV-Elements? Oder gibt es da keine bzw. macht man das direkt über Attribute der Textelemente, wie beispielsweise auch beim Bild mit <img> wo ich ja auch Werte zum Abstand angeben kann?

Ich glaube ich würfele einfach noch durcheinander, wann man ein Attribut im übergeordneten und wann im Element selbst nutze.

Ich schau wohl mal am besten nochmals die Tutorials durch, ob ich etwas überlesen habe, was mir gerade elementar fehlt.

[ChrisB]

Hi,

Hast Du mir keinen Ansatz, wie Du es umsetzen würdest, wenn Du im Quadrat zwischen den 3 Balken irgendeinen Text und ein Bild auf der rechten Seite, haben wollen würdest und wie Du es machst, dass Du diesen Text innerhalb des DIV-Elements ausrichtest?
Also so wie auch in dem Beispiel:
http://www.d-u-m-m-y.de/maria/test3.html

Für das, was diese Seite an Inhalt hat - da kommst du mit einer H1-Überschrift, einem P-Textabsatz und einem IMG-Element hin; ggf. noch DIVs/SPANs für Gruppierungen/als „Angriffspunkte“ für CSS.

Der Rest braucht dann nur noch Hintergrundfarben/-Bilder, und Borders.

MfG ChrisB

[Maria]

Für das, was diese Seite an Inhalt hat - da kommst du mit einer H1-Überschrift, einem P-Textabsatz und einem IMG-Element hin; ggf. noch DIVs/SPANs für Gruppierungen/als „Angriffspunkte“ für CSS.

Danke für die Rettung. Ich hatte einfach zu kompliziert gedacht bzw. dachte, dass ich nochmals irgendein Element ähnlich früher der Tabellen zur Strukturierung bzw. Ausrichtung der Texte benötige.

Habe das was ich wollte jetzt alles hinbekommen, wobei ich noch ein bisschen vertiefen muss, bei welchen Elementen ich welche Attribute anwenden kann.

Gibt es eigentlich irgendein Element, das man für die Ausrichtung von Text innerhalb eines DIV-Elements nutzen kann, so dass man z. B. sagen kann ich möchte den Text linksbündig unten? Linksbündig ist ja kein Problem, aber vertikale Ausrichtung kenne ich bisweilen nur align-vertical, was ja aber für die Ausrichtung für Textelemente untereinander vorgesehen ist. Über ein top-margin mit prozentuale Abstandsangabe bekomme ich denselben Effekt hin, aber gibt es da kein Element und Attribut, das ich für so etwas nutzen kann?

Der Rest braucht dann nur noch Hintergrundfarben/-Bilder, und Borders.

MfG ChrisB

[Shadowcrow]

'ǝɯɐu$ ıɥ

Gibt es eigentlich irgendein Element, das man für die Ausrichtung von Text innerhalb eines DIV-Elements nutzen kann, so dass man z. B. sagen kann ich möchte den Text linksbündig unten? Linksbündig ist ja kein Problem, aber vertikale Ausrichtung kenne ich bisweilen nur align-vertical, was ja aber für die Ausrichtung für Textelemente untereinander vorgesehen ist. Über ein top-margin mit prozentuale Abstandsangabe bekomme ich denselben Effekt hin, aber gibt es da kein Element und Attribut, das ich für so etwas nutzen kann?

du willst dich also mit http://de.selfhtml.org/css/eigenschaften/positionierung.htm#posbottom@title=position beschäftigen...

ssnɹƃ
ʍopɐɥs

[Beat]

Ich habe eine Grundstruktur, gemäß nachfolgendem Link:
http://www.d-u-m-m-y.de/maria/test.html

Du verwendest absolut positionierte Elemente um so etwas wie graphische Separatoren darzustellen.
Dein Design sollte aber möglichst liquide sein, bzw solche absolute Positionierung erst vornehmen, wenn der Platz auch dem screen auch verfügbar ist.

Hoffe, das darf man Struktur nennen?! ;-)

ich sehe vier div im body mit classennamen die nichts aussagen.
Mit Struktur hat das nichts zu tun.
Struktur ist vielmehr die logische Anordnung von Inhalten und Klassennamen sollten auf den Inhaltstyp verweisen.

Ich weiß beispielsweise nicht, ob ich hier das ein oder andere DIV-Element insofern "vergewaltige", da ich auch die weißen Balken zur Gestaltung aus DIV-Elementen gestaltet habe.

Es ist ein problematischer Ansatz. Warum sehe ich keine Scrollbars?
Was geschieht bei anderen medientypen / kleinen Viewports?

mfg Beat

[Maria]

Ich habe eine Grundstruktur, gemäß nachfolgendem Link:
http://www.d-u-m-m-y.de/maria/test.html

Du verwendest absolut positionierte Elemente um so etwas wie graphische Separatoren darzustellen.
Dein Design sollte aber möglichst liquide sein, bzw solche absolute Positionierung erst vornehmen, wenn der Platz auch dem screen auch verfügbar ist.

Ich glaube ich verstehe was Du meinst. Mir ist wichtig, dass das Design bei diesem kleinen Testprojekt erhalten bleibt und ich möchte damit eigentlich auch nur den Fall im Großen und Ganzen mit Vollbild abdecken.
Gerne beschäftige ich mich im nächsten Schritt auch mit diesen Punkten, aber mir scheint ich kann nicht alles auf einmal erschlagen und gleich die perfekte Seite gestalten, die alle Rafinessen berücksichtigt.

Hoffe, das darf man Struktur nennen?! ;-)

ich sehe vier div im body mit classennamen die nichts aussagen.
Mit Struktur hat das nichts zu tun.
Struktur ist vielmehr die logische Anordnung von Inhalten und Klassennamen sollten auf den Inhaltstyp verweisen.

Die hat Dreamweaver vergeben, mit welchem ich anfangs mal etwas gespielt habe. Hatte diese bisweilen nicht abgeändert, da es sich noch gar nicht um Elemente für Inhalte handelt, sondern eher grafische Elemente für das von mir gewünschte Layout.

Ich weiß beispielsweise nicht, ob ich hier das ein oder andere DIV-Element insofern "vergewaltige", da ich auch die weißen Balken zur Gestaltung aus DIV-Elementen gestaltet habe.

Es ist ein problematischer Ansatz. Warum sehe ich keine Scrollbars?
Was geschieht bei anderen medientypen / kleinen Viewports?

In dem Fall sollen nicht nachher unzählige wechselnde Inhalte unterschiedlicher Form und Größe genutzt werden, sondern die Inhalte werden so sein, dass diese für den schmalen Streifen passend sind.

Mir geht es eigentlich im Grundsatz darum mal zunächst zu verstehen, wie ich innerhalb eines DIV-Elements Inhalte anordne bzw. an was ich diese ausrichte und was ich zu berücksichtigen habe, um die Abstände gemäß dem Boxmodell zu realisieren.
Habe das in dem anderen Antwortbeitrag näher definiert.

Herzlichen Dank für Deine Hinweise.

mfg Beat