# Zellen verschieben sich! Alles hilft nichts!



## Toasti2000 (10. Januar 2005)

Sers Leute,

ich hab da ein riesiges Problem mit einer Homepage die ich gerade mache. Hoffe ihr könnt mir da helfen!

Hier erstmal der Code, danach mein Problem. Das ist der Teil des Codes, um den es letztendlich geht.


```
<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#F96B0E" width="99" height="15"><img src="../images/spacer_orange.gif" width="1" height="1" border="0" alt=""></td>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  <td width="133" bgcolor="#F6E2CC" height="50" valign="center">
  <a class="small">&nbsp;&nbsp;&nbsp;&nbsp;• </a><a href="index.php?page=start" class="navitop">Startseite</a><br>
  <a class="small">&nbsp;&nbsp;&nbsp;&nbsp;• </a><a href="index.php?page=beispiele" class="navitop">Beispiele</a><br>
  <a class="small">&nbsp;&nbsp;&nbsp;&nbsp;• </a><a href="index.php?page=planung" class="navitop">Planung</a></td>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  <td width="136" bgcolor="#F87D2D" height="50"></td>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  <td width="135" bgcolor="#F9741D" height="50"></td>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  <td width="136" bgcolor="#F96B0E" height="50"></td>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  <td bgcolor="#EF6205" width="10">&nbsp;</td>
 </tr>

 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#FFCC99" height="20">&nbsp;<a class="text">+</a> <a href="../index.php?page=home" class="navi">Startseite</a></td>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  <th colspan="7" rowspan="20" valign="top" align="left" bgcolor="#F6E2CC" width="543">

<table border="0" width="500" cellpadding="15">
 <tr>
  <td align="left">
```

// Hier steht später der Inhalt


```
</td>
 </tr>
</table>
  </th>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  <td bgcolor="#EF6205" width="10" rowspan="20">&nbsp;</td>
 </tr>
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#F96B0E" width="99" height="3"><img src="../images/spacer_orange.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#FFCC99" height="20">&nbsp;<a class="text">+</a> <a href="../index.php?page=about" class="navi">Über uns</a></td>
 </tr>
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#F96B0E" width="99" height="3"><img src="../images/spacer_orange.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#FFCC99" height="20">&nbsp;<a class="text">+</a> <a href="../index.php?page=referenzen" class="navi">Referenzen</a></td>
 </tr>
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#F96B0E" width="99" height="3"><img src="../images/spacer_orange.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#FFCC99" height="20">&nbsp;<a class="text">+</a> <a href="../index.php?page=kontakt" class="navi">Kontakt</a></td>
 </tr>
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#F96B0E" width="99" height="3"><img src="../images/spacer_orange.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#FFCC99" height="20">&nbsp;<a class="text">+</a> <a href="../index.php?page=impressum" class="navi">Impressum</a></td>
 </tr>
 <tr>
  <td><img src="../images/spacer.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
 <tr>
  <td bgcolor="#F96B0E" width="99" height="250"><img src="../images/spacer_orange.gif" width="1" height="1" border="0" alt=""></td>
 </tr>
</table>
```

Habe da also links eine Navigation und rechts den Inhalt der Page. Dabei zieht sich der Inhalt auf der rechten Seite über mehrere Zeilen der Navigation, bzw. der linken Spalte.

In der letzten Tabellen-Zeile seht ihr ja, dass ich hier eine feste Höhe angebe (height="250"). In Zukunft soll diese aber nicht festgelegt sein, da sich die Höhe nach dem Inhalt anpassen soll.

Wenn ich jetzt aber die Höhe nicht festlege, verbreitet sich die Navigation über die gesamte linke Spalte.

Hier mal ein Screenshot, wie es dann aussieht ohne feste Höhenangabe:






Und so sieht es aus mit fester Höhenangabe. So soll es eigentlich aussehen!





Aber wie bekomme ich das hin, dass ich keine feste Höhenangabe habe, aber es sich nicht verschiebt?

Ich hoffe ihr wisst was ich meine und helft mir

DANKE!


----------



## uwee (10. Januar 2005)

ich hoffe, ich stege da jetzt durch...
versuche mal ein bisschen mit den Werten von cellpadding und cellspacing zu arbeiten.


----------



## Toasti2000 (10. Januar 2005)

Hmm, glaube nicht das es daran liegt, trotzdem danke für den Tipp.

Es ist auch komisch, da dieses Problem im Firefox nicht auftritt.

Aber es liegt einfach daran, dass der mir die Navigation auf die komplette Höhe des Inhalts auseinander zieht.

Ihr seht in dem Bild wo es passt doch unter der Navigation den orangenen Balken der bis ans Ende der Page geht. Diese Höhe will ich nicht fest angeben, da der Balken immer so hoch sein soll die der Inhalt rechts.

Hmmm...


----------



## Toasti2000 (10. Januar 2005)

*Thread nach oben schieb*

Hat denn keiner eine Lösung für mich? Wäre echt wichtig!


----------



## x0x (10. Januar 2005)

Ich hab genau das gleiche Problem, siehe mein Thread. Bei mir zeigt der Firefox auch alles richtig an nur der IE spinnt rum. Eine Lösung wäre echt ein Segen!

edit:
woanderst sagte man mir ich solle das Menu einfach mit Listen machen, dann gäbe es das Problem nicht:
http://css.maxdesign.com.au/listamatic


----------



## Ultraflip (10. Januar 2005)

Ich würde es auch über ne Liste machen, aber naja ...

Gib dochmal den kompletten Quelltext, oder die Seite zum selber anschauen ...


----------



## Toasti2000 (10. Januar 2005)

Danke, das werde ich einmal ausprobieren!

Ansonsten melde ich mich natürlich wieder


----------



## Toasti2000 (11. Januar 2005)

Also ich hab das jetzt mal ganz normal mit ner liste probiert, aber dann sind die zellen vornherein schon höher, daher versteh ich net wie das Problem dann nicht mehr auftauchen soll.

Klärt mich bitte auf 

Hier einmal die Page zum draufschauen. Ihr müsst da auf Küche klicken, dann seht ihr schon was los ist. Beim Firefox gehts, beim IE nicht.

http://www.toastdesigns.de/lotter/

Login ist "tutorials" , Passwort ist "passwort".

Wie gesagt, schaut den ersten Post von mir an, dann wisst ihr wie es aussehen soll.

Danke!

Greetz,

Basti

EDIT: Komischerweise habe ich jetzt beim Firefox das gleiche Problem!


----------



## x0x (11. Januar 2005)

Hm hat es bei dir nun funktioniert, weil wenn ich auf deine Seite gehe, stimmt alles, auch beim IE! Wenn ja, wie hast du es hingekriegt?


----------



## Toasti2000 (11. Januar 2005)

Dann hast du bestimmt nicht auf "Küche" geklickt. 

Die Startseite geht da ich bei der, wie im Post beschrieben, eine feste Höhe angegeben habe. Nur beim Punkt Küche habe ich diese Höhe nicht angegeben und wenn du da drauf klickst siehst du was passiert.


----------



## x0x (11. Januar 2005)

Ja jetzt sehe ich es.
Ich denke das ist das gleiche Problem wie bei mir:
www.illusion-designs.de/projekte/ 

Aber es weiß einfach niemand eine Lösung, mich regt das voll auf!


----------



## Toasti2000 (11. Januar 2005)

Ja, wobei es bestimmt noch tausend andere gibt mir dem Problem.

Ich dreh bald durch wenn ich net bald ne Lösung habe  ;-]


----------



## hela (12. Januar 2005)

Hallo Toasti2000,

     die Fehlerursache liegt ganz offensichtlich im Tabellenaufbau.

Selfhtml: Aufbau einer Tabelle:


> Die Anzahl der Zellen sollte bei jeder Zeile gleich sein, so dass die Tabelle durchweg die gleiche Anzahl Spalten pro Zeile hat. In der ersten Zeile, die Sie definieren, legen Sie deshalb durch die Anzahl der dort definierten Zellen die Anzahl der Spalten Ihrer Tabelle fest.


 Deine Tabelle (siehe HTML-Code in deinem ersten Beitrag) hat in der ersten Zeile 1 Spalte, in der zweiten 11 (in Worten: elf) Spalten, in der dritten 1 Spalte usw. usf...


----------



## x0x (12. Januar 2005)

Ich sehe darin nicht das Problem, das er das ja mit row bzw colspan ausgleicht?!


----------



## hela (12. Januar 2005)

... dann zähl mal richtig nach!

 Erstaunlich was die Browser so durchgehen lassen, wenn die HTML-Datei keine Dokumenttyp-Deklaration hat.


----------



## x0x (12. Januar 2005)

könntest du bei 
http://www.illusion-designs.de/projekte/ 
auch mal nachschauen?

Wäre sehr nett, danke!


----------



## Toasti2000 (13. Januar 2005)

Sers hela,

danke für deine Hilfe! Habe auch schon etwas ausprobiert, aber es klappt net so ganz.

Wenn du mir jetzt noch die genaue Lösung verrätst wärs supi 

DANKE


----------



## hela (15. Januar 2005)

Hallo Toasti2000,

 ich habe mir deine "Küchenseite" runtergeladen, noch mal genauer angesehen und muss mich entschuldigen: Die Tabellenstruktur ist fehlerlos, offensichtlich habe ich mich verzählt.

 Es ist sicherlich so, dass das vertikale Menü durch die benachbarte Content-Zelle mit gestreckt wird, so dass man es entweder als separate Tabelle oder als Liste in einer einzelnen Tabellenzelle anlegen muss um diesen Effekt zu umgehen. Die Liste ist natürlich der bessere Weg, weil sich dadurch die Tabelle auch vereinfacht.

 Ausserdem würde sich bei konsequenter CSS-Anwendung das JavaScript erübrigen, da der Bildwechsel in der grafischen Navigation ebensogut über die hover-Pseudoklasse realisiert werden kann. Man muss nur die Bilder in den Hintergrund verlegen und muss dann aber das leere a-Element als Block mit der gleichen Größe wie die Bilder deklarieren.

 Ich habe beides mal an deiner "Küchenseite" ausprobiert und hänge es diesem Beitrag an. Vielleicht kannst du es so verwenden oder wenigstens als Vorlage nutzen.


----------



## Toasti2000 (15. Januar 2005)

Hallo hela,

ist ja echt fett wie Du die ganze Seite in CSS übernommen hast. Ich danke Dir, echt super!

Ich selber habe mir heute ein Buch über CSS bestellt, bin noch nicht so sehr damit vertraut das ganze Layout damit umzusetzen. Daher habe ich das ganze wieder komplett mit Tabellen gemacht.

Ich glaube die nächsten Seiten die ich mache werde ich komplett in CSS machen wenn ich sehe was das für Vorteile bringt!

Also, noch einmal herzlichen Dank für die Hilfe!

Grüße,

toasti2000


----------

