Tabellen verschieben sich, Wieso?!

Zied · Anmeldungsdatum: 09.04.2005 Beiträge: 22

Hi ich hab ein Problem!

In Photoshop hab ich mir jetzt eine HPVorlage gemacht.
Jedoch verschieben sich immer Tabellen wenn ich meine Content Box erweitere
(also wenn ich sie vergrößern will):

der Quelltext:

<HTML>
<HEAD>
<TITLE>hp1slicedbilder</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<TABLE WIDTH=1200 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=24>
<IMG SRC="Bilder/index_01.jpg" WIDTH=1200 HEIGHT=28 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=22>
<IMG SRC="Bilder/index_02.jpg" WIDTH=57 HEIGHT=977 ALT=""></TD>
<TD COLSPAN=7>
<IMG SRC="Bilder/index_03.jpg" WIDTH=198 HEIGHT=140 ALT=""></TD>
<TD COLSPAN=4>
<IMG SRC="Bilder/index_04.jpg" WIDTH=170 HEIGHT=140 ALT=""></TD>
<TD COLSPAN=12 ROWSPAN=2>
<IMG SRC="Bilder/index_05.jpg" WIDTH=775 HEIGHT=152 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=140 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=11 ROWSPAN=5>
<IMG SRC="Bilder/index_06.jpg" WIDTH=368 HEIGHT=103 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=12 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=12>
<IMG SRC="Bilder/index_07.jpg" WIDTH=775 HEIGHT=24 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=24 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=20>
<IMG SRC="Bilder/index_08.jpg" WIDTH=53 HEIGHT=1396 ALT=""></TD>
<TD ROWSPAN=20>
<IMG SRC="Bilder/index_09.jpg" WIDTH=56 HEIGHT=1396 ALT=""></TD>

<TD ROWSPAN=2>
<IMG SRC="Bilder/index_10.jpg" WIDTH=33 HEIGHT=54 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="Bilder/index_11.jpg" WIDTH=114 HEIGHT=54 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="Bilder/index_12.jpg" WIDTH=22 HEIGHT=54 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_13.jpg" WIDTH=114 HEIGHT=41 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="Bilder/index_14.jpg" WIDTH=22 HEIGHT=54 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_15.jpg" WIDTH=114 HEIGHT=41 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="Bilder/index_16.jpg" WIDTH=22 HEIGHT=54 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_17.jpg" WIDTH=114 HEIGHT=41 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="Bilder/index_18.jpg" WIDTH=30 HEIGHT=54 ALT=""></TD>
<TD ROWSPAN=20>
<IMG SRC="Bilder/index_19.jpg" WIDTH=81 HEIGHT=1396 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=41 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/index_20.jpg" WIDTH=114 HEIGHT=13 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_21.jpg" WIDTH=114 HEIGHT=13 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_22.jpg" WIDTH=114 HEIGHT=13 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=13 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="Bilder/index_23.jpg" WIDTH=33 HEIGHT=93 ALT=""></TD>

<TD COLSPAN=7 ROWSPAN=2>hier diese Stelle will ich erweitern verzieht aber alles wenn ich enter drücke </TD>
<TD ROWSPAN=2>
<IMG SRC="Bilder/index_25.jpg" WIDTH=30 HEIGHT=93 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=13 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=11 ROWSPAN=3>
<IMG SRC="Bilder/index_26.jpg" WIDTH=368 HEIGHT=140 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=80 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/index_27.jpg" WIDTH=33 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=7>
<IMG SRC="Bilder/index_28.jpg" WIDTH=522 HEIGHT=45 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_29.jpg" WIDTH=30 HEIGHT=45 ALT=""></TD>

