Problem mit Tabellen

Status
Nicht offen für weitere Antworten.

SchnurzPiep

Grünschnabel
Servus,
ersteinmal muß ich gestehen, dass ich ein ziemlicher xhtml neuling bin und das eigentlich mein erster versuch ist.
Mein Problen ist folgendes: Ich hab auf meiner Page zwei Tabellen positioniert in deren
Spalten sich verlinkte Bilder befinden. Zuerst hatte ich nur die linke Tabelle und es lief alles super. Als ich die rechte mit hilfe eines div-Blocks posisioniert hatte funktionieren nur noch
die Links der rechten Tabelle.

Hier der Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="general2.css" />
<title>Bildwelten2</title>
</head>
<body>
<marquee scrollamount="20" scrolldelay="400">
<h2>IKA Bildwelten 2</h2>
</marquee>
<ul>
<li>
<a href="index.html">
Bildwelten</a></li>
<li>
<a href="index2.html">
Startseite</a></li>
<li>
<a href="animation.html">
Animation</a></li>
<li>
<a href="animation.html">
Zurück</a></li>

</ul>

<table border="1" width="150" height="440px">
<tr>
<td>
<a href="bilder.html">
<img src="annunciation_sw.jpg" width="150" height="110" alt="Annunciation" ></img></a>
</td>
</tr>
<tr>
<td><a href="bilder.html">
<img src="gabriel.jpg" width="150" height="110" alt="Annunciation" ></img></a>
</td>
</tr>
<tr>
<td><a href="bilder.html">
<img src="maria.jpg" width="150" height="110" alt="Annunciation" ></img></a>
</td>
</tr>

</table>

<div style= "position:absolute;top:110px">
<table border="1" align="right" width="150" height="440px">
<tr>
<td>
<a href="heiligergeist_groß.html">
<img src="heiligegeist_.jpg" width="150" height="110" alt="Heiliger Geist"></img></a>
</td>
</tr>
<tr>
<td><a href="bilder.html">
<img src= width="150" height="110" alt="Annunciation"></img></a>
</td>
</tr>
<tr>
<td><a href="bilder.html">
<img src= width="150" height="110" alt="Annunciation"></img></a>
</td>
</tr>
</table>
</div>

<div id="bild1">
<div>
<map name="botticelli_anunciation">
<area shape="rect" coords="5,164,68,211" href="index.html" title="Heiliger Geist"
alt="Link"/>
<area shape="rect" coords="34,221,122,402" href="gabriel_groß.html" title="Gabriel"
alt="Link"/>
<area shape="rect" coords="132,273,157,323" href="bilder.html" title="Lilie"
alt="Link"/>
<area shape="rect" coords="412,221,502,390" href="maria_groß.html" title="Maria"
alt="Link"/>



</map>
</div>

<img src="botticelli_anunciation.gif" usemap="botticelli_anunciation" title="sant_andrea" alt="Link"/>

</div>

</body>



Bin für rasche Hilfe dankbar
 
Für die Linke Navigation musst du float:left; benützen und für die Rechte Navigation float:right;

hab deinen Quelcode net angeguckt da du ihn falsch eingefügt hast..

mfg
 
Hi,

vermutlich liegt es daran, dass du die rechte Tabelle durch die absolute Positionierung aus dem normalen Textfluss genommen hast, und die linke Tabelle nun von ihr überdeckt wird, weshalb die darin enthaltenden Links nicht mehr anklickbar sind.

Definiere daher mal für das umschliessende DIV die entsprechende Breite, damit es sich nicht über die komplette Fensterbreite erstreckt.

Code:
<div style="position:absolute;top:110px;right:0;width:150px;">
...
</div>
Noch zwei allgemeine Hinweise zum Abschluss: in dem HTML-Attribut height wird keine Maßeinheit angegeben, und das schliessende </img>-Tag gibt es nicht, stattdesssen wird in XHTML das img-Element folgendermaßen abgeschlossen:

Code:
<img src="heiligegeist_.jpg" width="150" height="110" alt="Heiliger Geist" />
 
Status
Nicht offen für weitere Antworten.
Zurück