nicht angemeldet
Tabellenproblem - Feste Zeilenhöhe
Hallo,
ich habe mal versucht, mein Problem in minimalem Code festzuhalten, an dem man sehen kann, was ich meine:
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td width="140">Menü</td>
<td rowspan="2" width="628">
Contentbereich
<p>Hallo</p><p>Hallo</p><p>Hallo</p>
</td>
</tr>
<tr>
<td width="140" valign="bottom">
Max Mustermann<br />
Musterstraße 1<br />
12345 Musterstadt
</td>
</tr>
</table>
Man sieht, dass es sich dabei um eine zweispaltige Tabelle handelt, die in der ersten Spalte zwei Zeilen hat. Die erste Zeile soll ein Menü aufnehmen, die zweite Zeile nur eine Adressinfo. Nun haben ich zwei Hürden, bei denen ich anscheinend vor lauter Bäumen den Wald nicht mehr sehe. Verglängere ich den Content, wächst erwartungsgemäß die linke Spalte mit. Was mich jetzt aber stört, ist die Tatsache, dass die erste Zeile der ersten Spalte ebenfalls in der Höhe mitwächst. Ich hätte sie aber gerne immer nur so groß, wie es für das Menü notwendig ist? Also quasi immer passend zum Inhalt. Wie löst man dieses Problem?
Gibt es für meine Konstruktion überhaupt eine Lösung oder muss man da ganz anders rangehen?
Viele Grüße,
Tobias :-)
-
eine zeile kann immer nur eine größe haben!
wenn eine <td> ausreisst in der höhe wächst die ganz zeile!
du kannst ja einen rowspan machen ...
bzw. in die erste <td> wieder einen <table> der nur einen inhalt hat und zwar das menü! dann ist es egal wie groß der andere <td> ist weil der table ja in der größe fixiert werden kann ..-
eine zeile kann immer nur eine größe haben!
wenn eine <td> ausreisst in der höhe wächst die ganz zeile!
du kannst ja einen rowspan machen ...
bzw. in die erste <td> wieder einen <table> der nur einen inhalt hat und zwar das menü! dann ist es egal wie groß der andere <td> ist weil der table ja in der größe fixiert werden kann ..Der Bereich mit dem Menü soll ja gerade nicht fixiert werden, sondern immer so viel Höhe verbrauchen, wie aktuell nötig ist. Das Menü wird von einem Content Management System erzeugt und daher ist die Höhe nicht vorhersehbar.
Die zweite Tabellenzeile, die die Adresse beinhaltet, soll so gestaltet sein, dass die Adresse immer am unteren Rand klebt und nicht am oberen Rand unter dem Menü.Wenn ich also den Content verlängere, soll der Bereich mit dem Menü nicht größer werden, sondern die zweite zeile mit der Adresse einfach höher werden, wobei die Adresse immer am unteren Rand kleben soll. Der Abstand zwischen Menüunterkante und Andresse solll also immer größer werden, je länger der Content in der rechten Spalte ist.
Ich experimentiere jetzt mal ein wenig mit CSS und schaue, ob sich da eine zufriedenstellende Lösung ergibt.
Viele Grüße,
Tobias
-
-
Hi,
Ich hätte sie aber gerne immer nur so groß, wie es für das Menü notwendig ist? Also quasi immer passend zum Inhalt. Wie löst man dieses Problem?
am sinnvollsten ohne Tabellen. Dies ist ein typischer Anwendungsfall für CSS: float und margin.
freundliche Grüße
Ingo-
Hi,
Ich hätte sie aber gerne immer nur so groß, wie es für das Menü notwendig ist? Also quasi immer passend zum Inhalt. Wie löst man dieses Problem?
am sinnvollsten ohne Tabellen. Dies ist ein typischer Anwendungsfall für CSS: float und margin.Hmm, habe jetzt einige Zeit was über float und margin gelesen und rumprobiert. Mir ist jedoch nicht klar, wie ich mit den beiden Auszeichnungen dafür sorgen kann, dass das von mir gewollte funktioniert?
Ich versuche es nochmals genauer zu erklären:
Die Struktur ist dieselbe, wie in meinem ersten Posting. Wo das Menü erscheint, ist der Hintergrund blau, der Bereich unterhalb des Menüs soll einen grauen Hintergrund bekommen. Unter http://www.swts.net/download/screenshot.png habe ich mal nen Schreenshot hinterlegt, der recht deutlich zeigt, was ich meine.
Der blaue Bereich wird bei viel Content entsprechend länger dargestellt. Das möchchte ich vermeiden. Nun komme ich aktuell mit Tabellen nicht weiter und habe versucht, das ganze mal mit CSS zu bauen. Nur habe ich jetzt das Problem, dass ich nicht weiss, wie ich es bewerkstelligen soll, unterhalb des Menüs einen grauen Bereich zu definieren, der 1. mit dem rechts stehenden Content mitwächst und 2. dafür sorgt, dass in diesem Bereich am unteren Rand die Adresse steht. Prinzipiell also so, wie auf den Screenhots, nur ohne mitwachsendem blauen Bereich. Ob jetzt Tabelle oder CSS ist mir erstmal egal. Ich komme bei beiden Lösungen nicht mehr weiter. :-(
Hat jemand nen Tipp für mich oder weiss, wo ich im Netz schauen kann?
Viele Grüße,
Tobias-
Hi,
Unter http://www.swts.net/download/screenshot.png habe ich mal nen Schreenshot hinterlegt, der recht deutlich zeigt, was ich meine.
Hier sehe ich wie schon gesagt eine fast perfekt für ein CSS-Layout geeignete Vorlage. Konkret:- eine Seite (oder einen Bereich innerhakb des Browserfensters) mit einem grauen Hintergrund
- ein links floatendes Bild und einen Textbereich mit weißem Hintergrund
- eine Navigationsliste, display:inline formatiert und zentriert
- eine linksfloatendfe Box mit blauem Hintergrund
- einen Textbereich mit weißem Hintergrund
- eine Fußzeile mit clear und text-align rechtsbümdig ausgerichtet.
Das einzige Problem stellt der Text links unten dar. hierzu müßte die blaue Box und der nebenstehende Bereich in ein relativ positioniertes DIV, damit diese Textbox absolut bottom positioniert werden kann.
Ob jetzt Tabelle oder CSS ist mir erstmal egal.
Mit Tabelle dürfte das weitaus komplizierter umzusetzen sein.
freundliche Grüße
Ingo-
Unter http://www.swts.net/download/screenshot.png habe ich mal nen Schreenshot hinterlegt, der recht deutlich zeigt, was ich meine.
Hier sehe ich wie schon gesagt eine fast perfekt für ein CSS-Layout geeignete Vorlage. Konkret:- eine Seite (oder einen Bereich innerhakb des Browserfensters) mit einem grauen Hintergrund
- ein links floatendes Bild und einen Textbereich mit weißem Hintergrund
- eine Navigationsliste, display:inline formatiert und zentriert
- eine linksfloatendfe Box mit blauem Hintergrund
- einen Textbereich mit weißem Hintergrund
- eine Fußzeile mit clear und text-align rechtsbümdig ausgerichtet.
Das einzige Problem stellt der Text links unten dar. hierzu müßte die blaue Box und der nebenstehende Bereich in ein relativ positioniertes DIV, damit diese Textbox absolut bottom positioniert werden kann. Und zu welchem Element soll dann dieser Bereich relativ positioniert werden?
Kannst Du mir den Absatz nochmals genauer erklären? Soll die blaue Box und der Contentbereich nebenan in ein <div> oder meinst Du die blaue Box und der graue Bereich unten drunter?
Wie müsste das Deiner Meinung nach aussehen? Codefragment? :-)
Vorerst danke für die Hinweise. Werde mich jetzt mal übers Wochenende eingehend damit beschäftigen. Bin aber zuversichtlich, dass es klappen wird. :-)
Ob jetzt Tabelle oder CSS ist mir erstmal egal.
Mit Tabelle dürfte das weitaus komplizierter umzusetzen sein.Wie gesagt, der Screenshot zeigt die Tabellenversion. Er zeigt aber auch auch mein Problem damit. ;-)
Viele Grüße,
Tobias-
Hi,
Kannst Du mir den Absatz nochmals genauer erklären?
den gesamten Text, den Du gequotet hast? Ich denke nicht, oder?
Soll die blaue Box und der Contentbereich nebenan in ein <div>
Ja.
Wie müsste das Deiner Meinung nach aussehen? Codefragment? :-)
Nunja, ausnahmsweise... für diesen Teil:
<div style="position:relative;">
<p style="float:left; width:10em; background:blue;"> (oder position:abolute;top:0;left:0;)
blaue Box</p>
<address style="position:absolute; left:0; bottom:0; width:10em;">
Infos</address>
<div style="margin-left:10em; background:white;">
Inhaltsbereich</div>
</div>Wobei ich die blaue Box, falls es sich um eine Linkliste handelt, als ul auszeichnen würde.
freundliche Grüße
Ingo-
Wie müsste das Deiner Meinung nach aussehen? Codefragment? :-)
Nunja, ausnahmsweise... für diesen Teil:[snip]
Da lag ich, garnicht so falsch mit meinem Ansatz. Danke für die Tipps. Hat mir sehr geholfen.
Viele Grüße,
Tobias :-)
-
-
-