• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

verlinktes bild sprengt tabelle

Kyroy

Neues Mitglied
Hallo,

ich habe ein Tabelle erstellt (350px*350px), die 5Zilen und 5 Spalten hat, je 70px hoch und breit.
In jedem Feld ist ein Hintergrundbild, das auch 70*70 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.

Map <<-- hier das ganze im browser.
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:
<table class="map">
                <tbody><tr>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/0_4.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/1_4.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/2_4.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/3_4.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/4_4.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/0_3.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" class="player" style="background-image: url(&quot;karte/bilder/1_3.jpg&quot;);">
                        <a href="move.php?leftup=1"><img height="70" width="70" class="player" src="karte/bilder/player0.gif">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/2_3.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/3_3.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/4_3.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/0_2.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/1_2.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/2_2.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/3_2.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/4_2.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/0_1.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/1_1.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/2_1.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/3_1.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/4_1.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                </tr><tr>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/0_0.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/1_0.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/2_0.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/3_0.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                    <td height="70" width="70" style="background-image: url(&quot;karte/bilder/4_0.jpg&quot;);">
                        <a onclick="">
                        </a>
                    </td>
                </tr>
            </tbody></table>
hier die style:
Code:
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;
}
 
Zurück
Oben