• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS Problem mit position: absolute bzw. relative

S

schlegel.berlin

New member
Hallo,

ich habe ein Problem mit CSS. Um das Problem besser zu verdeutlichen, habe ich einen Beispielquelltext einer ganzen HTML-Seite gepostet.
Im Rahmen eines Framsets, wo die Seite ursprünglich plaziert sein sollte, taucht mein nachstehend beschriebenes Problem natürlich nicht auf. Nun aber soll das ganz mit Tabellen gelöst werden und da habe ich dann eben eine "position" Problem mit den DIV-Boxen.

Ich möchte, dass die DIV-Boxen immer an der gleichen Postion sichtbar werden, unabhängig davon welche Bildschirmauflösung verwendet wird (ab 1024 x 768 aufwärts).
Im Moment ist es so, dass bei 1024 x 768 die DIV-Boxen an der richtigen Stelle erscheinen.
Ist die Auflösung aber z.B. 1152 x 864 oder größer, erscheinen die DIV-Boxen nicht mehr an der gewünschten Position.
Trotz googeln wie blöde, stelle ich mich offebar ebenso an, da ich bislang einfach nicht genügend durchblicke (heul...)

Kann mir jemand von Euch helfen?

Wäre echt super klasse ...

Vielen Dank im Voraus und liebe Grüße, Karin
---------------------------------------------------------------------

Hier der komplette Quelltext (und nicht irritiert sein über die kleinen PHP-Schnipsel im Quelltext. Da werden später Thumbnails per PHP eingebunden und die Seite dann eben nicht mehr .html, sondern .php sein):

HTML: 
<?php 
header('Content-type: text/html; charset=utf-8'); 
?>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<TITLE></TITLE>
<script language="JavaScript">
<!--
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 U="";9 T="";f z(){9 i,p,v,7,a=z.S;e(i=0;i<(a.8-2);i+=3)6((7=c(a[i]))!=R){v=a[i+2];6(7.y){7=7.y;v=(v==\'Q\')?\'P\':(v=\'O\')?\'N\':v}7.M=v}}f g(w){6(w==q)L(K){6((J=="I")&&(H(G)==4)){5.t=u;5.r=s;F=g}}E 6(u!=5.t||s!=5.r)D.C()}g(q);f c(n,d){9 p,i,x;6(!d)d=5;6((p=n.B("?"))>0&&o.m.8){d=o.m[n.l(p+1)].5;n=n.l(0,p)}6(!(x=d[n])&&d.k)x=d.k[n];e(i=0;!x&&i<d.j.8;i++)x=d.j[i][n];e(i=0;!x&&d.b&&i<d.b.8;i++)x=c(n,d.b[i].5);6(!x&&5.h)x=5.h(n);A x}',57,57,'|||||document|if|obj|length|var|args|layers|MM_findObj||for|function|MM_reloadPage|getElementById||forms|all|substring|frames||parent||true|MM_pgH|innerHeight|MM_pgW|innerWidth||init||style|MM_showHideLayers|return|indexOf|reload|location|else|onresize|appVersion|parseInt|Netscape|appName|navigator|with|visibility|hidden|hide|visible|show|null|arguments|oldnormimage|pressed'.split('|'),0,{}))
//-->
</script>
</head>
<body  style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;background-color:#800000">
<table border=0 cellpadding=0 cellspacing=0 style="width:100%;height:100%">
<tr valign="middle">
<td>
<center>
<!---------------  inner table begin ---------------->
<table border=0 cellpadding=0 cellspacing=1 bgcolor="#505050">
<tr style="height:50px">
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-1','','show') onMouseOut=MM_showHideLayers('link-1','','hide')><img src="<? echo $visitenkarte01; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-2','','show') onMouseOut=MM_showHideLayers('link-2','','hide')><img src="<? echo $visitenkarte02; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-3','','show') onMouseOut=MM_showHideLayers('link-3','','hide')><img src="<? echo $visitenkarte03; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-4','','show') onMouseOut=MM_showHideLayers('link-4','','hide')><img src="<? echo $visitenkarte04; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-5','','show') onMouseOut=MM_showHideLayers('link-5','','hide')><img src="<? echo $visitenkarte05; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-6','','show') onMouseOut=MM_showHideLayers('link-6','','hide')><img src="<? echo $visitenkarte06; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-7','','show') onMouseOut=MM_showHideLayers('link-7','','hide')><img src="<? echo $visitenkarte07; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-8','','show') onMouseOut=MM_showHideLayers('link-8','','hide')><img src="<? echo $visitenkarte08; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-9','','show') onMouseOut=MM_showHideLayers('link-9','','hide')><img src="<? echo $visitenkarte09; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-10','','show') onMouseOut=MM_showHideLayers('link-10','','hide')><img src="<? echo $visitenkarte10; ?>" width="80" height="50" border=0></a>
</td>
<td bgcolor="white"  style="width:80px">
<a href="#" onMouseOver=MM_showHideLayers('link-11','','show') onMouseOut=MM_showHideLayers('link-11','','hide')><img src="<? echo $visitenkarte11; ?>" width="80" height="50" border=0></a>
</td>
</tr>
<tr style="height:410px">
<td>
</td>
</tr>
</table>
<!---------------  inner table end ---------------->
</center>
</td>
</tr>
</table>

