Tabellenlayout verschiebt sich plötzlich, warum ???

crucho

Hallo ihr Coder,

hab ein Problem mit einem Tabellenlayout. Dachte ich kenn mich mit Tabellen in HTML ganz gut aus, aber ich bin noch nie auf folgendes Phänomen gestossen:

Habe ein Layout mit Kopzeile ( über drei Spalten ),
dann darunter: Linke Spalte - Center - Rechte Spalte,
und Fusszeile ( über drei Spalten )

Jetzt hab ich in die Kopfzeile eine 2. Tabelle mit 3 Spalten gelegt. IS ja auch alles schön und gut, jedoch wenn ich in die mittlere Spalte ( Dort wo die cccccccccc oder aaaaaaaaaaa oder ddddddddddd stehen ) mehr reinschreibe ( ca. 5 Buchstaben mehr ), verbreitert sich der rechte und linke Bereich obwohl ihnen eine feste Breite zugeteilt worden ist !!!!

Den Code den ich poste ist mit korrekter Breite. Setzt also mal ein paar "cccccccc" mehr rein und schaut was passiert.
Bitte Bitte sagt mir wo das Problem liegt, bin am verzweifeln.

Code

<HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>So eine Scheiss Tabelle</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<LINK rel="stylesheet" type="text/css" href="style\style1.css"/>
</HEAD>
<BODY>


<table border="1" align="left" width="100%" cellspacing="0" cellpadding="0">


<tr><td colspan="3" height="130px" align="center"> 




<table border="0" align="center" width="100%" cellspacing="0" cellpadding="0">
<tr><td height="70px" width="171px" align="center">


ObenLinks1
</td><td height="70px" align="center">
ddddddddddddd
</td><td class="bgnavhead1" rowspan="3" width="170px" align="center">
ObenRechts
</td></tr><tr><td height="30px" width="171px" align="center">
ObenLinks2
</td><td class="bgnavhead2" height="30px" align="center">
aaaaaaaaaaaaa
</td></tr><tr><td class="bgnavhead2" height="30px" width="171px" align="center">
bbbbbbbbbbbbb
</td><td class="bgnavhead1" height="30px" align="center">




<nobr>ccccccccccccccccccccc</nobr>




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






</td></tr><tr><td class="bgnavright" height="450px" width="200px" align="center"> 


Links




</td><td height="450px" align="center"> 


<nobr>Center Bereich</nobr>




</td><td class="bgnavright" height="450px" width="170px" align="center"> 


Rechts




</td></tr><tr><td class="bgnavfoot" colspan="3" height="50px" align="center"> 


Fuss


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






</HTML>

Alles anzeigen

Gruß
crucho

PS: HAbe das auch im Selfhtml gepostet

crucho

Nochmal zur Info:

Bei mehreren "ccccccc" verdoppelt sich die Breite der "Linke Spalte" (dort wo "Links" drinne steht) und die Breite der "Rechte Spalte" (dort wo "Rechts" drinne steht).

Phänomen tritt im IE und Opera auf !!!!

crucho

Code

<HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>So eine Scheiss Tabelle</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<LINK rel="stylesheet" type="text/css" href="style\style1.css"/>
</HEAD>
<BODY>


<table border="1" align="left" width="100%" cellspacing="0" cellpadding="0">


<tr><td colspan="3" height="130px" align="center"> 




<table border="0" align="center" width="100%" cellspacing="0" cellpadding="0">
<tr><td height="70px" width="171px" align="center">
ObenLinks1
</td><td height="70px" align="center">
ddddddddddddd
</td><td class="bgnavhead1" rowspan="3" width="170px" align="center">
ObenRechts
</td></tr><tr><td height="30px" width="171px" align="center">
ObenLinks2
</td><td class="bgnavhead2" height="30px" align="center">
aaaaaaaaaaaaa
</td></tr><tr><td class="bgnavhead2" height="30px" width="171px" align="center">
bbbbbbbbbbbbb
</td><td class="bgnavhead1" height="30px" align="center">




<nobr>Schreib hier mehr rein...</nobr>




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






</td></tr><tr><td class="bgnavright" height="450px" width="200px" align="center"> 


...dieser Bereich verdoppelt sich dann




</td><td height="450px" align="center"> 


<nobr>Center Bereich</nobr>




</td><td class="bgnavright" height="450px" width="170px" align="center"> 


...auch dieser Bereich verdoppelt sich




