nicht angemeldet
Problem mit 'position:relative'
Hallo,
ich habe ein kleines Problem.
Der folgende Quelltext soll dazu dienen, eine Kamera darzustellen, die sich zentriert zwischen 6 Links befindet. Dabei soll sich ihr Objektiv dynamisch öffnen und schliessen können (dieses Skript ist schon fertig). Mein Problem ist, wie ich die Kamera immer zentriert zwischen den Links, dabei aber die Koordinaten der Vorschau und des Objektives auf der Kamera gleichbleibend, darstelle.
Auch unter Netscape sollte die Seite so aussehen.
Es muss doch eine Lösung geben, ohne die Fenstergröße und Auflösung per JS zu bestimmen und trotzdem meine Erwartungen zu erfüllen.
Vielen vielen Dank,
HPE
Mein Quelltext:
<html>
<head>
<title>Seite die noch nicht so ganz toll aussieht</title>
</head>
<body>
<center>
<br><br><br><br><br><br><br><br><br><br><br><br>
<table width="97%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td align="right" width="20%"><h2><a href="seite1.html">Seite 1 <img name="bild1" src="bilder/button/1.gif" width="60" height="60" border="0"></a></h2></td>
<td width="30%" height="250" rowspan="3"><p align="center">
<table style="position:absolute; left:35.5%; top:270;" border="0" cellpadding="0" cellspacing="0">
<tr><td><img name="kamera" src="bilder/kamera.gif" width="283" height="204" border="0"></td></tr>
<tr><td><img name="vorschau" src="bilder/button/1.gif" width="60" height="60" style="position:relative; left:134; top:-110;" border="0" alt="Vorschau"></td></tr>
<tr><td><img name="objektiv" src="bilder/gitter/0.gif" width="80" height="80" style="position:relative; left:124; top:-188;" border="0"></td></tr>
</table>
</td>
<td align="left" width="20%"><h2><a href="seite2.html"><img name="bild2" src="bilder/button/2.gif" width="60" height="60" border="0"> Seite 2</a></h2></td>
<td width="15%"></td>
</tr>
<tr>
<td></td>
<td align="center" width="20%"><h2><a href="seite3.html">Seite 3 <img name="bild3" src="bilder/button/3.gif" width="60" height="60" border="0"></a></h2></td>
<td align="center" width="20%"><h2><a href="seite4.html"><img name="bild4" src="bilder/button/4.gif" width="60" height="60" border="0"> Seite4</a></h2></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" width="20%"><h2><a href="seite5.html">Seite 5 <img name="bild5" src="bilder/button/5.gif" width="60" height="60" border="0"></a></h2></td>
<td align="left" width="20%"><h2><a href="seite6.html"><img name="bild6" src="bilder/button/6.gif" width="60" height="60" border="0"> Seite 6</a></h2></td>
<td></td>
</tr>
</table>
</center>
<br>
<br>
</body>
</html>
-
hallo,
Auch unter Netscape sollte die Seite so aussehen.
- sowas:
<img style="position:relative; left:124; top:-188;">
unbter NS 4.x kannst du vergessen.
Versuchen kannst du es mit:
<div style="position:relative; left:124; top:-188;">
<img>
</div>
Wobei du keine inline styles verwenden solltest (also statt style="" lieber mit class="" oder id="" arbeiten).
- das:
<table style="position:absolute; left:35.5%; top:270;" border="0" cellpadding="0" cellspacing="0">
geht erst recht nicht.
übrigens:
<p align="center">
<table style="position:absolute; ...>
ist sehr schlechter Code!du solltest in der richtug:
<table border="1" cellpadding="0" cellspacing="0">
<tr><td>
<img name="kamera" src="bilder/kamera.gif" width="283" height="204" border="0">
<div style="position:relative; left:134; top:-110;"><img name="vorschau" src="bilder/button/1.gif" width="60" height="60" border="0" alt="Vorschau"></div>
<div style="position:relative; left:124; top:-188;"><img name="objektiv" src="bilder/gitter/0.gif" width="80" height="80" border="0"></div>
</td></tr>
</table>für deine tabelle was überlegen, das geht nämlich auch in NS.
Grüße
Thomas - sowas: