# Rowspan Zellengrößenproblem



## bauchinj (4. Mai 2010)

Hallo!

Mein Problem bezieht sich auf  Tabellen. versuche mal aufzuzeichnen, wie meine Tabelle in etwa aussehen soll:


_________________________________________________________________________________
|________________________________________________________________________________|
|#########|######################################|################################|
|#########|######################################|################################|
|#########|######################################|################################|
|#########|######################################|################################|
|#########|######################################|################################|
|#########|######################################|################################|
|#########|______________________________________|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############1###############|####2####|################################|
|_________|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|###3#####|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|________________________________|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|###############4################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
|#########|############################|#########|################################|
__________|___________________________|_________|_________________________________|
|________________________________________________________________________________|
|

Wie man sieht, muss man hier mit colspan und rowspan arbeiten. Mittels css hab in nun in jede dieser Zellen erfolgreich Hintergrundbilder eingebunden (height: xxxpx; width: yyypx; )

Die Zellen 1-4 haben keine fixe Größe, deren Hintergundbild ist 1px hoch und wird in der y-Richtung wiederholt. Alle anderen Zellen sind in der Höhe definiert. Wie kann es nun sein, dass die Zelle "4" nun plötzlich (in der Zelle 1 ist Inhalt) um X px nach unten geschoben wird (Zelle über 4 wird verlängert)? Vermute es hat etwas mit rowspan zu tun, ev. darf ich nicht die Zellenhöhen eintragen?, hab schon relativ viel in diese Richtung ausprobiert, aber komm einfach nicht weiter, vielleicht hat von euch jemand ne Idee?!


Danke für eure Hilfe!


----------



## Maik (4. Mai 2010)

Hi,

bist du bitte so gut, und postest einen Link zu der Seite, damit wir die Tabelle inkl. der eingebundenen Hintergrundbilder betrachten können?

Aus deiner (leicht verschobenen) "Skizze" heraus lässt sich deine Frage nämlich nicht beantworten.

mfg Maik


----------



## bauchinj (4. Mai 2010)

Hallo, hab mich bemüht, die Skizze etwas zurecht zu rücken.....

Leider kann ich keinen Link posten, da dies local programmiert ist und ich keinen Webspace habe!


----------



## Maik (4. Mai 2010)

Wenn du über keinen Webspace verfügst, postest du eben alternativ den HTML- und CSS-Code, denn deine "Skizze" gibt zu der Ursache keinen Aufschluß preis.

mfg Maik


----------



## bauchinj (4. Mai 2010)

Folglich die HTML-Datei:

```
<table border="0" class="template" cellspacing="0" cellpadding="0">
  <tr> 
    <td colspan="5" class="templateHeader"></td>
  </tr>
  
  <tr class="contentTop" >
      <td rowspan="2" class="homeBackground"></td>
      <td colspan="2" class="contentTop"></td>
      <td colspan="2" rowspan="3" class="cutLogin"></td>
  </tr>
  
  <tr class="homeBackground">
      <td rowspan="3" class="cutContent"><p>&nbsp;</p>
    </td>
    <td rowspan="3" class="shadowContentRight"></td>
  </tr>   
     
  <tr class="cutLeft">
      <td rowspan="2" class="cutLeft"></td>
  </tr>
  
  <tr>
      <td class="cutMiddle" colspan="2">&nbsp;</td>
  </tr>
  
  <tr>
      <td class="cutSite" colspan="5" align="center"></td>  
  </tr>
  
  <tr>
      <td colspan="5" class="footer"></td>
  </tr>
</table>
```

Folglich der zugehörige Stylesheet:

```
table.template{
    width: 1000px;
    border-width: 1px;
    border: 1px;
    margin: 0px;
    padding: 0px;
}

td.templateHeader{
    background-repeat: no-repeat;
    background-image:url(http://localhost/images/header/templateHeader.jpg);
    width: 1000px;
    height: 175px;
}

tr.homeBackground{
    height: 49px;
}

td.homeBackground{
    background-repeat: no-repeat;
    background-image: url(http://localhost/images/inhalt/homeBackground.jpg);
    width: 237px;
    padding: 0px;
    margin: 0px;
}

td.cutLeft{
    background-repeat: repeat-y;
    background-image: url(http://localhost/images/cutLeft.jpg);
    width: 207px;
    padding: 15px;
    vertical-align: top;
    max-height: 29px;
}

td.cutLeft div.naviLeft{
    margin-top: 0px;
}

td.cutLeft p.lnav a.lnav{
    color: #000000;
    text-decoration: none;
}

td.cutLeft p.lnav a.lnav:hover{
    text-decoration: underline;
}

tr.contentTop td.contentTop{
    background-image: url(http://localhost/images/header/contentTop.jpg);
    background-repeat: no-repeat;
    width: 494px;
}
 
tr.contentTop{
    height: 51px;
}

td.cutContent{
    background-repeat: repeat-y;
    background-image: url(http://localhost/images/cutContent.jpg);
    width: 465px;
}

td.cutContent p{
    display: none;
}

td.shadowContentRight{
    background-repeat: repeat-y;
    background-image: url(http://localhost/images/inhalt/right.jpg);
    width: 29px;
}

td.cutLogin{
    background-repeat: no-repeat;
    background-image: url(http://localhost/images/login/cutLogin.jpg);
    width: 269px;
    height: 159px;
}

td.cutMiddle{
    background-repeat: repeat-y;
    background-image: url(http://localhost/images/bestseller/cutMiddle.jpg);
    width: 269px;
    height: 100%; 
    vertical-align: top;
}

td.shadowRight{
    background-repeat: repeat-y;
    background-image: url(http://localhost/images/bestseller/right.jpg);
    width: 14px;
}

td.footer{
    background-repeat: no-repeat;
    background-image: url(http://localhost/images/footer1.jpg);
    width: 1000px;
    height: 24px;
}
```