</td></tr><tr><td class="bgnavfoot" colspan="3" height="50px" align="center"> 


Fuss


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






</HTML>

Alles anzeigen

Macht copy/paste in ein HTML dokument, schaut es euch an und macht das was in den Tabellenzellen steht.
Phänomen tritt nur im IE und Opera auf !!!!

MfG
Chris

LittlePeopleGirl79

Du verwendest für die Angabe der Breite 100%, dabei definierst du die Breite von Links und Rechts fest. Somit hast du einen Variablen Innenraum, der im IE aber so nicht bleibt! Er verändert in je nach Bedarf!
Wenn du Ihn fest einstellst, kannst du auch noch mehr cccccccc reinschreiben, das währe so das was mir aufgefallen ist!

Code

<table border="1" align="left" width="100%!!!!!!!!!!!!!!!!!!" cellspacing="0" cellpadding="0">
<tr>
	<td colspan="3" height="130" align="center">


		<table border="0" align="center" width="100%!!!!!!!!!!!!!!!!!" cellspacing="0" cellpadding="0">
		<tr>

			<td height="70" width="171" align="center">ObenLinks1</td>




			<td height="70" align="center">ddddddddddddd</td>




			<td class="bgnavhead1" rowspan="3" width="170px" align="center">ObenRechts</td>
		</tr>




		<tr>
			<td height="30" width="171" align="center">ObenLinks2</td>
			<td class="bgnavhead2" height="30" align="center">aaaaaaaaaaaaa</td>
		</tr>






		<tr>
			<td class="bgnavhead2" height="30" width="171" align="center">bbbbbbbbbbbbb</td>


			<td class="bgnavhead1" height="30" align="center"><nobr>ccccccccccccccccccccc</nobr></td>
		</tr>
		</table>
	</td>
</tr>


<tr>
	<td class="bgnavright" height="450" width="200" align="center">Links</td>


	<td height="450" align="center"   width?????????????????????><nobr>Center Bereich</nobr></td>


	<td class="bgnavright" height="450" width="170" align="center">Rechts</td>
</tr>


<tr>
	<td class="bgnavfoot" colspan="3" height="50" align="center">Fuss</td>
</tr>
</table>

Alles anzeigen

LittlePeopleGirl79

Achja, du kannst auch die Breiten variable lassen, dann geht es auch!

Code

<td class="bgnavright" height="450" width="20%" align="center">Links</td>


	<td height="450" align="center" width="63%"><nobr>Center Bereich</nobr></td>


	<td class="bgnavright" height="450" width="17%" align="center">Rechts</td>

crucho

Hi und danke für den Post,

jedoch habe ich der rechten und linken Spalte absichtlich eine feste Breite zugeordnet, da dort wiederum graphische TAbellen reinkommen, welche auch ihre Position innerhalb der Spalte nicht verändern dürfen. Sonst ist das ganze nicht mehr Pixelgenau.
Es soll also nur der Center Bereich Variabel sein, bzw. auch der Center Bereich der verschachtelten Tabelle ( Dort wo die "cccccc"/"Schreib mal mehr" drinne steht).

MfG
Chris

Ronald

Zitat von crucho

Hi und danke für den Post,

jedoch habe ich der rechten und linken Spalte absichtlich eine feste Breite zugeordnet, da dort wiederum graphische TAbellen reinkommen, welche auch ihre Position innerhalb der Spalte nicht verändern dürfen. Sonst ist das ganze nicht mehr Pixelgenau.
Es soll also nur der Center Bereich Variabel sein, bzw. auch der Center Bereich der verschachtelten Tabelle ( Dort wo die "cccccc"/"Schreib mal mehr" drinne steht).

MfG
Chris

Hi,

ich habe mir das Problem nicht angesehen, aber wenn an den Seiten ohnehin grafische Tabellen angzeigt werden sollen, dann setze die mittlere Spalte doch einfach auf 100% und blockier die erforderliche, Pixel in den Seitenzellen durch entsprechend große Grafiken.

Ist 'ne Notlösung, aber eine sichere

Ronald

crucho

Hi Ronald,

bin auf die Idee noch gar nicht gekommen. Würde es im Notfall auch so machen, denke ich. Wollte aber bei einem solch "billigen" Layout nicht gleich von Anfang an tricksen
Wär aber eine Möglichkeit --- Merci für den Denkanstoss

MfG
Chris

Tags