<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=45 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=9 ROWSPAN=15>
<IMG SRC="Bilder/index_30.jpg" WIDTH=585 HEIGHT=1204 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=15 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=5>
<IMG SRC="Bilder/index_31.jpg" WIDTH=27 HEIGHT=213 ALT=""></TD>
<TD COLSPAN=10>
<IMG SRC="Bilder/index_32.jpg" WIDTH=341 HEIGHT=14 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="Bilder/index_33.jpg" WIDTH=29 HEIGHT=29 ALT=""></TD>
<TD COLSPAN=6>
<IMG SRC="Bilder/index_34.jpg" WIDTH=199 HEIGHT=29 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="Bilder/index_35.jpg" WIDTH=113 HEIGHT=29 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=29 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="Bilder/index_36.jpg" WIDTH=29 HEIGHT=28 ALT=""></TD>
<TD COLSPAN=6>
<IMG SRC="Bilder/index_37.jpg" WIDTH=199 HEIGHT=28 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_38.jpg" WIDTH=28 HEIGHT=28 ALT=""></TD>
<TD ROWSPAN=3>
<IMG SRC="Bilder/index_39.jpg" WIDTH=85 HEIGHT=170 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="Bilder/index_40.jpg" WIDTH=29 HEIGHT=105 ALT=""></TD>
<TD COLSPAN=6>
<IMG SRC="Bilder/index_41.jpg" WIDTH=199 HEIGHT=105 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_42.jpg" WIDTH=28 HEIGHT=105 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=105 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2>
<IMG SRC="Bilder/index_43.jpg" WIDTH=29 HEIGHT=37 ALT=""></TD>
<TD COLSPAN=6>
<IMG SRC="Bilder/index_44.jpg" WIDTH=199 HEIGHT=37 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_45.jpg" WIDTH=28 HEIGHT=37 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=37 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=11>
<IMG SRC="Bilder/index_46.jpg" WIDTH=368 HEIGHT=27 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=27 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=7>
<IMG SRC="Bilder/index_47.jpg" WIDTH=27 HEIGHT=354 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_48.jpg" WIDTH=25 HEIGHT=24 ALT=""></TD>
<TD COLSPAN=3>
<IMG SRC="Bilder/index_49.jpg" WIDTH=92 HEIGHT=24 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_50.jpg" WIDTH=26 HEIGHT=24 ALT=""></TD>
<TD COLSPAN=5 ROWSPAN=4>
<IMG SRC="Bilder/index_51.jpg" WIDTH=198 HEIGHT=171 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=24 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/index_52.jpg" WIDTH=25 HEIGHT=94 ALT=""></TD>
<TD COLSPAN=4>
<IMG SRC="Bilder/index_53.jpg" WIDTH=118 HEIGHT=94 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=94 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/index_54.jpg" WIDTH=25 HEIGHT=25 ALT=""></TD>
<TD COLSPAN=3>
<IMG SRC="Bilder/index_55.jpg" WIDTH=92 HEIGHT=25 ALT=""></TD>
<TD>
<IMG SRC="Bilder/index_56.jpg" WIDTH=26 HEIGHT=25 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=25 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5>
<IMG SRC="Bilder/index_57.jpg" WIDTH=143 HEIGHT=28 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=28 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC="Bilder/index_58.jpg" WIDTH=36 HEIGHT=37 ALT=""></TD>
<TD COLSPAN=4>
<IMG SRC="Bilder/index_59.jpg" WIDTH=175 HEIGHT=37 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="Bilder/index_60.jpg" WIDTH=45 HEIGHT=37 ALT=""></TD>
<TD ROWSPAN=3>
<IMG SRC="Bilder/index_61.jpg" WIDTH=85 HEIGHT=183 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=37 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC="Bilder/index_62.jpg" WIDTH=36 HEIGHT=94 ALT=""></TD>
<TD COLSPAN=4>
<IMG SRC="Bilder/index_63.jpg" WIDTH=175 HEIGHT=94 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="Bilder/index_64.jpg" WIDTH=45 HEIGHT=94 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=94 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC="Bilder/index_65.jpg" WIDTH=36 HEIGHT=52 ALT=""></TD>
<TD COLSPAN=4>
<IMG SRC="Bilder/index_66.jpg" WIDTH=175 HEIGHT=52 ALT=""></TD>
<TD COLSPAN=2>
<IMG SRC="Bilder/index_67.jpg" WIDTH=45 HEIGHT=52 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=52 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=12>
<IMG SRC="Bilder/index_68.jpg" WIDTH=425 HEIGHT=595 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=595 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=57 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=27 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=25 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=81 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=26 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=28 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=40 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=28 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=85 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=53 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=56 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=33 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=114 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=22 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=114 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=22 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=114 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=22 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=114 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=30 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Bilder/spacer.gif" WIDTH=81 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>

</BODY>
</HTML>

SOOOOOOOOOO zieht euch das mal bitte in Frontpage (dreamwaver)...

Und drückt jetzt einfach mal nur 2x enter in der Content box (da wo keine Bilder sind(mitte)) [es ist gekennzeichnet].

Ich kann fast alles hochziehen (mit valign="top") jedoch geht das an einigen stellen nicht... könnt ihr mir sagen wieso?

MFG Zied

Crotaphytus · Anmeldungsdatum: 08.05.2005 Beiträge: 213

Also, zunächst mal: Ich kann das Problem nicht nachvollziehen, bei mir verzieht sich da nix, so weit ich das überblicken konnte.

Aber mal eine Vermutung, warum das passieren könnte (kann mir nämlich absolut vorstellen, dass das passieren kann): Weil der Code, den PS da ausgespuckt hat, absolut wiederlich ist. Alles, was Recht ist, aber so ein komplexes Layout kann man doch nicht einfach in eine Riesentabelle packen. Außerdem ist die Verwendung von transparenten GIFs als Platzhalter auch alles andere als schön...
Wenn du etwas Ahnung von HTML hast, dann würd ich dir empfehlen das Layout selbst zu machen. Anstatt einer Tabelle, die mit tausenden rowspans und colspans vergewaltigt wird solltest du lieber n bisschen was ineinander verschachteln, und den Abstand kann man auch sehr schön mit CSS festlegen.

