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

Anker, Bilder und Tabelle - Wie werde ich den Rahmen los?

Object

Object

Neues Mitglied
Guten Abend liebe Community,
ich schreibe zur Zeit an einer XHTML Umsetztung eines relativ einfachen Designs.
Ich habe mich für eine Tabelle entschieden, denn normalerweise bin ich damit sehr gut gefahren, doch habe ich dieses Mal ein Problem
Alles sieht sehr schön aus bis ich hinter die Bilder die später die Navigation darstellen sollen Links lege.
Dann verzieht sich alles.

Hier erstmal der Quelltext:
HTML: 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Didgeridoo Aachen</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
        <table id="tableMain" width="801" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="9"><img src="Bilder/papa_01.jpg" width="800" height="408" alt="" /></td>
                <td><img src="Bilder/Abstandhalter.gif" width="1" height="408" alt="" /></td>
            </tr>
            <tr>
                <td colspan="7"><img src="Bilder/papa_02.jpg" width="607" height="11" alt="" /></td>
                <td rowspan="3">
                    <a href="#events">
                        <img src="Bilder/papa_03.jpg" width="94" height="38" alt="" />
                    </a>
                </td>
                <td rowspan="7"><img src="Bilder/papa_04.jpg" width="99" height="120" alt="" /></td>
                <td><img src="Bilder/Abstandhalter.gif" width="1" height="11" alt="" /></td>
            </tr>
            <tr>
                <td colspan="5"><img src="Bilder/papa_05.jpg" width="382" height="13" alt="" /></td>
                <td rowspan="3">
                    <a href="#klangliege">
                        <img src="Bilder/papa_06.jpg" width="160" height="39" alt="" />
                    </a>
                </td>
                <td rowspan="6"><img src="Bilder/papa_07.jpg" width="65" height="109" alt="" /></td>
                <td><img src="Bilder/Abstandhalter.gif" width="1" height="13" alt="" /></td>
            </tr>
            <tr>
                <td colspan="3"><img src="Bilder/papa_08.jpg" width="181" height="14" alt="" /></td>
                <td rowspan="3">
                    <a href="#didge">
                        <img src="Bilder/papa_09.jpg" width="165" height="43" alt="" />
                    </a>
                </td>
                <td rowspan="5"><img src="Bilder/papa_10.jpg" width="36px" height="96px" alt="" /></td>
                <td><img src="Bilder/Abstandhalter.gif" width="1px" height="14px" alt="" /></td>
            </tr>
            <tr>
                <td rowspan="4"><img src="Bilder/papa_11.jpg" width="53px" height="82px" alt="" /></td>
                <td rowspan="3">
                    <a href="#home">
                        <img src="Bilder/papa_12.jpg" width="87" height="37" alt="" />
                    </a>
                </td>
                <td rowspan="4"><img src="Bilder/papa_13.jpg" width="41" height="82" alt="" /></td>
                <td rowspan="4"><img src="Bilder/papa_14.jpg" width="94" height="82" alt="" /></td>
                <td><img src="Bilder/Abstandhalter.gif" width="1" height="12" alt="" /></td>
            </tr>
            <tr>
                <td rowspan="3"><img src="Bilder/papa_15.jpg" width="160" height="70" alt="" /></td>
                <td><img src="Bilder/Abstandhalter.gif" width="1" height="17" alt="" /></td>
            </tr>
            <tr>
                <td rowspan="2"><img src="Bilder/papa_16.jpg" width="165" height="53" alt="" /></td>
                <td><img src="Bilder/Abstandhalter.gif" width="1" height="8" alt="" /></td>
            </tr>
            <tr>
                <td><img src="Bilder/papa_17.jpg" width="87" height="45" alt="" /></td> <td><img src="Bilder/Abstandhalter.gif" width="1" height="45" alt="" /></td>
            </tr>
        </table>
    </body>
</html>

Und das dazugehörige CSS:
PHP: 
@charset "UTF-8";

body {
    background-color: #000000;
}

a img { border: 0; margin: 0; padding: 0; }
img { border: 0; }

#tableMain {
    position: absolute;
    left: 50%;
    margin-left: -400px;
    border: 0;
    height: 528px;
    width: 801px;
}

Das XHTML, als auch das CSS ist valid, daran liegt es also nicht, doch mein Browser zeigt es inkorrekt an und zwar so.

Ich würde mich sehr über Hilfe freuen.
MfG Object
 
Werbung:
ja, der browser erkennt, dass du tabellen fürs layout verwendest und schlägt zurück.
stell' alles auf CSS um, dann sollten auch die fehler verschwinden.

Nils aka XraYSoLo
 
XraYSoLo schrieb:
ja, der browser erkennt, dass du tabellen fürs layout verwendest und schlägt zurück.
stell' alles auf CSS um, dann sollten auch die fehler verschwinden.

Nils aka XraYSoLo
Zum Vergrößern anklicken....

Entschuldige, aber diese Antwort ist mehr als unqualifiziert.
Es ist komplett valides XHTML also wird es wohl kaum daran liegen das ich ungültige Attribute benutzt habe.
Ob ich die Attribute nun in CSS deklariere oder via HTML sollte keinen Unterschied machen.
Vorallem weil die Abstände nur auftauchen wenn ich die Anker einfüge.
 
Werbung:
Liegt ziemlich sicher an dem Whitespace zwischen <a>-Tag und <img>-Tag.

Code: 
<td rowspan="3">
    <a href="#didge">
        <img src="Bilder/papa_09.jpg" width="165" height="43" alt="" />
    </a>
</td>
 
XraYSoLo schrieb:
ich glaube doch wirklich, dass das nicht in deinem entscheid steht, sondern eher in dem des browsers, nicht wahr?

mach' die tabellen trotzdem weg. valides HTML reicht nicht aus, wenn die seite vor barrieren nur so strotzt.

Nils aka XraYSoLo
Zum Vergrößern anklicken....

Und doch, sie liegt in meiner Entscheidung denn ich habe nicht gefragt wie ich die Problematik mit div-Containern löse, sondern ich habe gefragt wie ich diese Leerräume in der Tabelle entfernen kann.
Die Antwort von mermshaus hat das Problem gelöst.
Dank an ihn.
 
Werbung:
sei halt froh, dass es dir einer sagt. infos sind das halbe leben und wenn mir fehler auffallen, mache ich nun mal die leute drauf aufmerksam, dass es später nicht zu noch größeren komplikationen kommt.

Nils aka XraYSoLo
 
XraYSoLo schrieb:
sei halt froh, dass es dir einer sagt. infos sind das halbe leben und wenn mir fehler auffallen, mache ich nun mal die leute drauf aufmerksam, dass es später nicht zu noch größeren komplikationen kommt.

Nils aka XraYSoLo
Zum Vergrößern anklicken....

Naja, ein Anfänger bin ich bestimmt nicht und weiß schon das Tabellen nicht mehr der State Of Art sind, aber sind, meiner Meinung nach, Div-Container bei solchen Slice-Designs wesentlich komfortabler und unproblematischer als Div-Lösungen.
Natürlich kannst du mich darauf aufmerksam machen, das es eben nicht deiner Meinung einer idealen Lösung entspricht aber wäre es doch nett a) das in einer vernünftigen Form zu tuen und b) dann auch das eigentliche Problem zu behandeln.

MfG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben