nicht angemeldet
Gegenüberstellungs Layout
Hallo,
ich habe ein kleines Layout Problem. Und zwar möchte ich ein "gegenüberstellungs Layout" ohne Tabellen erstellen.
Es soll 2 Spalten geben eine Links, in welcher Jahreszahlen stehen und eine Weitere rechts, in welcher ein Text dazu steht. Hierbei soll der Text auf der selben höhe beginnen wie die Jahreszahl, nur eben in seiner Spalte.
Mit Tabellen würde man dies einfach so lösen:
<table>
<tr>
<td width="..." valign="top">Jahreszahl</td>
<td valign="top">Beliebig langer Text</td>
</tr>
</table>
Allerdings will ich mir 1. das Layouten mit Tabellen abgewöhnen und 2. funktioniert dies nicht mehr anständig, wenn ich noch Bider dazu anzeigen möchte. Zu einigen der Einträge sollten nämlich noch am rechten Rand Fotos angezeigt werden, welche der Text umfließen muss.
Ich hoffe das war halbwegs verständlich und ihr könnt mir helfen.
Gruß
Björn
-
Hi,
Es soll 2 Spalten geben eine Links, in welcher Jahreszahlen stehen und eine Weitere rechts, in welcher ein Text dazu steht. Hierbei soll der Text auf der selben höhe beginnen wie die Jahreszahl, nur eben in seiner Spalte.
Eine Tabelle wäre hier zwar nicht falsch, aber wenn Du das partout anders lösen willst, probiere es doch mal mit einer Definitionsliste, wie ich auf der Seite http://andrealenzing.de/ausstellungen.html.
freundliche Grüße
Ingo-
Hi,
Eine Tabelle wäre hier zwar nicht falsch, aber wenn Du das partout anders lösen willst, probiere es doch mal mit einer Definitionsliste, wie ich auf der Seite http://andrealenzing.de/ausstellungen.html.
ich würde mich ja glatt noch zu einer Tabelle überreden lassen, wenn das Problem mit dem Bild nciht währe, wenn Das Bild höher ist als der Absatz (Jahreseintrag) dann sollen die ersten Zeilen des Folgeeintrages immernoch das Bild umfließen.
Ich probiere es einmal mit einer Definitonsliste, danke für den Tipp.
Gruß
Björn
-
-
Hi,
ich habe ein kleines Layout Problem. Und zwar möchte ich ein "gegenüberstellungs Layout" ohne Tabellen erstellen.
Es soll 2 Spalten geben eine Links, in welcher Jahreszahlen stehen und eine Weitere rechts, in welcher ein Text dazu steht. Hierbei soll der Text auf der selben höhe beginnen wie die Jahreszahl, nur eben in seiner Spalte.
Auch als "Information mapping" bekannt ... wobei es dieses Layout wahrscheinlichst schon gab, bevor der Begriff ueberhaupt gepraegt wurde ;-)
Ich hoffe das war halbwegs verständlich und ihr könnt mir helfen.
Das ist alles andere als einfach, weil es kein normales 2-Spalten Layout ist: die Spalten sind ja nicht unabhaengig voneinander.
Ich versuche dasselbe ebenfalls seit einer Weile zu erreichen, aber bisher bleibe ich immer noch beim tabellenbasierten Layout ... unter anderem auch, weil ich das mit "reinem" CSS hinbekommen moechte und keine Lust auf seitenlange <div> habe :-( Beispiel mit Tabelle, und ein Versuch, ohne Tabellen auszukommen.
Gruss aus Lausanne,
- Joerg
-
Hallo,
Auch als "Information mapping" bekannt ... wobei es dieses Layout wahrscheinlichst schon gab, bevor der Begriff ueberhaupt gepraegt wurde ;-)
Aha, ich kannte nur den Namen der OOo Absatzvorlage und der lautet "Gegenüerstellung", aber gut eine "Offizelle" Bezeichnung zu kennen.
Das ist alles andere als einfach, weil es kein normales 2-Spalten Layout ist: die Spalten sind ja nicht unabhaengig voneinander.
Ich denke, desshalb habe ich meine Schwierigkeiten damit ;). Schade das es keine Tabulatormarken oder soetwas im CSS gibt, sonst währe es recht Simpel, denn bis auf den Dynamischen Abstand in der ersten Zeile ist das ja alles machbar.
Ich versuche dasselbe ebenfalls seit einer Weile zu erreichen, aber bisher bleibe ich immer noch beim tabellenbasierten Layout ... unter anderem auch, weil ich das mit "reinem" CSS hinbekommen moechte und keine Lust auf seitenlange <div> habe :-( Beispiel mit Tabelle, und ein Versuch, ohne Tabellen auszukommen.
Beim zweiten Link finde ich nicht mal die Position wo soetwas wie ich es wünsch gemacht wird ;).
Das Prblem bei den Tabellen ist wie gesagt das Bild. Oder gibt es eine Möglichkeit, Ein Bild so über eine Tabelle zu legen, dass der in der Tabelle enthaltende Text herumfließt, die Tabellenbreite als ganzes aber nicht beeinflusst wird?
Gruß
Björn -
Hallo
Es soll 2 Spalten geben eine Links, in welcher Jahreszahlen stehen und eine Weitere rechts, in welcher ein Text dazu steht. Hierbei soll der Text auf der selben höhe beginnen wie die Jahreszahl, nur eben in seiner Spalte.
auf Papier würde ich eine zweispaltige Tabelle nehmen, Spaltenüberschriften (so ungefähr) "Jahr" und "Informationen". Je nach Menge der Informationen fallen die Zeilenhöhen halt unterschiedlich aus. Genau aus diesem Grund käme ich nicht auf die Idee, bei der Umsetzung mit HTML etwas anderes als eine Tabelle zu nehmen.
Das ist alles andere als einfach, weil es kein normales 2-Spalten Layout ist: die Spalten sind ja nicht unabhaengig voneinander.
Gut erkannt, es sind Zeilen. Deswegen verwende ich in vergleichbaren Fällen eine Tabelle.
Ich halte sowohl ein- als auch zweispaltige Tabellen für sinnvoll. Nicht jede einspaltige Tabelle ist meiner Meinung nach identisch mit einer Liste. Zweispaltige Tabellen grundsätzlich mit Definitionslisten zu gestalten, halte ich ebenfalls für einen Fehler.
Freundliche Grüße
Vinzenz
-
Hallo,
auf Papier würde ich eine zweispaltige Tabelle nehmen,
Auch dem Papier kann ich Skizen auch beliebig umfließen lassen aber wie mache ich es in einer HTML-Tabelle, dass wenn ein Bild höher ist der Text in der entsprechenden Zelle der Abstand zur nächsten nicht wächst. Natürlich könnte man Das Bild neben der Tabelle Plazieren allerdinst enden dann auch die Einträge die nicht von Grafiken begleitet werden, nicht mehr am Fensterrand sondern dort wo irgendwo da oben das Bild anfängt.
Und da ist das größte Probelem (die Idielle vorstellung auf Tabellen zur Formatierung zu verzichten werfe ich sofort über Bord, wenn ich mit Tabellen etwas erreichen kann was mir ohne nicht gelingt) ich will die Sache eben Obtischen meinen Vorstellungen entsprechend hin bekommen. Leider finde ich keine Technick, die alle Aspekte dieser Idee umsetzt.
Gruß
Björn-
hi,
Und da ist das größte Probelem (die Idielle vorstellung auf Tabellen zur Formatierung zu verzichten werfe ich sofort über Bord, wenn ich mit Tabellen etwas erreichen kann was mir ohne nicht gelingt) ich will die Sache eben Obtischen meinen Vorstellungen entsprechend hin bekommen. Leider finde ich keine Technick, die alle Aspekte dieser Idee umsetzt.
Diese "obtischen" *g* Aspekte wirst du mittels einer Tabelle m.E. am wenigsten umsetzen können.
Ich würde, wie ich Vinzenz gerade schon sagte, vermutlich wirklich eine Liste nehmen (eher eine ordered list als eine Definitionsliste wie Ingo sie erwähnte, weil die Beziehung "Jahr - Information" keine besonders "definitionsartige" ist).
Das Jahr als erstes Kindelement von <li> wird nach links gefloatet, ein ggf. gewünschter Effekt "durchgängiger Spaltenhöhe" per Abwandlung von faux columns realisiert.
Und deine Bilder, die vom Text des aktuellen Elementes umflossen werden sollen, und - wenn ich das richtig verstanden habe ggf. auch noch vom Text des/der nachfolgenden - würden, ebenfalls im <li> untergebracht, nach rechts gefloatet.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
hi,
Ich halte sowohl ein- als auch zweispaltige Tabellen für sinnvoll. Nicht jede einspaltige Tabelle ist meiner Meinung nach identisch mit einer Liste. Zweispaltige Tabellen grundsätzlich mit Definitionslisten zu gestalten, halte ich ebenfalls für einen Fehler.
Aber gerade in diesem Falle wäre eine Liste m.E. das angebrachteste (wenn ich den Darstellungswunsch bis jetzt richtig verstanden habe).
auf Papier würde ich eine zweispaltige Tabelle nehmen, Spaltenüberschriften (so ungefähr) "Jahr" und "Informationen".
Das _ist_ für mich eine Liste - eine Liste von Informationen, deren Ordnung und Auszeichnung sich über das Jahr ergibt.
Allerdings ist die "Nummerierung" einer solchen Liste natürlich schwer zu bewerkstelligen - molily hatte dazu erst letzte Tage einen sehr schönen Archivbeitrag seiner selbst verlinkt, wo er das Problem, und welche Teile einer solchen Liste struktureller Bestandteil des Inhaltes, und welche bloße Formatierungen sind, intensiver betrachtet hatte.
Nichts desto trotz, eine Liste fände ich hier alles andere als verkehrt, und die "nummerierenden" Jahreszahlen würde ich dann ggf. mit ins <li> packen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
Hallo,
ich konnte mich heute Nacht mal wieder an dieses Problem machen und habe mit euerer Hilfe die Lösung gefunden. Besonders Ingos Beispiel hat mir geholfen.
Wenn man weiß wie ist es auch recht einfach:
Man definiere sich 2 CSS-Formate. Da ich mich an Ingos Beispiel orientierte ist es in meinem Fall tatsächlich je eine für das DD- bzw. DT-Tag, es sollte aber genau so gut mit z.B. zwei Formaten für das P-Tag zu realisieren sein. Hierbei achte man drauf, dass diese sich vom Font und den Oberen Abständen her gleichen.
Das Format, welches für die Linke Spalte verwendet wird muss folgende Eigenschaften aufweisen:
1. Eine Feste Breite (mit dem Atribut with)
2. Es muss Festgelegt werden, dass diese "umflossen" wird (float:left).
3. Und dammit diese aufeinander Folgen können muss verboten werden, dass sie selbst andere (instanzen ihrer Selbst) umfließt (clear:left)Das Format für die rechte Spalte sollte ein margin-left Atribut besitzen, welches dafür sorgt das alle Zeilen weiter Rechts beginnen als die linke Spalte breit ist.
Wenn man den Bildern dann noch ein align="right" mit gibt (was ja ohnehin gewollt war) klappt es auch mit dem Grafikumlauf.
Die einträge in meiner css Datei sehen momentan so aus:
dt.infomap {float:left; clear:left;width:200px;}
dd.infomap {margin-left:205px;}und funktionieren wie Gewünscht.
Danke noch einmal für eure Hilfe
Björn