----------



## Maik (4. Mai 2010)

bauchinj hat gesagt.:


> Wie kann es nun sein, dass die Zelle "4" nun plötzlich (in der Zelle 1 ist Inhalt) um X px nach unten geschoben wird (Zelle über 4 wird verlängert)?


Für die darüber befindliche Zelle *.cutLogin* hast du eine fixe Höhe (159px) vorgesehen, und genau so hoch wird sie von Browsern dargestellt.

mfg Maik


----------



## bauchinj (4. Mai 2010)

Naja, ich hab für die Zelle cutLogin eine Höhe von 159px definiert, diese wird aber überschritten, habs auch schon mit max-height versucht, hat aber auch keinen Erfolg gebracht!

Hab mir schon gedacht, dass es etwas mit cutLogin zu tun haben wird, aber ich komm einfach nicht auf den Fehler.


Mit Google Chrome 4.1.249.1064 funktionierts, mit Firefox 3.6.3 leider nicht


----------



## Maik (4. Mai 2010)

Dann darf sich zumindest schon mal diese Zelle in deinem Tabellengerüst nicht mit rowspan über mehrere Zeilen erstrecken, wenn sie (bei zunehmenden  Inhalt in der benachbarten "Zelle 1") in der festgelegten Höhe fix bleiben soll.

mfg Maik


----------



## bauchinj (4. Mai 2010)

OK, dann verschiebt mir der Browser allerdings die ganzen Zellen irgendwohin.

Kann es sein, dass rowspan nicht so funktioniert wie man sich das wünscht?




So, arbeite jetzt mit verschachtelten Tabellen. Funktioniert in Firefox super, in anderen Browsern (u.a. im IE, Safari, Google Chrome) nicht.

Hab eigentlich lediglich folgendes gemacht:


```
<table border="0" cellspacing="0" cellpadding="0">
<tr><td>HEADER</td>
</tr>
<tr><td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
 <table style="height:100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td height="100px"></td></tr>
    <tr><td>3</td></tr>
 </table></td>
<td>
 <table style="height:100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td colspan="2"></td></tr>
    <tr><td>1</td><td>2</td></tr>
 </table></td>
<td>
 <table style="height:100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td height="159px"></td></tr>
    <tr><td>4</td></tr>
 </table></td>
</tr>
</table>
</td>
</tr>
<tr><td>FOOTER</td>
</tr>
</table>
```

jetzt werden im Firefox die Zellen mit den Nummern entsprechend nach untengezogen, bzw. die Höhe der Tabelle in seiner Zelle auf 100% angepasst. Leider funktioniert dies in den genannten Browsern nicht. Hat dazu jemand eine Abhilfe?

Hat jemand einen Link, bzw. dieses Problem schon mal gehabt? 
Ich suche schon seit mehreren Stunden in der Hoffnung (nein ich weiß ja), dass schonmal jemand dieses Problem gehabt hat!



Bitte um Hilfe!


----------



## bauchinj (5. Mai 2010)

Hab jetzt die Lösung für google Chrome und Safari gefunden:

Zelle in der zweiten Zeile Höhe=100%, die beinhaltende Tabelle Höhe=100% und jede der 3 Zellen in dieser Tabelle Höhe=100%

Ich muss aber noch unbedingt die Lösung für den IE finden...


----------



## Funj0y (14. Mai 2010)

Hallo,

Wenn ich das richtig sehe versuchst du mithilfe von Tabellen dein Design anzupassen bzw. zu positionieren richtig? Da ich vor kurzen selber wieder angefangen haben eine Homepage zu basteln, kann ich dir nur den Tipp geben, das Design vollständig mit DIV- Elementen zu gestalten. Mit der Float- Eigenschaft kannst du ganz leicht Box für Box dort anordnen wo du es möchtest. Z.B. wenn dein Design nicht mittig dargestellt werden soll kannst du absolute angaben macht wo sich welches DIV- Element befinden soll. Soll das Design jedoch mittig dargestellt werden schau dir einfach von Maik die CSS Tutorials an (siehe in der Signatur). ^^

Den Tabellen sollen nur für deren ursprünglichen Zweck benutzt werden, für Design anpassungen/erstellungen dient DIV und CSS 

Gruß Funj0y


----------

