CSS Layout statt Tabelle - Problem

[RFZ]

Moin,
ich möchte schon lange beim Layouten auf Tabellen verzichten und lieber mit divs und CSS arbeiten, aber leider hab ich es bisher immer aufgegeben, weil es einfach nicht so klappt wie ich das will.
Ich steh wieder kurz vor soeiner Situation, tüftle schon seit Stunden, und es geht hald einfach nicht ;)

Ich möchte einfach folgendes Layout 'übersetzen':
http://rfz.dyndns.tv/selfhtml/table_layout.html

Einer von viele Versuchen wäre der hier:
http://rfz.dyndns.tv/selfhtml/css_layout.html

Meine Bitte an euch, kann mir jemand das Layout mittels CSS+Divs erstellen und mir vielleicht erklären was ich falsch mache? Bedenkt die dynamische Höhe, wenn man das Fenster verkleinert und der Text größer wird...

Das Layout sollte mal zumindest im IE und Firefox gehn...

Vielen Dank ;)

greetz RFZ

[Felix Riesterer]

Lieber Roter Fruchtzwerg,

Meine Bitte an euch, kann mir jemand das Layout mittels CSS+Divs erstellen und mir vielleicht erklären was ich falsch mache? Bedenkt die dynamische Höhe, wenn man das Fenster verkleinert und der Text größer wird...

Erstellen tu ich Dir nix, aber Du interessierst Dich brennend für float:

.site_content { float: right, }

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[RFZ]

Erstellen tu ich Dir nix, aber Du interessierst Dich brennend für float:
.site_content { float: right, }

Nun, mir ist schon klar dass mich Float interessiert, aber eigentlich hab ich das schon eingebaut ;) float:right bei site_content hat in bezug auf das Problem garkeinen effekt, es verschiebt doch nur alles nach rechts...
Und auf das rechte Textfeld angewendet löst es die falsche Anzeige im FF auch nicht.
Ausserdem hilft es mir bei der dynamischen Höhe kein Stück weiter.

Ich verlange ja nicht aus Faulheit, dass ihr mir einen Quelltext erstellt... Ich hab doch extra ein sehr kleines Beispiel gemacht, damit es nicht viel Arbeit ist.
Es geht nur darum dass es ein sehr komplexes Problem ist, und mit einem "Du interessierst dich für Float" komm ich hald nicht weiter ;)

greetz RFZ

[Felix]

RFZ,
es ist halt hier so, die Experten schwelgen manchmal nur in Andeutzngen und differenzieren sich durch Herrschaftswissen von der niederen lernenden Klasse.
(Nicht alle, beim Thema Css häufig)

der Verweis auf die üblichen Quellen hier ist überflüssig, weil glaub ich jeder vorher da in selfhtml sucht.

Nur in selfhtml werden nur die einfacheren CSS layouts mit Beispielen gezeigt.

Was hier fehlt ist ein 3-Spalter wo der innere Bereich eine fixe breite hat und alle drei Spalten gleich lang sind, was den Hintergrund angeht, egal welche die längste ist.

Weil die Schlauen hier das Tutorial zu CSS wohl auch nicht recht gelesen haben (sonst würde man da nicht hinverweisen) kommst du so nicht weiter.

Ich habs aufgegeben und wieder ein Tabellenlayout gemacht - es ist schon sehr schwierig.

Sei getröstet, du bist nicht allein

[RFZ]

der Verweis auf die üblichen Quellen hier ist überflüssig, weil glaub ich jeder vorher da in selfhtml sucht.

Nur in selfhtml werden nur die einfacheren CSS layouts mit Beispielen gezeigt.

So scheint es, denn ich hab echt schon Stunden gesucht, und das nicht nur heute, sondern schon seit Monaten immer wieder...

Ich habs aufgegeben und wieder ein Tabellenlayout gemacht - es ist schon sehr schwierig.

Ja, das werde ich wohl auch machen, denn was hilfts mir, wenn ich innerhalb von 10 Stunden quasi nichts produziert hab.
Davon hab ich nix, ausser Ärger und eine große Wut auf mich und alle die mir immer sagen wollen man soll auf Tabellen verzichten.

Sei getröstet, du bist nicht allein

Danke, auch wenn es mir nicht weiter hilft, hilft es mir wenigstens ;)

greetz RFZ

[Ingo Turski]

Hi,

Nur in selfhtml werden nur die einfacheren CSS layouts mit Beispielen gezeigt.

