Tutorial HTML, CSS u. PHP - Forum

[philipp e.]

Hallo Leute,
ich bin jetzt schon ungefähr 40 Minuten am selben Problem.
Es geht um Tabellen. Normal sieht alles nach meinem Skript so aus (nur schemahaft):

Unbenannt.PNG (845 Bytes) 390-mal betrachtet

Die zweite Zeile hat nur ein td mit colspan="4".

Alles schön und gut, nur mein Problem ist ein wenig schwieriger zu erklären:
Ersteinmal der Code:

Code: Alles auswählen

while($row = mysql_fetch_row($result))
{
echo "<tr><td><a href='#' onclick='openmessage(".$row[0].")'>".$row[3]."</a></td>";
$mysql = "SELECT * FROM `user` WHERE `nickname` LIKE '".$row[1]."'";
$resultb = mysql_query($mysql);
while($rowb = mysql_fetch_row($resultb))
{
echo "<td><a href='profil.php?id=".$rowb[0]."'>".$row[1]."</a></td>";
}
echo "<td>".$row[4]."</td><td><img src='../png/icons/delete.png' /></td></tr>";
echo "<tr class='message' id='".$row[0]."'><td colspan='4'>".$row[6]."</td></tr>";
}
echo "</table>";


Ein simples Nachrichtenpostfach, jedoch ein Problem.

Code: Alles auswählen

<script type="text/javascript">
function openmessage(rcid) {
document.getElementById(rcid).style.display="block";
}      
</script>


Code: Alles auswählen

tr.message {
display: none;
border: 1px solid #393939;
}


Soooo, hier noch ein Bild in dem man das Problem erkennen kann:

Die Zeile, in der der Inhalt der Nachricht angezeigt wird, soll sich über 4 Spalten erstrecken.
Ich habe doch <td colspan="4">...</td>!!!

Warum funktioniert das nicht?

Ich hoffe, ihr habt erkannt, dass das ganze mit Javascript und display dynamisch ist.

Mit freundlichen Grüßen,
Philipp E.

[philipp e.]

Kleine Ergänzung:
Im IE funktioniert alles. Im FF aber nicht.

[Sarkkan]

Das verwundert mich.. das wäre dann zum ersten mal etwas, wo der IE wirklich etwas richtig falsch interpretieren würde.

Eine Tabelle besteht in HTML aus Reihen und Zellen.
Den Zellen können wir dabei eine Besonderheit sagen und zwar, dass sie der Platz der eigentlich vorher in der Tabelle für mehrere Zellen vorgesehen war einnehmen dürfen.

Code: Alles auswählen

_________________
| 1 | 1 | 1 | 1 | = Head der Tabelle
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
_________________
|   2   |   2   | = Tabellen Zellen mit einem colspan von 2
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
_________________
| 1 |     3     | = Eine normalle Zelle und eine mit colstpan 3
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

Warum das bei dir nun nicht Klappt ist relativ einfach: Du versuchst der Reihe theoretisch mehr Zellen zu zu weisen, als wie Möglich sind.

Code: Alles auswählen

_________________
| 1 | 1 | 1 | 1 | = Head der Tabelle
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
_________________
|   2   |   2   |  2  | = Tabellen Zellen mit einem colspan von 2
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
_________________
|   2   |     3     | = Eine normalle Zelle und eine mit colstpan 3
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

Schaut nicht.. all zu richtig aus, oder? O.o

Übrigens hat das einen Grund, dass die Dinger Reihen heißen.
Wobei das wenn du mich fragst ja übrigens nicht nach Inhalt aussieht, der Tabellarisch angeordnet gehört, sondern eher in divs

[philipp e.]

@Sarkkan:
Also ich habe doch vier Spalten. Warum kann ich dann nicht per colspan="4" die gane Zeile für eins benutzen? Ich mache doch gar kein neues. Es sind vier da, und ich nehme colspan="4".

[Sarkkan]

