Rowspan Zellengrößenproblem

bauchinj

Erfahrenes Mitglied
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!
 
Zuletzt bearbeitet:
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
 
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!
 
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
 
Folglich die HTML-Datei:
Code:
<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:
Code:
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;
}
 
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
 
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
 
Zuletzt bearbeitet:
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
 
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:

Code:
<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!
 
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...
 

Neue Beiträge

Zurück