Was erwartest Du? Beispiele mit so komplizierten Layouts, die keiner mehr nachvollziehen kann? Oder Beispiele mit grauenhaftem HTML-Code, der für die meisten Workarounds erforderlich ist? Das würde hier sicher auf weit mehr Kritik stoßen.
Du übersiehst auch, daß es sich nur um Beispiele handelt und nicht um Layoutvorlagen für (fast) jeden Zweck. Beispiele, die dem grundsätzlichen Verständnis dienen, wie die in den anderen Teilen der Dokumentation angegebenen Eigenschaften praktisch angewendet werden können und - in Grenzen - welche Fallstricke es zu beachten gibt.

Was hier fehlt ist ein 3-Spalter wo der innere Bereich eine fixe breite hat und alle drei Spalten gleich lang sind, was den Hintergrund angeht, egal welche die längste ist.

Wie gesagt: wer das Kapitel wirklich durcharbeitet und auch ein wenig experimentiert, sollte ausreichend Kenntnisse haben, um dem zweispaltigen Layout eine dritte Spalte hinzuzufügen.
Und er sollte wissen, daß eine fixe Breite für den Inhaltsbereich weniger Sinn macht als für die Randbereiche - zumal wenn man den optischen Eindruck eines Tabellendesigns realisieren will.
Übersehen wird leider auch eine ganz simple Möglichkeit: Der Seitenautor kann doch auch für ausreichende Inhalte sorgen, so daß der Inhaltsbereich stets die größte Höhe einnimmt, was gleichhohe Bereiche wesentlich erleichtert.

Vor allem verstehe ich nicht, warum immer wieder nach gleichen "Spalten"-höhen gefragt wird. Zum einen ist das eher konservativ um nicht zu sagen altmodisch und zum anderen zeugen die Fragestellungen dazu meist von einem gründlichen Nichtverständnis des CSS-Boxmodells. Wer Spalten will soll doch nicht CSS vergewaltigen, sondern zu seinem Spaltendenken stehen und das HTML-Element verwenden, welches tatsächlich Spalten definiert.

freundliche Grüße
Ingo

[Alexander Brock]

Hallo Ingo,

Wer Spalten will soll doch nicht CSS vergewaltigen, sondern zu seinem Spaltendenken stehen und das HTML-Element verwenden, welches tatsächlich Spalten definiert.

Wieso? Extra für solche Zwecke gibt es doch display: table-cell,
Das verwende ich, um eine Navigationsleiste (d.h. eine ungeordnete Liste von Links)
nebeneinander zu bekommen. Funktioniert in allen Browsern[tm] ganz gut,
nur für den IE braucht man wieder float.

Gruß
Alexander Brock

[Ashura]

Hallo Alexander.

Wieso? Extra für solche Zwecke gibt es doch display: table-cell,
Das verwende ich, um eine Navigationsleiste (d.h. eine ungeordnete Liste von Links)
nebeneinander zu bekommen.

Das hättest du auch mit display:inline; bewerkstelligen können.

Funktioniert in allen Browsern[tm] ganz gut,
nur für den IE braucht man wieder float.

Dann ist auch das nicht mehr erforderlich.

BTW: Sieht mittlerweile richtig gut aus, deine Site. :-)

Gruß, Ashura

[Alexander Brock]

Hallo Ashura,

Das hättest du auch mit display:inline; bewerkstelligen können.

Jetzt wo du's sagst... "Es gibt selten den allein seligmachenden Weg"

BTW: Sieht mittlerweile richtig gut aus, deine Site. :-)

Danke, ich arbeite aber immer noch daran :-)

Gruß
Alexander Brock

[Detlef G.]

Hallo Alexander

BTW: Sieht mittlerweile richtig gut aus, deine Site. :-)

Danke, ich arbeite aber immer noch daran :-)

Auf der Startseite steht:
"... zu Verantwortung gezogen werden kann. Dies kann - so das LG - nur
dadurch verhindert werden, dass man sich ausdrücklich von diesen Inhalten
distanziert, ..."

Lies dazu bitte Urteil des Landgerichts Hamburg oder/und
Noch'n Urteil zur Linkhaftung.

Auf Wiederlesen
Detlef

[Alexander Brock]

Hallo Detlef,

[Berechtigte Kritik am "Disclaimer"]

Ich weiß das, diese alten Seiten sind aber nicht von mir und das ganze
wird erst geändert, wenn die neue Version fertig ist, und da ist noch
viel Arbeit nötig. Die verlinkten Seiten sind im Moment nicht illegal,
also stören weder die Links darauf noch dieser "Disclaimer" so sehr,
dass dieser sofort entfernt werden müsste.

Gruß
Alexander Brock

[MudGuard]

Hi,

Wieso? Extra für solche Zwecke gibt es doch display: table-cell,
Das verwende ich, um eine Navigationsleiste (d.h. eine ungeordnete Liste von Links)
nebeneinander zu bekommen.
Das hättest du auch mit display:inline; bewerkstelligen können.