Nein, deine Tabelle besitzt nur 5 Spalten.
Um Ihr zu sagen, dass eine Zelle den Platz von mehreren Zellen einnehmen soll, brauchst du einfach mehr Zellen
Wobei as was du da machst theoretisch semantisch vollkommen inkorrekt ist.
Den jede Zelle gehört in die Selbe Reihe wie die anderen Zellen der Reihen, außerdem handelt es sich hier nicht um Tabellarischen Inhalt sondern um Design.

[philipp e.]

Entweder du oder ich kapieren gerade gar nichts (eher das erstere).

table = Tabellenbasis
tr = Zeile
th = Spaltenüberschrift
td = Zelle

Wenn man jetzt folgendes macht:

Code: Alles auswählen

<table>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td colspan="4">...</td>
</tr>
</table>


Wo sind da jetzt 5 Zellen (td) in einer Zeile (tr)??

Mit freundlichen Grüßen,
Philipp E.

[Flow Snow]

Mit deinem gesendeten Code können wir absolut nicht wissen was du für eine Ausgabe bekommst, wie wäre es wenn du einfach mal den erzeugten Code zeigst der am Ende raus kommt?

[Sarkkan]

Wenn as wirklich so aussieht, dass brauchst du in dem 2. tr nur ein td mit einem colspan.

[philipp e.]

@Flow Snow:

Code: Alles auswählen

<table>
<tr>
<th width='35%'>
<img alt='Betreff' title='Betreff' width='30' src='../png/icons/large_tiles.png' />
</th>
<th width='20%'>
<img alt='Von' title='Von' width='30' src='../png/icons/user_gray.png' />
</th>
<th width='35%'>
<img title='Datum' alt='Datum' width='30' src='../png/icons/date.png' />
</th>
<th width='10%'>
<img alt='löschen' title='löschen' width='30' src='../png/icons/bin.png' />
</th>
</tr>
<tr>
<td>
<a href='#' id='a1' onclick='openmessage(1)'>
Test123<img id='img1' class='messageimg' src='../png/iconsbullet_arrow_down.png' /></a>
</td><td>
<a href='profil.php?id=2'>Sebastian S.</a>
</td>
<td>
2011-07-09 19:07:59
</td><td>
<img src='../png/icons/delete.png' />
</td>
</tr>
<tr class='message' id='1'>
<td colspan='4'>
<img class='messageimg' onclick='closemessage(1)' src='../png/icons/bullet_arrow_up.png' />
<br />Hallo,
ich hoffe, es geht dir gut.
TEST123
[Virus238456]</td></tr>


Und hier nochmal ein aktulasiertes Bild:

@Sarkkan:
Ja, habe ich doch gemacht.

[CyberGirl]

Hi,

bei mir sieht es so aus - mit einem Rahmen un die Tabelle:

Einkleiner Fehler ist:

Code: Alles auswählen

<tr class='message' id='1'>

Eine id darf nicht mit einer Zahl beginnen.

Was steht eigentlich in class='messageimg'

LG

[philipp e.]

@CyberGirl:
Ja, das ist bei mir auch. Nur, wenn ich das dann mit meinem ganzen Styles... anwende kommt was anderes raus
Das mit der id habe ich jetzt geändert:

Code: Alles auswählen

<tr class='message' id='id1'>


Und zu messageimg:

Code: Alles auswählen

img.messageimg {
vertical-align: middle;
cursor: pointer;
}


Doch, das verbessert nichts.

[CyberGirl]

Hi

Code: Alles auswählen

img class='messageimg' onclick='closemessage(1)' src='../png/icons/bullet_arrow_up.png' />

wird irgendwo eine Breite für das img gestzt ? Das das HTML ok ist liegt das Problem eher im CSS oder im Bild.

Versuch es doch einfach mal mit

Code: Alles auswählen

[code]img class='messageimg'  width='100%' onclick='closemessage(1)' src='../png/icons/bullet_arrow_up.png' />[/code]

[philipp e.]

Also, dann komt das raus:

[CyberGirl]

Kannst Du mal das ganze CSS posten ?

[philipp e.]

@CyberGirl:
Was meinst du jetzt mit dem Ganzen?