DIV gleiche Höhe in jeder Zelle

freezly

Hallo Community,

ich habe eine Tabelle in der pro Zelle ein div Container (für einen Rahmen) drin ist. Jede Zelle hat unterschiedlich viel Inhalt. Nun sind deswegen die DIVs unterschiedlich hoch. Ich habe es bereits mit height: 100% versucht. Klappt aber nicht. Was mache ich verkehrt?

Hier mal mein gekürztes Beispiel, was das Problem recht gut zeigt:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">    <head>        <style type="text/css">        <!--
        .container {            outline-width: thin;            outline-color: #CCCCCC;            outline-style: solid;                        margin: 10px;            padding: 10px;            height: 100%;            border-top-left-radius: 3px;            border-top-right-radius: 3px;            border-bottom-right-radius: 3px;            border-bottom-left-radius: 3px;        }                td{            vertical-align: top;            width: 200px;        }        -->        </style>    </head>    <body>            <table>            <tbody>                <tr>                    <td>                        <div class="container">TEXT</div>                    </td>                    <td>                        <div class="container">TEXT <br /> TEXT <br /></div>                    </td>                    <td>                        <div class="container">TEXT <br /> TEXT <br />TEXT <br /> TEXT <br />TEXT <br /> TEXT <br /></div>                    </td>                </tr>            </tbody>        </table>    </body></html>

Bandit

Ein Problem, dass in jedem Forum schon 'zig mal besprochen wurde und auch mit google findet man Infos!

Siehe http://www.ohne-css.gehts-gar.net/0005.php

freezly

Hier noch mal besser lesbar:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
		<!--


		.container {
			outline-width: thin;
			outline-color: #CCCCCC;
			outline-style: solid;

			margin: 10px;
			padding: 10px;
			height: 100%;
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			border-bottom-left-radius: 3px;
		}

		td{
			vertical-align: top;
			width: 200px;
		}
		-->
		</style>
	</head>
	<body>	
		<table>
			<tbody>
				<tr>
					<td>
						<div class="container">TEXT</div>
					</td>
					<td>
						<div class="container">TEXT <br /> TEXT <br /></div>
					</td>
					<td>
						<div class="container">TEXT <br /> TEXT <br />TEXT <br /> TEXT <br />TEXT <br /> TEXT <br /></div>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Alles anzeigen

Bandit

Igittigitt!! Tabellen-Layout ist absolut out. Beachten den Link, den ich vorhin gepostet habe.

freezly

Danke für die schnelle Antwort.

wenn ich es richtig verstehe soll ich ein Wrapper DIV verwenden. Das funktioniert aber für mein Beispiel nicht. Ich habe immerhin einige tr und td zwischen den einzelnen DIVs. Wie soll ich das Beispiel dafür hernehmen?

Leider kann ich auch nicht die Rahmen der Tabelle nehmen, da diese dynamisch befüllt wird und wenn in einer Zelle kein Inhalt ist, soll natürlich auch kein Rahmen zu erkennen sein.

- - - Aktualisiert - - -

Zitat von Bandit

Igittigitt!! Tabellen-Layout ist absolut out. Beachten den Link, den ich vorhin gepostet habe.

Jetzt mal langsam! Das ist nur ein Beispiel für meine Datentabelle und kein Layout für eine Seite. Wollte ja niemanden mit dem kompletten html Code der Seite erschlagen.

MrMurphy

Hallo,

so wie du es dir verstellst funktioniert es nicht. Durch die Zellen werden die DIVs getrennt und können nicht mehr aufeinander reagieren, was aber bei HTML/CSS auch überhaupt nicht vorgesehen ist. Die Faux Columns sind auch nur ein Notlösung, die in der Praxis vollkommen unnötig sind, die Benutzer genau Null interessiert und nur dem Webseitenersteller wichtig ist.

Ich habe die Vermutung, du steckst gedanklich in einer Sackgasse, kannst dich nicht mehr bewegen, nimmst aber auch keine Hilfe an, um ein kurzes Stück zurückzukommen um dann auf einem anderen Weg im Endeffekt schneller zum Ziel zu gelangen.

Von daher wäre es sinnvoller, wenn du mal einen Link zu einer Beispielseite oder eine genauere Beschreibung deines Vorhabens posten würdest. Aus deinen Angaben ist zur Zeit wirklich nur zu entnehmen, das du die Tabellen zum Layouten mißbrauchst, auch wenn du dir dafür (wie viele Andere auch) eine sinnfreie Ausrede ausdenkst. Auch für Teile einer Seite dürfen Tabellen nicht zum Layouten herhalten. Das ist zum einen sachlich schlicht falsch und erschwert im Endeffekt wie bei dir die Umsetzung des eigentlichen Vorhabens.

Gruss

MrMurphy

freezly

Also mal ganz ehrlich. Sieht das Beispiel wie ein Layout aus? Linksbündig. Genau drei Spalten mit 200px Breite. Es ist eine Datentabelle! In der 2. Zeile wiederholen sich die DIVs. 3. Zeile wieder usw.

Ich bin auch offen für andere Komponenten oder auch für Workarounds. Nur um die Tabelle komme ich nicht herum ... es ist ein DataGrid von Primefaces http://www.primefaces.org/showcase/ui/datagrid.jsf ... ich hoffe damit sind auch die letzten Zweifler überzeugt, dass der Einsatz der Tabelle richtig ist.

- - - Aktualisiert - - -

Zitat von MrMurphy

Ich habe die Vermutung, du steckst gedanklich in einer Sackgasse, kannst dich nicht mehr bewegen, nimmst aber auch keine Hilfe an, um ein kurzes Stück zurückzukommen um dann auf einem anderen Weg im Endeffekt schneller zum Ziel zu gelangen.

Klar stecke ich in ner Sackgasse. Ich nehme jede Hilfe an, nur die "Faux Columns" sind keine Alternative und ein Layout ist es auch nicht.

MrMurphy

Hallo,

Zitat

Nur um die Tabelle komme ich nicht herum ... es ist ein DataGrid von Primefaces http://www.primefaces.org/showcase/ui/datagrid.jsf ... ich hoffe damit sind auch die letzten Zweifler überzeugt, dass der Einsatz der Tabelle richtig ist.

Nö, auf der Beispielseite wurde eine Tabelle zum Layout mißbraucht. Von den Inhalten einer Tabelle ist auf der Seite weit und breit nichts zu sehen.

Das ist genau das was ich beschrieben habe. Um doch Tabellen zum Layouten mißbrauchen zu können werden einfach alle irgendwie senk- und waagerecht angeordneten Inhalte zur Tabelle erklärt. Das bringt nur nichts - das ist sachlich keine Tabelle, auch wenn du es dir noch so sehr wüschst.

Und da

Zitat

Ich nehme jede Hilfe an,

widersprichst du dir selbst in nur einem Satz

Zitat

nur die "Faux Columns" sind keine Alternative und ein Layout ist es auch nicht.

Gruss

MrMurphy

Bandit

Crosspostings sind unerwünscht, daher: *closed*
<edit>
Crossposting wurde verständlich begründet, daher wieder offen.
</edit>

freezly

Danke fürs öffnen.

Zitat von MrMurphy

widersprichst du dir selbst in nur einem Satz

Das kann ich erklären: Die "Faux Columns" basieren darauf, dass eine Grafik in einem Wrapper DIV gelegt wird. Nun habe ich hier aber den Fall, dass ich auch 10 Zeilen haben kann und jede Zeile eine andere Höhe haben könnte (Mein Beispiel oben hat nur eine Zeile damit es einfach bleibt). Sind ja immerhin dynamische Daten ... wer weiß denn ob in dem einen 10 Zeichen und in dem anderen 1000 Zeichen stehen (mal überspitzt ausgedrückt). Die "Faux Columns" scheinen mir tatsächlich zu einem Layout Problem zu passen ... aber eben nicht zu den Daten, die ich darstellen möchte.

Sei es drum. Was sind die Alternativen zu der Tabelle? Wie bekomme ich es mit anderen Komponenten hin? Oder verstehe ich die faux columns falsch?

styleshiet

Wenn ich es richtig verstanden habe lässt sich dein Problem wie folgt lösen:

Code

.tr{display:table-row;}
.tc{display:table-cell;padding:10px;width:33%;}  /* padding und width optional */

HTML

<div class="tr">
  <div style="background:red;" class="tc">
    <span>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </span>
  </div>
  <div style="background:green;" class="tc">
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</span>
  </div>  
  <div style="background:blue;" class="tc">
    <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
  </div>
</div>

Alles anzeigen

So nehmen alle drei Container die gleiche Höhe ein.

freezly

Danke für den Tipp. Funktioniert super. Die Display Einstellungen waren mir neu.

noch eine Frage dazu:

HTML

.tc{				display:table-cell;				padding:10px;				width:200px;				margin:10px;				border: 1px solid;			}  /* padding und width optional */

Wieso bekomme ich keinen Abstand zwischen den div.tc?

- - - Aktualisiert - - -

OT: ist es normal, dass das Forum im geposteten HTML Quellcode die Zeilenumbrüche schluckt? Oder mache ich was verkehrt?

freezly

OK, das Problem habe ich nun nach intensiver Recherche gefunden. Es fehlte in dem Beispiel noch ein div um das ganze mit "display:table; border-spacing:10px;". Margin hat keine Auswirkung auf divs mit "display:table-cell". Auch auf divs mit "display:table-row" hat das border-spacing keine Auswirkung. Es muss "display:table; border-spacing:10px;" sein.

Hier der komplette Quellcode:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">    <head>        <style type="text/css">        <!--            .table{display:table; border-spacing:10px;}            .tr{display:table-row;}            .tc{                position: relative;                display:table-cell;                padding:10px;                padding-bottom:30px;                width:200px;                border-collapse: separate;                border: 1px solid;            }  /* padding und width optional */                        div.tc span.unten{                position:absolute;                bottom:5px;                left:10px;                display:block;            }            -->                </style>    </head>        <body>             <div class="table">            <div class="tr">                <div style="background:red;" class="tc">                    <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>                    <span class="unten">unten</span>                </div>                <div style="background:green;" class="tc">                    <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</span>                    <span class="unten">unten</span>                </div>                  <div style="background:blue;" class="tc">                    <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>                    <span class="unten">unten</span>                </div>            </div>                         <div class="tr">                <div style="background:red;" class="tc">                    <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>                    <span class="unten">unten</span>                </div>                <div style="background:green;" class="tc">                    <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</span>                    <span class="unten">unten</span>                </div>                  <div style="background:blue;" class="tc">                    <span class="oben">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>                    <span class="unten">unten</span>                </div>            </div>         </div>    </body></html>

djheke

Wenns eine Tabelle sein soll(muss), dann vielleicht so.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--

td { 
 border:1px solid #000;
 border-radius: 5px;
 vertical-align:top;
 width: 200px;
}


-->
</style>
</head>
<body>    
<table cellspacing="10" cellpadding="10">
<tbody>
<tr>
<td>TEXT</td>
<td>TEXT <br /> TEXT <br /></td>
<td>TEXT <br /> TEXT <br />TEXT <br /> TEXT <br />TEXT <br /> TEXT <br /></td>
</tr>
</tbody>
</table>
</body>
</html>

Alles anzeigen

Alle td gleich hoch mit Absstand 10px

freezly

Zitat von djheke

Wenns eine Tabelle sein soll(muss), dann vielleicht so.

Ja, der Gedanke ist mir auch gekommen. Allerdings war das etwas problematisch, wenn in der rechten unteren Zelle der Tabelle kein Inhalt ist, dass trotzdem der Rahmen angezeigt wurde. Das war dann nicht so schön.

Vielleicht mal eine grundsätzliche Frage dazu: Was ist der Vorteil der so angepriesenen DIVs an dieser Stelle? Von den Eigenschaften her scheinen mir die DIVs mit den display: table... Eigenschaften ja genauso zu funktionieren, wie die Tabelle. Und vom Code her scheine ich mir auch nichts zu sparen, wenn ich mir die Beispiele von djheke und styleshiet ansehe.

djheke

Dann dein td Selektorblock erweitern empty-cells:hide. Funktioniert im IE aber erst ab Version 8. Wenn es tabellarische Daten sind, dann nimm eine Tabelle. Wenn es wie eine Tabelle ausehen soll nimm display:table.

freezly

Danke

Das reicht dann schon, vielen Dank für die Beiträge ... hat mir sehr geholfen.

Tags