Dann kann man aber keine festen Breiten vorgeben …

cu,
Andreas

[Ashura]

Hallo MudGuard.

Das hättest du auch mit display:inline; bewerkstelligen können.

Dann kann man aber keine festen Breiten vorgeben …

Ja, da hast du Recht.
Mich stört aber eine variable Breite selten, vielleicht aus Gewohnheit.

Gruß, Ashura

[Ingo Turski]

Hi,

Wieso? Extra für solche Zwecke gibt es doch display: table-cell,

was wie Du ja selbst schreibst, dank des IE nicht einsetzbar ist.

Das verwende ich, um eine Navigationsleiste (d.h. eine ungeordnete Liste von Links)
nebeneinander zu bekommen.

nö. das ist hier völlig unsinnig engesetzt und unnütz bzw. bewirkt bei den Breadcrumbs lediglich list-style:none.

nur für den IE braucht man wieder float.

in diesem Fall auch für alle Browser.

freundliche Grüße
Ingo

[schwarze Piste]

Tachchen!

Meine Bitte an euch, kann mir jemand das Layout mittels CSS+Divs erstellen und mir vielleicht erklären was ich falsch mache? Bedenkt die dynamische Höhe, wenn man das Fenster verkleinert und der Text größer wird...

"Machen" wird dir das hier wohl niemand, aber heiße Tipps gibt's:

1. Du benötigst ein Hintergrundbild, das links rot, dann blau und dann grau
ist und das du in deinem div.sitecontent vertikal kacheln lassen kannst.

2. Da die beiden Elemente links wohl eine fest Breite haben, tendiere ich
dazu, den Text um eben diese Breiten einzurücken.

3. Die Elemente zu Navi und Bild sollten dann auf eine dir genehme Art
und Weise aus dem Textfluss genommen und so über die Einrückung gelegt werden.

4. Sollte es Fälle geben, bei denen der Text kürzer ist als das Bild,
brauchst du ein abschließendes Element zum "clearen" ... um so den
Hintergrund ausreichend zu strecken.

5. Wenn du jetzt nicht auf Anhieb alles verstehst, solltest du mit
den gegebenen Stichworten, Selfhtml und der Archivsuche _relativ_
weit kommen. ;-)

Gruß

Die schwarze Piste

[RFZ]

1. Du benötigst ein Hintergrundbild, das links rot, dann blau und dann grau
   ist und das du in deinem div.sitecontent vertikal kacheln lassen kannst.

Es widerstrebt mir schonmal für einen einfarbigen Hintergrund ein Bild erstellen zu müssen. Aber zur Not würde ich das tun.
Problem dabei: geh von aus dass die Spalten nicht immer gleich breit sind.

2. Da die beiden Elemente links wohl eine fest Breite haben, tendiere ich
   dazu, den Text um eben diese Breiten einzurücken.

siehe 1.

5. Wenn du jetzt nicht auf Anhieb alles verstehst, solltest du mit
   den gegebenen Stichworten, Selfhtml und der Archivsuche _relativ_
   weit kommen. ;-)

In der Theorie ist mir das Verhalten von Float und relativen Angaben recht klar.
Aber in der Praxis gibts hald Sachen die ich nicht nachvollziehen kann, oder die hald in einem Browser gehn und im anderen nicht.

Beispiel: Mein Div nimmt nicht die Höhe des darin höchsten Elements an, was ich nicht nachvollziehen kann.
Daraus ergibt sich das Problem dass ich keinen Ansatzpunkt hab die drum herum liegenden Divs höhentechnisch dazu in Relation zu setzen...

Ich kann ja verstehen dass ihr mich erstmal zu diversen Tutorials schickt, das würde ich auch so machen, aber mittlerweile hab ich wirklich viele Beispiele Angeschaut und häng trotzdem seit 15 Uhr an dem Problem. Das geht mir auf den Geist, denn in 5min hab ich das Problem mit ner Tabelle gelöst.

greetz RFZ

[schwarze Piste]

Tachchen!

Problem dabei: geh von aus dass die Spalten nicht immer gleich breit sind.

Wenn die Spalten links, also Menü und Bild nicht gleichbleibend breit
sind, kannst du es bei browserübergreifender Betrachtungsweise im
Zweifel vergessen.

In der Theorie ist mir das Verhalten von Float und relativen Angaben recht klar.

Beispiel: Mein Div nimmt nicht die Höhe des darin höchsten Elements an, was ich nicht nachvollziehen kann.

Dann hast du, sorry, das Verhalten von float und clear eben noch nicht
richtig verstanden. ;-)