<!------------------------ popups begin (top row) ----------------------->
<div id="link-1" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 1 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

<div id="link-2" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 2 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

<div id="link-3" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 8 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

<div id="link-4" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 4 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

<div id="link-5" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 5 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
    </tr>
</table>
</div>

<div id="link-6" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 6 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

<div id="link-7" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 7 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

<div id="link-8" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 8 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

<div id="link-9" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 9 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

<div id="link-10" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 10 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

<div id="link-11" style='position:absolute; left:298px; top:316px; width:408px; height:223px; z-index:6; visibility: hidden'>
  <table width='408' border='0' cellspacing='1' cellpadding='2' height='223' bgcolor="#E5E5E5">
    <tr valign="middle">
      <td><center>
        	<table width='300' border='0' cellspacing='0' cellpadding='0' height='180' bgcolor="#FFFFC0">
    		<tr valign="middle">
      		<td style="text-align:center">hier wird Bild 11 plaziert
		</td>
    		</tr>
  		</table></center>
      </td>
    </tr>
    <tr valign="middle">
      	<td bgcolor="white" style="font-family:arial;color:#000000;text-align:center">Hier wird ein Bilduntertitel plaziert
	</td>
    </tr>
</table>
</div>

</body>
</html>
 
Zuletzt bearbeitet:
Hallo Blaubeerchen ;)

Was hast du vor? Möchtest du die Divs "link-x" zentrieren oder einfach nur an einer bestimmten fixen Position haben? Was du gemacht hast stimmt schon, allerdings wird die Position immer von der oberen, linken Fensterecke aus gerechnet, was je nach Auflösung doof aussieht, da der Rahmen drumherum auf der Seite zentriert ist. Wenn du die Position relativ von einem anderen Element aus setzen möchtest, muss dieses übergeordnete Element ebenfalls mit "position: absolute" positioniert werden. Vielleicht könntest du noch schnell erläutern was deinen gewünschte Position ist.

Möglicherweise ist "position: absolute" nicht das was du suchst, vielleicht bist du mit margin besser bedient.

Eine andere Lösung wäre, da deine Seite ohne JavaScript eh nicht funktioniert, das ganze mit JS zu positionieren (damit Ernte ich jetzt wahrscheinlich Kritik von den anderen Usern).

Und, falls du mir etwas Kritik gestattest (wenn nicht überspringe einfach den Abschnitt), deine Seite ist etwas umständlich aufgebaut, da du 11 verschiedene Divs in deine Seite eingebaut hast, die eigentlich alle die selbe Struktur haben. Wenn du also eine Änderung machen möchtest, musst du diese an 11 verschiedenen Stellen vornehmen. Da du mit PHP arbeitest wäre eigentlich eine for-Schleife angebracht, dann musst du das ganze nur einmal schreiben. Oder die etwas elegantere und fortgeschrittenere Methode: Du machst einfach nur ein solches div und änderst je nach Thumbnail einfach nur das Bild und den Bilduntertitel. Das ist nicht sonderlich kompliziert, wenn du möchtest kann ich dir Zeigen wie sowas geht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben