• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wiedermal Tabellen mit IE

Status
Für weitere Antworten geschlossen.
C

cakeil

Neues Mitglied
Hi!

Vermutlich ist so etwas schon oft gefragt worden, aber ich finde nix.
Sorry.

Ich brauche eine Tabelle die ungefähr so aussieht:

Code: 
*******************
*1                *
*******************
*2  *3            *
*****             *
*4  *             *
*****             *
*   *             *
*   *             *
*   *             *
*   *             *
*   *             *
*   *             *
*5  *             *
*******************
*6                *
*******************

Die Zellen 2 und 4 werden niemals höher als ihr Inhalt, selbst wenn in Zelle 3 sehr viel Text auftaucht. Mit Opera klappt das sofort.
Nach Einfügen von 'height: 1%' in die <td>'s der Zellen 2 und 4 klappt das auch mit Firefox und Mozilla. Nur IE macht daraus immer folgendes:

Code: 
*******************
*1                *
*******************
*2  *3            *
*   *             *
*   *             *
*****             *
*4  *             *
*   *             *
*   *             *
*****             *
*   *             *
*   *             *
*5  *             *
*******************
*6                *
*******************

Die Zellen 2 und 4 werden im IE leider immer vertikal gedehnt.

Hier eine starke eingedampfte Version des Quellcodes:
Code: 
<head>
</head>
<body>
<table border="1" width="200">
	<tr>
		<td colspan=2>
			1

		</td>
	</tr>
	<tr>
		<td style="vertical-align: top; width: 50px; height: 1%;">
			2

		</td>
		<td rowspan="3" style="vertical-align: top;">
			3

			viel text viel text viel text viel text 
			viel text viel text viel text viel text 
			viel text viel text viel text viel text 
			viel text viel text viel text viel text 
			viel text viel text viel text viel text 
		</td>
	</tr>
	<tr>
		<td style="vertical-align: top; height: 1%;">
			4

		</td>
	</tr>
	<tr>
		<td style="vertical-align: bottom;">
			5

		</td>
	</tr>	
	<tr>
		<td colspan="2">
			6

		</td>
	</tr>	
</table>
</body>

Wie muß ich die Zellen 2 und 4 formatieren damit der IE sie niemals größer macht als ihr Inhalt?

tach, cakeil
 
Werbung:
Für alle die ähnliche Probleme haben hier eine Lösung: Zwei verschachtelte Tabellen:

Code: 
*******************
*1                *
*******************
*****3            *
**2**             *
*****             *
**4**             *
*****             *
*****             *
*   *             *
*****             *
*   *             *
*   *             *
*5  *             *
*******************
*6                *
*******************

Die verschiebliche horizontale Zellengrenze zwischen der Zelle mit der zusätzlichen Tabelle und Zelle 5 macht in meinem Fall nix, da beide den selben Hintergrund haben und ohnehin 'border="0"' sein wird. Ich hoffe, man kann die Tabellen vor lauter '*' noch erkennen :-)

Hier der Quältext:

Code: 
<head>
</head>
<body>
<table border="1" style="width: 200">
	<tr>
		<td colspan=2>
			1

		</td>
	</tr>   
	<tr>    	  
		<td style="vertical-align: top; width: 50px; ">
			<table border="1" style="width: 50">  
	        		<tr>
	        			<td>
						2

					
					</td>
				<tr>
				</tr>
					<td style="vertical-align: bottom; ">
						4

					</td>
				</tr>
			</table>
		</td>
		<td rowspan="2" style="vertical-align: top; ">
			3

			viel text viel text viel text viel text 
			viel text viel text viel text viel text 
			viel text viel text viel text viel text 
			viel text viel text viel text viel text 
			viel text viel text viel text viel text 
		</td>
	</tr>
	<tr>
		<td style="vertical-align: bottom; width: 50px; ">
			5
 
		</td>
	</tr>	
	<tr>
		<td colspan="2">
			6

		</td>
	</tr>	
</table>
</body>

Ich bin weiterhin an eleganterem Code insb. von den CSS-Jüngern interessiert!
Zumal es bei mir jetzt erst richtig losgeht: Die Tabellenstruktur wird am Ende 11 Spalten und 9 Zeilen haben ...

tach, cakeil
 
uaa epileptischer anfall verschachtelte tabellen zum layout ich krieg einen zuviel... ;ugl

beispiel mit divs:
Code: 
<div id="rahmen">

<div id="header">
1
</div>

<div id="navi">
<div id="navi2">
2
</div>
<div id="navi4">
4
</div>
<div id="navi5">
5
</div>
</div>

<div id="content">
3
</div>

<div id="footer">
6
</div>

</div>

css code:
Code: 
#navi
{
float:left;
width:130px;
}

#content
{
margin-left:140px;
}

#footer
{
claer:both;
}

so das sind die wichtigsten sachen sollte funktionieren
 
Werbung:
Prophet schrieb:
uaa epileptischer anfall verschachtelte tabellen zum layout ich krieg einen zuviel... ;ugl
Zum Vergrößern anklicken....

Schön das du darauf anspringst. Meist bekommt man nur die Aussage 'nimm CSS' dann hast du es einfacher. Aber auch dein Besipiel erfüllt noch nicht ganz die Forderung: Zelle 5 soll nicht unter Zelle 4 hängen, sondern muß immer unmittelbar über Zelle 6 liegen, auch wenn Zelle 3 sehr groß wird.