Daraus ergibt sich das Problem dass ich keinen Ansatzpunkt hab die drum herum liegenden Divs höhentechnisch dazu in Relation zu setzen...

Im Zweifel weiter bei "clear" lesen.

Ich kann ja verstehen dass ihr mich erstmal zu diversen Tutorials schickt, das würde ich auch so machen, aber mittlerweile hab ich wirklich viele Beispiele Angeschaut und häng trotzdem seit 15 Uhr an dem Problem. Das geht mir auf den Geist, denn in 5min hab ich das Problem mit ner Tabelle gelöst.

Nimm's leicht, mir würde wahrscheinlich ähnlich lange jedes Tabellenlayout
um die Ohren fliegen ... und das meine ich sehr ernst! ;-)

Gruß

Die schwarze Piste

[Jan]

Hallo,

Fertige Layouts findest Du doch in Selfhtml: http://de.selfhtml.org/css/layouts/index.htm. Mit Float wirst Du Deine Wünsche erfüllen können.

Jan

[RFZ]

Fertige Layouts findest Du doch in Selfhtml: http://de.selfhtml.org/css/layouts/index.htm. Mit Float wirst Du Deine Wünsche erfüllen können.

Moin,
fertige Layouts hab ich mir zu hunderten angesehn, nur helfen die mir nicht weiter. Ich weiss wie man mit float divs nebeneinander setzt und somit Spalten erstellt. Das hilft mir aber nicht dabei weiter, dass diese spalten alle gleich hoch, aber dennoch dynamisch sein sollen. height:100% geht nämlich einfach nicht.
Da geht das Problem schon los, im Firefox nimmt ja nichtmal das Elternelement als minimale Größe die Höhe der inneren Divs an, allein das versteh ich nicht.

[Jan]

Setz doch einfach alle drei inneren divs auf float:left! Ich sehe das Problem irgendwie nicht.

[RFZ]

Setz doch einfach alle drei inneren divs auf float:left! Ich sehe das Problem irgendwie nicht.

Hast du meinen Quelltext mal angesehn?

greetz RFZ

[Jan]

Hast du meinen Quelltext mal angesehn?

Klar. Du musst nur die drei divs jeweils mit float:left formatieren und sie sind nebeneinander. So willst Du es doch haben?

[RFZ]

Klar. Du musst nur die drei divs jeweils mit float:left formatieren und sie sind nebeneinander. So willst Du es doch haben?

Und du hast wirklich reingeschaut? Genau das hab ich ja bereits gemacht...
Ich will aber auch dass alle davon die selbe Höhe haben...

[Jan]

Dann nimm eine Tabelle oder die von Andreas beschriebene Tabellensimulation.

[Ingo Turski]

Hi,

fertige Layouts hab ich mir zu hunderten angesehn, nur helfen die mir nicht weiter.

klar, wenn es sich nur um Layouts und nicht um Beispiele mit umfangreichen Erklärungen handelt.

Ich weiss wie man mit float divs nebeneinander setzt und somit Spalten erstellt.

Aber nur rudimentär. Dir wurde bereits gesagt, daß zu float meist auch clear nötig ist, weil float Elemente aus dem Fluß nimmt - und dadurch auch die Höhe von umgebenden Elementen nicht mehr  beeinflussen; das ist Dir z.B. unbekannt.

Schau Dir im besagten Selfhtml bitte mal dieses Beispiel ganz genau an. Und dann lies die Erläuterungen - am bsten nicht nur die zu diesem einen Beispiel, sondern das ganze Kapitel. Dann dürfte Dir auch so ziemlich alles klar sein.

freundliche Grüße
Ingo

[Andreas]

Hallo,

Auch wenn sich für tabellarische Inhalte eigentlich wohl eine Tabelle am besten eignet (Tabelle strukturieren ja Inhalte in Spalten), so kann es für eine vollständige Trennung von Inhalt und Layout durchaus sinnvoll sein, statt einer Tabelle nur div-Bereiche zu verwenden. Insofern ist Deine Überlegung also sinnvoll.

Um dennoch div-Bereiche wie eine Tabelle anzeigen zu lassen, bietet sich meines Erachtens die unter http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display beschriebene Möglichkeit zur Simulierung einer Tabelle an. Ob das bei drei einfachen Spalten gerechtfertigt ist und ob Deine Spalten wirklich gleich lang sein sollten (meines Erachtens etwas altmodisch) ist jedoch Deine Entscheidung.

Viel Spaß
Andreas

[Detlef G.]

Hallo Andreas

... http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display beschriebene Möglichkeit zur Simulierung einer Tabelle an.

"Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer 5.x noch nicht."

Die Aussage zum IE 5.x trifft genauso auch für den IE 6 zu.

Auf Wiederlesen
Detlef