Zied · Anmeldungsdatum: 09.04.2005 Beiträge: 22

du hsást recht^^

Ich habe schon sehr lange mit html gearbeitet und kann das auch sehr gut^^

(ich hasse bloß die wiederliche Arbeit!)

Was sind eigentlich colspans...usw nie davon gehört!

css kann ich auch prima!

Crotaphytus · Anmeldungsdatum: 08.05.2005 Beiträge: 213

colspan und rowspan machen in etwa das, was du in Excel mit "Zellen zusammenfügen" machen kannst.

Zied · Anmeldungsdatum: 09.04.2005 Beiträge: 22

Welche Eigenschaften der Tabellen soll ich den Verändern Tr Td?

und was genau davon (margin, Padding)??

Damit das ganze einheitlich aussihet!?

MFG Zied

Crotaphytus · Anmeldungsdatum: 08.05.2005 Beiträge: 213

Hm... Ich würd mal sagen, ausprobieren... Augenzwinkern

Nachdem ich deine Bilder nicht hab kann ich nur raten, wie das am Ende mal aussehen soll... Prinzipiell würd ich aber erst mal eine Tabelle machen, die die größten Bereiche voneinander abtrennt. Dürften wohl so ungefähr 6 Zellen werden, wobei in eine dann der Text reinkommt. In die anderen Zellen darf dann das Layout rein, wobei da dann eventuell wiederum in ne Tabelle geschaufelt wird. Wie die einzelnen Abstände geregelt sind kommt eben auf das Layout an.

Es müsste sich da aber auch einiges mit absolut positionierten Elementen machen lassen. Zumindest das ganze Layout über dem Text dürfte sich so relativ einfach realisieren lassen.

Zied · Anmeldungsdatum: 09.04.2005 Beiträge: 22

Yipi ich happs rausgefunten!

Georg · Administrator Anmeldungsdatum: 15.02.2005 Beiträge: 57 Wohnort: Aachen

Hi,

dann teil uns doch bitte eben mit, wo der Trick verborgen war smile

Zied · Anmeldungsdatum: 09.04.2005 Beiträge: 22

cellspacing="0" cellpadding="0" und der Abstand = 0

hätte jetzt noch ne Frage:

die Folgende Tabelle wird größer wenn man kein enter drückt (sie zieht sich mit dem Text in die Länge)

wie kann ich das verhinder ????

kann ich irgendwass mit css machen Position absolute oder so?

<table width="81%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="top" align="center">
<td rowspan=2> <img src="Bilder/index_09.jpg" width=33 height=54 alt=""></td>
<td> <img src="Bilder/index_10.jpg" width=114 height=41 alt=""></td>
<td rowspan=2> <img src="Bilder/index_11.jpg" width=22 height=54 alt=""></td>
<td> <img src="Bilder/index_12.jpg" width=114 height=41 alt=""></td>
<td rowspan=2> <img src="Bilder/index_13.jpg" width=22 height=54 alt=""></td>
<td> <img src="Bilder/index_14.jpg" width=114 height=41 alt=""></td>
<td rowspan=2> <img src="Bilder/index_15.jpg" width=22 height=54 alt=""></td>
<td> <img src="Bilder/index_16.jpg" width=114 height=41 alt=""></td>
<td rowspan=2> <img src="Bilder/index_17.jpg" width=30 height=54 alt=""></td>
</tr>
<tr>
<td> <img src="Bilder/index_19.jpg" width=114 height=13 alt=""></td>
<td> <img src="Bilder/index_20.jpg" width=114 height=13 alt=""></td>
<td> <img src="Bilder/index_21.jpg" width=114 height=13 alt=""></td>
<td> <img src="Bilder/index_22.jpg" width=114 height=13 alt=""></td>
</tr>
<tr>
<td background="Bilder/index_23.jpg" width=33> <img src="Bilder/spacer.gif" width=1 height=100% alt=""></td>
<div id="layer3">
<td colspan=7 bgcolor="#dadada" width="800">
<p> </p></td></div>
<td background="Bilder/index_25.jpg" width=30> <img src="Bilder/spacer.gif" width=1 height=100% alt=""></td>
</tr>
<tr>
<td> <img src="Bilder/index_26.jpg" width=33 height=45 alt=""></td>
<td colspan=7> <img src="Bilder/index_27.jpg" width=522 height=45 alt=""></td>
<td> <img src="Bilder/index_28.jpg" width=30 height=45 alt=""></td>
</tr>
</table>

Crotaphytus · Anmeldungsdatum: 08.05.2005 Beiträge: 213

Probier mal table-layout:fixed;

Allerdings kanns dann sein, dass du die Breitenangabe auch in CSS machen musst und nicht als Attribut im table-Tag.