nicht angemeldet
Spalte mit flexibler Breite
0 
Gernot Back
0 0 Gernot Back
0 0 Gernot Back
0
0 
Struppi
Spalte mit flexibler Breite
Hallo zusammen
ich grabe seit einer Stunde im Forums-Archiv nach einer Antwort auf folgende Frage (wenn sie bereits irgendwo klar beantwortet ist, verzeiht mir und lasst euch vielleicht trotzdem auf JA bzw NEIN ein... und einen Link, wo die Lösung steht, danke ;-)
Ist es möglich mit divs/css, also ohne Tabelle, zwei Spalten zu definieren, von der die linke so breit ist, wie ein in ihr liegendes Bild und die rechte den Rest der Breite einnimmt. Also ein Äquivalent zur folgenden Tabellen-Lösung:
----------------------------------------------------
| width:1px mit breitertem img | umbrechender text |
----------------------------------------------------
...das Bild soll also nicht umflossen werden, sondern Text und Bild sollen schön auf ihrer Seite bleiben.
Ich suche nach einer Lösung ohne Scripte und sie soll natürlich in allen gängigen Browsern klappen.
Dank und Gruß,
Johannes.
-
Hallo aacjohn,
Ist es möglich mit divs/css, also ohne Tabelle, zwei Spalten zu definieren, von der die linke so breit ist, wie ein in ihr liegendes Bild und die rechte den Rest der Breite einnimmt. Also ein Äquivalent zur folgenden Tabellen-Lösung:
| width:1px mit breitertem img | umbrechender text |
"width:1px mit breiterem img"? Was willst du mit "width: 1px" bezwecken, wenn das Bild breiter ist? Die Breite deines Bildes musst du schon kennen und auch als Margin-Left für die zweite Spalte angeben, wenn du die, anders als die erste mit dem Bild, nicht floaten lässt. Ansonsten lass doch beide Spalten floaten. Dann hast du auch nicht mit dem 3-Pixel-Bug des IE<7 zu kämpfen. Wenn die zweite Spalte genug Text enthält, dann nimmt sie ja auch die restliche Breite ein.
Gruß Gernot
--
super me-
Hi Gernot
"width:1px mit breiterem img"? Was willst du mit "width: 1px" bezwecken, wenn das Bild breiter ist?
Bei Tabellen kann man mit einer solchen Angabe erreichen, dass die Spalte "so schmal wie möglich", also zb so breit wie ein enthaltenes bild gesetzt wird.
Ansonsten lass doch beide Spalten floaten. Dann hast du auch nicht mit dem 3-Pixel-Bug des IE<7 zu kämpfen. Wenn die zweite Spalte genug Text enthält, dann nimmt sie ja auch die restliche Breite ein.
Wie soll das gehen? Folgendes funktioniert nicht. Die Blöcke landen untereinander:
<div style="float: left;">
Inhalt linke Spalte
</div>
<div style="float: right;">
Inhalt rechte Spalte
</div>Gruß, Johannes.
-
Hallo aacjohn,
Wie soll das gehen? Folgendes funktioniert nicht. Die Blöcke landen untereinander:
<div style="float: left;">
Inhalt linke Spalte
</div>
<div style="float: right;">
Inhalt rechte Spalte
</div>Lass beide Blöcke in die gleiche Richtung floaten oder setz den rechts floatenden im Quellcode vor den links floatenden.
Gruß Gernot
--
super me-
Hallo Gernot,
Lass beide Blöcke in die gleiche Richtung floaten oder setz den rechts floatenden im Quellcode vor den links floatenden.
...funktioniert bei mir leider beides nicht. Die Blöcke landen immernoch untereinader. Ich habe meinen Test hochgeladen: Unter www.sights.de/flex_spalten kannst du ihn dir anschauen. Wo liegt der Fehler?
Danke und Gruß,
Johannes.-
Hallo aacjohn,
...funktioniert bei mir leider beides nicht. Die Blöcke landen immernoch untereinader. Ich habe meinen Test hochgeladen: Unter www.sights.de/flex_spalten kannst du ihn dir anschauen. Wo liegt der Fehler?
Sieht doch im IE wunderbar aus, wenn beide Bereiche in dieselbe Richtung floaten und in den anderen Browsern und wenn die Bereiche in unterschiedlicher Richtung floaten, liegt es daran, dass die rechte Spalte bei so viel Inhalt keine Breitenbegrenzung hat. In ordentlichen Browsern muss die rechte Spalte ja wie gesagt auch überhaupt nicht floaten, da gibt es ja keinen 3-Pixel-Bug. Da gibst du der zweiten Spalte einfach ein Margin-Left in der Breite des Bildes, damit es nicht "unterflossen" wird.
Gruß Gernot
--
super me-
Hallo Gernot,
Sieht doch im IE wunderbar aus,
Wen interessiert eine Lösung, die nur im IE funktioniert?
In ordentlichen Browsern muss die rechte Spalte ja wie gesagt auch überhaupt nicht floaten, da gibt es ja keinen 3-Pixel-Bug. Da gibst du der zweiten Spalte einfach ein Margin-Left in der Breite des Bildes, damit es nicht "unterflossen" wird.
Die breite des Bildes weiß ich nicht (siehe ursprüngliches Posting). Es geht um ein Template für ein CMS, dass mit verschieden breiten Bildern gefüttert werden soll.
Gruß, Johannes.
-
Hallo aacjohn,
Hallo Gernot,
Die breite des Bildes weiß ich nicht (siehe ursprüngliches Posting). Es geht um ein Template für ein CMS, dass mit verschieden breiten Bildern gefüttert werden soll.
Das zu wissen ist, aber für ein nicht tabellenbasiertes Layout unumgänglich, wenn man nicht will, dass überbreite Elemente in die nächste Zeile umbrechen. Es ist ja gerade der gewünschte Effekt von Float, dass die Elemente woanders hinflutschen, wenn sie an der primär vorgesehenen Stelle keinen ausreichenden Platz mehr finden: Willst du das verhindern, bleibt dir nur, solche Elemente die zu groß sind, über ein umgebendes Element mit overflow:hidden zu beschneiden oder selbst auf die gewüschte Breite zu skalieren.
Gruß Gernot
--
super me-
Das zu wissen ist, aber für ein nicht tabellenbasiertes Layout unumgänglich,...
Das ist alles was ich wissen wollte. Warum war meine Frage eigentlich so schwer verständlich?
Gruß,
Johannes.
-
-
-
-
-
-
-
-
Ist es möglich mit divs/css, also ohne Tabelle, zwei Spalten zu definieren, von der die linke so breit ist, wie ein in ihr liegendes Bild und die rechte den Rest der Breite einnimmt. Also ein Äquivalent zur folgenden Tabellen-Lösung:
| width:1px mit breitertem img | umbrechender text |
...das Bild soll also nicht umflossen werden, sondern Text und Bild sollen schön auf ihrer Seite bleiben.
Was soll das denn genau werden?
Struppi.
-
Was soll das denn genau werden?
Das soll ein Teaser-Template werden. In die linke Spalte kommt ein Bild, in die rechte der Text. Das ganze soll so aussehen, wie die Teaser auf www.tagesschau.de ...nur das dort mit festen breiten gearbeitet wird, also die Bildspalte immer gleich breit ist. Mein Template ist aber für den Einsatz in einem CMS gedacht und ich möchte die Redaktion nicht darauf festlegen, auf allen Seiten die Teaser mit Bildern einer bestimmten Breite zu bebildern. Aber das scheint nur mit Tabellen zu gehen... schade und schwer nachvollziehbar, warum es dafür keine Einstellung gibt. Sowas wie ein width: min-fit wäre fein.
Gruß, Johannes.
-
Das soll ein Teaser-Template werden. In die linke Spalte kommt ein Bild, in die rechte der Text.
und warum willst du keine Tabelle dafür nehmen?
Struppi.
-
Das soll ein Teaser-Template werden. In die linke Spalte kommt ein Bild, in die rechte der Text.
und warum willst du keine Tabelle dafür nehmen?
es hat gewisse nachteile tabellen als layout-elemente einzusetzen. zum einen macht es den code unübersichtlicher. zum anderen handelt es sich in semantischer hinsicht um einen missbrauch: tabellen sollten tabellarische informationen gliedern. ein teaser ist aber nicht wirklich eine sammlung tabellarischer informationen. semantisch korrekte auszeichnung ist vorallendingen im zusammenhang mit barriere-freiheit wichtig.
wenns nicht interessiert:
http://www.vorsprungdurchwebstandards.de/theory/retro-coding/ich gebe zu, dass die verfechter semantischer-korrekter auszeichnung bisweilen religiöse attitüden an den tag legen, aber bis zu einem gewissen grad hat es tatsächlich viele vorteile und in sachen barriere-freiheit gibt es eh einige kriterien, die man in dieser hinsicht erfüllen muss.
gruß, johannes.
-
und warum willst du keine Tabelle dafür nehmen?
es hat gewisse nachteile tabellen als layout-elemente einzusetzen. zum einen macht es den code unübersichtlicher. zum anderen handelt es sich in semantischer hinsicht um einen missbrauch: tabellen sollten tabellarische informationen gliedern. ein teaser ist aber nicht wirklich eine sammlung tabellarischer informationen. semantisch korrekte auszeichnung ist vorallendingen im zusammenhang mit barriere-freiheit wichtig.
Ich weiß ja nicht wie du das aufbaust, für mich sind das durchaus tabellarische Daten oder zumindest eine Tabellarische Darstellung und das der Code unübersichtlicher wird stimmt in dem Fall ja auch nicht, da das was du willst eben nur mit Tabellen geht, alles andere Bedarf mehr oder weniger komplizierter workarounds und folglich unübersichtlicheren Code.
wenns nicht interessiert:
http://www.vorsprungdurchwebstandards.de/theory/retro-coding/Mir ist das schon klar, ich verwende seit Jahren keine Tabellen um meine Seiten zu layouten, nur wenn ich eine Tabellarische Darstellung haben möchte sind Tabellen naheliegend, auch wenn es evtl. nicht 100%ig einer (wie du sagst) religiösen Semantik entspricht.
ich gebe zu, dass die verfechter semantischer-korrekter auszeichnung bisweilen religiöse attitüden an den tag legen, aber bis zu einem gewissen grad hat es tatsächlich viele vorteile und in sachen barriere-freiheit gibt es eh einige kriterien, die man in dieser hinsicht erfüllen muss.
Das wurde hier schon mehrfach diskutiert und ist so nicht richtig, barriere-freiheit und Tabellen haben null miteinander zu tun, du kannst sowohl mit als auch ohne Tabellen schlechte Seiten in dieser Hinsicht bauen.
Struppi.
-
Ich weiß ja nicht wie du das aufbaust, für mich sind das durchaus tabellarische Daten
Eine Tabelle mit einer Zeile und zwei Spalten? Kann man so sehen. Dann kann aber alles eine Tabelle sein.
oder zumindest eine Tabellarische Darstellung und das der Code unübersichtlicher wird stimmt in dem Fall ja auch nicht, da das was du willst eben nur mit Tabellen geht
Das war ja meine Frage, ob's geht oder nicht. Diese Aussage habe ich eben nirgendwo gefunden.
Das wurde hier schon mehrfach diskutiert und ist so nicht richtig, barriere-freiheit und Tabellen haben null miteinander zu tun
Etwas mehr als null vielleicht schon. Wegen der Semantik (s.o.) und weil Tabellen viele Layout-Spezifische HTML-Tags mit sich bringen, die man ja vermeiden will. Andererseits verbraucht man ja auch schnell ein paar divs um alles zurecht zu rücken... und hier fängt das ganze an religiös zu werden.
Anyway... jedenfalls ist es gut zu wissen was mit welcher Methode nicht geht.
Amen, Johannes.
-
Ich weiß ja nicht wie du das aufbaust, für mich sind das durchaus tabellarische Daten
Eine Tabelle mit einer Zeile und zwei Spalten? Kann man so sehen. Dann kann aber alles eine Tabelle sein.
Naja, du hast als Beispiel tageschau.de gebracht, das ist mehr als nur eine Zeile, wenn es nur darum geht kannst du es u.U. ohne Tabelle machen in dem du mit float das Bild um den Text anordnest.
Struppi.
-
Ich weiß ja nicht wie du das aufbaust, für mich sind das durchaus tabellarische Daten
Eine Tabelle mit einer Zeile und zwei Spalten? Kann man so sehen. Dann kann aber alles eine Tabelle sein.
Naja, du hast als Beispiel tageschau.de gebracht, das ist mehr als nur eine Zeile,
ich meinte tabellen-zeilen, nicht text-zeilen und da gäbe es pro teaser nur eine
wenn es nur darum geht kannst du es u.U. ohne Tabelle machen in dem du mit float das Bild um den Text anordnest.
wie meinst du das genau?
wenn es eine möglichkeit gibt, zwei divs nebeneinader zu positionieren, so dass im linken ein bild liegt und im rechten fließtext, der den rest des platzes einnimmt (meine ursprüngliche fragestellung), fände ich das echt interessant zu wissen wie. aber in deinem letzten posting habe ich dich so verstanden, dass es nicht geht. sorry, aber ich versteh nicht, warum darauf niemand eine klare antwort geben will.gruß und danke fürs drüber nachdenken,
johannes.
-
-
-
-
-
-
-