nicht angemeldet
Hi,
ich bastel nun schon ewig an einem Problem rum und finde einfach keine Lösung, trotz rumsuchen und rumprobieren :-(
Die Seite soll folgendermaßen aussehen:
ich habe eine Tabelle, die die ganze Seitenbreite und -höhe einnimmt. Die mittlere Tabellenzelle ist zentriert und besteht nur aus einem Logo (Grafik). Dieses Logo wird animiert dargestellt, d.h. mittels Javascript tausche ich vier Bilder nacheinander aus. Soweit funktioniert auch alles.
Nun habe ich aber noch das Problem, dass über diese Grafik drübergelegt ein Link (wieder eine Grafik) erscheinen muss, der auch noch einen Mouseover-Effekt hat. Der Mouseover funktioniert auch.
Aber - und hier nun das Problem - ich kann diese Linkgrafik nicht über das Bild drüberlegen, so dass es korrekt angezeigt wird. Im Moment habe ich diese Linkgrafik in einen div-Container gepackt.
So, nun positioniere ich diesen div-Container absolut (oder relativ, in diesem Fall habe ich beide Male den gleichen Fehlereffekt) über der Logografik. Das funktioniert auch noch. Ändere ich jetzt aber die Bildschirmauflösung oder die Grösse des Fensters, dann rutscht die drübergelegte Linkgrafik mit. Die Position der Linkgrafik orientiert sich ja am oberen Bildschirmrand (body), und die erste Tabellenzeile ist ja variabel von der Höhe her (weil die Seitenhöhe ja immer 100% ist und die Tabellenzeile mit der Logografik eine feste Höhe hat). Also verrutscht das Bild.
Am liebste hätte ich eine Lösung, wo sich die Positionierung des Bildes an der Ecke der Tabellenzelle orientiert, aber das habe ich nicht hingekriegt.
Ich hoffe ich konnte das Problem einigermaßen verständlich erläutern.
Wäre prima, wenn mir jemand helfen könnte.
Viele Grüße und vielen Dank schon mal,
Claudia
-----------------------------------------------------------------
Hier noch der Quelltext: (hoffe das wird jetzt nicht zu lang...)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
... (hier stehen die Javascript-Funktionen) ...
</head>
<body style="padding:0;" onLoad="javascript:BildAnimieren();">
<div align="center">
<table width="770" style="height:100%;padding:0;border-width:0;" border="1">
<tr>
<td valign="bottom">
<table width="770" style="padding:0;border-width:0;" border="0">
<tr>
<td>Kopfbereich oben</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="770" style="height:100%;padding:0;border-width:0;" border="0">
<tr>
<td align="center">
<table width="590" style="padding:0;border-width:0;" border="1">
<tr>
<td>linker Bereich</td>
<td width="355" height="350">
<img src="images/Intrologo.gif">
<div class="impressum">
<a href="mc_impressum.html"></a>
</div>
</td>
<td>rechter Bereich</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom">
<table width="770" style="padding:0;border-width:0;" border="0">
<tr>
<td>Fussbereich unten</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
und in der css-Datei steht dann folgende Definition:
.impressum {
width:70px;
height:16px;
position: relative;
top: -200px;
left: 10px;
z-index: 10;
border: 0;
visibility: visible;
}
.impressum a:link, .impressum a:visited, .impressum a:active {
width:70px;
height:16px;
background: url(images/Impressum_inaktiv2.gif);
display:block;
z-index: 10;
text-decoration: none;
visibility: visible;
}
.impressum a:hover {
width:70spx;
height:16px;
background: url(images/Impressum_mouseover.gif);
text-decoration: none;
}