Verlinkte Bilder sprengen Tabelle

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich habe ein Tabelle erstellt (350px350px), die 5Zeilen und 5 Spalten hat, je 70px hoch und breit.
In jedem Feld ist ein Hintergrundbild, das auch 7070 groß ist. Nun soll in jedes Feld ein Transparentes Bild, später halt dann teilweise transparent.
Das ganze habe ich mit einem php-Dokument erstellt, nur so als Nebeninfo.

Zur Zeit sieht das ganze noch was eintönig aus, da ich erst den code 100% haben will, bevor ich mich mit dem Rest beschäftige.

[U]http://img594.imageshack.us/img594/6936/tabellep.jpg[/U]
Das zweite bild in der zweiten Spalte wurde verlinkt und sprengt nun das ganze.

Bitte nicht wundern, dass in der css etwas kuddelmuddel is, ich probier schon die ganze zeit alles mögliche aus.
Wahrscheinlich überseh ich etwas total offensichtliches, aber ich komm einfach net drauf.

Ich bin dankbar für jede Hilfe

[HTML]



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/0_4.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/1_4.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/2_4.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/3_4.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/4_4.jpg“);“>





<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/0_3.jpg“);“>



<td height=„70“ width=„70“ class=„player“ style=„background-image: url(„karte/bilder/1_3.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/2_3.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/3_3.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/4_3.jpg“);“>





<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/0_2.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/1_2.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/2_2.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/3_2.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/4_2.jpg“);“>





<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/0_1.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/1_1.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/2_1.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/3_1.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/4_1.jpg“);“>




<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/0_0.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/1_0.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/2_0.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/3_0.jpg“);“>



<td height=„70“ width=„70“ style=„background-image: url(„karte/bilder/4_0.jpg“);“>




[/HTML]hier die style:

table, tr, td{
border: 0;
border-collapse: collapse;
}
.map{
border-collapse: collapse;
border: 0;
background-repeat: no-repeat;
width: 350px;
height: 350px;
}
.player{
border: 0;
background-repeat: no-repeat;
border-collapse: collapse;
border-spacing: 0px, 0px;
padding:0px;
margin:0px;
}
2

Das hier könnte helfen:

.map img { display: block; }
3

Vielen Dank :slight_smile:
Bin ich net drauf gekommen :S