Außerdem triffst du mit 'content' und 'navi' etwas verfrühte Annahmen. Soweit sind wir noch nicht.

Erweitern wir das Ganze noch ein bischen:
Code: 
***********************
*1a       *1b *1c *1d * 
*******************   * 
*2  *3            ***** 
*****             *7  *
*4  *             *****
*****             *8  *
*   *             *   *
*   *             *   *
*   *             *   *
*   *             *   *
*   *             *   *
*   *             *   *
*5  *             ***** 
*******************   *
*6a       *6b *6c *6d * 
***********************

1. Alle Zellen außer 3, 4, 5 und 8 müssen in ihrer Grösse pixelgenau festliegen. Imho sind dazu Angaben über ihre Größe im CSS-Teil notwendig, selbst wenn die Zellen Background-Gafiken haben die diese Größen erzwingen, obwohl die Grafiken diese Größenangaben ja schon mitbringen.

2. Die Zelle 3 dehnt sich sowohl horizontal als auch vertikal, Die Zellen 4, 5 und 8 dehnen sich in der vertikalen. Die Zellen 1b und 6b dehnen sich horizontal. Dadurch liegen die Zellen 1a, 1d, 6a und 6d exakt in den Ecken des Fensters.

Bitte beachten, die Zellen 4 und 7 liegen nicht auf der selben Höhe.

Also los CSS-Jünger. Bleibt ihr am Ball?

tach, cakeil
 
Prophet schrieb:
uaa epileptischer anfall verschachtelte tabellen zum layout ich krieg einen zuviel... ;ugl
Zum Vergrößern anklicken....
Du kriegst aber auch einen zuviel, wenn der IE mit deinen divs nicht zurecht kommt, ooooder?
Also nicht immer das perfekte Beispiel (auch @flapo).
 
Werbung:
Prophet schrieb:
das ist hier doch kein wunschkonzert... ich habe dir ein beispiel gelifert und du musst es weiterentwickeln...

als hilfestellung: http://prophet.argoedv.de/lay.jpg

sonst lernst du ja nichts...
Zum Vergrößern anklicken....

Schade das du schon aufgibst! Und sei dir sicher ich kaue das hier sehr ausführlich und intensiv durch, inkl. deines Postings und dutzender anderer Quellen.

Das Beispiel das du geliefert hast hätte man auch durch eine Tabelle mit 2*3 Zellen haben können. Und das imho sogar deutlich übersichtlicher als durch getrennte DIV's und CSS.

Also was ist los ihr CSS-Freaks, bringt Beweise dafür das CSS besser ist!

Ich bin sofort bereit diese vermaledeiten Tabellen komplett über Bord zu werfen wenn CSS denn Beweis antritt auch knifflige Probleme lösen zu können!

Leider verlangen Benutzer und das Marketing immer wieder Dinge die den HTML-Prinzipien diametral entgegen stehen und führen zu millionen von Seiten mit verschachtelten Tabellen und spacer.gif's.

Nüchterne Seiten wie z.B. selfhtml sie liefert werden von Marketing-Gurus und Usern meist garnicht gerne gesehen.

tach, cakeil
 
grundsätzlich sollte da ganze kein problem sein... das einzige was probleme macht sind die 100% höhe und bottom ausrichtung mancher felder. das es mit tabellen übersichtlicher ist bezweifele ich...
 
Werbung:
Prophet schrieb:
grundsätzlich sollte da ganze kein problem sein...
Zum Vergrößern anklicken....

Ja, wenn man sich den Designvorstellungen des W3C und Möglichkeiten der verschiedenen Browser unterwirft. Aber dann hätte ich diesen Thread garnicht erst angefangen.

Prophet schrieb:
das einzige was probleme macht sind die 100% höhe und bottom ausrichtung mancher felder.
Zum Vergrößern anklicken....

Eben! Darf ich hieraus jetzt schließen, dass die Bottom-Ausrichtung einer Zelle und die gleichzeitige Top-Ausrichtungen einer weiteren Zelle in einer umschließenden Zelle auch mit CSS nicht möglich ist? Eine klare Aussage hierzu und ich könnte ggf. aufhören zu suchen.

Prophet schrieb:
das es mit tabellen übersichtlicher ist bezweifele ich...
Zum Vergrößern anklicken....

An diesem Grabenkrieg möchte ich mich nicht beteiligen. Ich suche einfach nur Lösungen für meine Designprobleme. Der IE mit seiner 'eigenwilligen' Interpretation von Tabellen scheint mich zu ekelerregenden, monsterähnlichen Konstruktionen zu zwingen und ich hoffe mit CSS zu eleganteren Lösungen zu kommen. Aber bis jetzt ...

Lediglich Opera hat meine ursprüngliche Tabellenstruktur mit 'heigth' und 'width' Angaben, sowie einigen 'top' bzw. 'bottom' Angaben da wo sie logischer Weise notwendig waren auf Anhieb korrekt dargestellt.

tach, cakeil
 
Eine klare Aussage hierzu und ich könnte ggf. aufhören zu suchen.
Zum Vergrößern anklicken....

doch das ist möglich nur könnte es sein das sich diese felder später übereinander schieben wenn das fenster zu klein wird bzw. der inhalt zu groß...
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben