nicht angemeldet
Tabelle mit Zelle auffüllen
Hallo!
Ich habe eine Tabelle, die in etwa folgende Struktur hat:
Füllerzelle g text g
---------------------------------------------
| | | | |
---------------------------------------------
Die gesamte Tabelle hat eine feste vorgegebene Breite. Die beiden kleinen Spalten (mit g beschriftet) sind in CSS auf 4 Pixel Breite eingestellt und haben eine Hintergrundgrafik. Dazwischen ist ein Spalte mit einem Text. Die linke große Spalte soll den Rest der Tabelle auffüllen und zwar so, dass die Textspalte und die beiden Grafiken die minimale Breite bekommen, die sie benötigen um dargestellt zu werden. Mein erster Versuch war, der Füllerzelle eine breite von 100% zu geben, aber dadurch verschwinden die beiden Grafikspalten. Der Text in der Textspalte ist ein veränderlicher Titel, sodass ich auch keine feste Breite für diesen einstellen kann. Wie kann ich das gewünschte Verhalten erreichen?
-
Hi!
Wie hast du den die Textspalte formatiert? Gib ihr doch mal eine Breite und Overflow.
Gibt es einen Grund eine Tabelle fuer Layout zu missbrauchen?
-
Ich mag tabellen eigentlich sehr gerne zum Layouten... Aber das Problem ist weniger die Textspalte, die bleibt ja aufgrund ihres Inhaltes schon breit, aber die beiden Spalten daneben mit der Hintegrundgrafik haben keinen Inhalt und behalten daher nicht ihre Mindestgröße bei, wenn ich der Füllerspalte zu viel Breite gebe.
-
Ich mag tabellen eigentlich sehr gerne zum Layouten...
Wofuer sie aber nicht gedacht sind. Aber gut, ich werd keinen zwingen etwas auf (m)eine bestimmte Art zu machen.
Was hast du denn nun fuer Angeben bezueglich der Tabelle gemacht? wie ist der Spass formatiert? Tabellenbreite? Zellenbreite? Warum behalten die Zellen nicht ihre Mindestgroesse? Welche Angaben hast du gemacht? hast du beruecksichtigt dass der IE eventuell probleme mit min-width hat? Einen CSS Hack versucht?
-
Entschuldigung, dass ich so lange nicht geantwortet habe.
Also ich habe bislang nur min-width und width im CSS gesetzt und beides hat weder im IE, noch im FF eine Auswirkung gezeigt... meine momentane Lösung ist es, die beiden kleinen Spalten nicht mehr mit einer Hintergrundgrafik zu belegen, sondern die Grafik da per HTML reinzusetzen. Dann kann die Spalte auch nicht mehr kleiner werden und es funktioniert, wär aber dennoch interessant, wie man es sonst gemacht hätte.
Mfg, Andreas!
-
Habe leider gerade festgestellt, dass die Lösung nur im FF funktioniert. Der IE interpretiert die 'width: 100%'-Angabe leider so, dass nicht der restliche freie Bereich aufgefüllt wird, sondern die Breite des Füllers auf die volle Breite der Tabelle gesetzt wird und somit die Tabelle breiter wird, als sie soll. Gibt es dafür eine Lösung?
Ich habe mittlerweile auch versucht, das mit div-Elementen hinzubekommen, aber auch da bekomme ich keinen Füller hin.
Der CSS-Code dazu:
div.tableft { height: 20px; width: 4px; padding: 0px; display: inline; float:left;}
div.tabmid { cursor: pointer; height: 20px; padding: 0px; background-image: url(tabback.png); font-family: Verdana,Tahoma,sans-serif; font-size: 8pt; font-weight: bold; color: #ffffff; text-align: center; display: inline; float:left;}
div.tabright { height: 20px; width: 4px; padding: 0px; display: inline; float:left;}
div.tabfill { height: 19px; width: 100%; padding: 0px; display: inline; float:left; border-width: 0px 0px 1px 0px; border-style: solid; border-color: #505050;}
div.outer { border-width: 1px; border-style: dotted; border-color: #000000; overflow: hidden; }Zusammen mit diesem HTML-Code:
<div class="outer" style="width: 300px;">
<div class="tableft"><img src="gfx/<?php echo $layout;?>/tableft.png" width="4" height="20" border="0" alt=""></div>
<div class="tabmid">Titel des Tabs</div>
<div class="tabright"><img src="gfx/<?php echo $layout;?>/tabright.png" width="4" height="20" border="0" alt=""></div>
<div class="tabfill"></div>
<div style="clear:both"></div>
</div>-
Eigentlich ganz einfach.
Du nimmst einen Container. Den befuellst du mit 3 Spalten also 3 Elementen die deinen Zwecken entsprechen. (hier kann man wohl 3 Divs nehmen).
Du ziehst den Container auf die gewuenschte Breite. Dann ziehst du das erste und 3 Element auf die gewuenschte Breite und befuellst sie mit Hintergrundgrafik. (Oder wie du gepostet hast: baust eine Grafik per HTML ein) Jetzt floatest Du die 3 Container rechts. Sie vertauschen dabei ihre Reihenfolge, das solltest Du beachten, wenn die beiden Raender unterschiedliche Grafiken enthalten sollen.
Naja. Das Ergebnis sollte sein: ein Container der links soviel Freiraum enthaelt, wie 2 feste Spalten und das Element dazwischen uebrig lassen.
Genauso sollte aber auch eine Tabelle funktionieren. Tabelle 100px breit, Spalte ohne Angaben, Spalte mit 10px, Spalte mit Inhalt von 30px, spalte mit 10px. > linke Spalte 50px breit.
-
-
-
-
-