LinkBack URL
About LinkBacks
ZitierenStichwort: position:relative
Such mal danach im Forum, Du wirst einige Lösungen finden
Align: Center und Tabelle...
Hey Forennutzer!
ich wende mich mal wieder mit einer Frage an Euch:
Auf meiner Website versuche ich, "table#main" mit dem Attribut "align center" zentral darzustellen. Die Tabelle hat eine feste Breite von 600px. Dies funktioniert auch ohne Probleme bei jeglichen Auflösungen.
Da ich aber mehrere Layers verwende, um Bilder und Text darzustellen, tritt nun ein Problem auf: Die Tabelle wird zentriert (je nach Auflösung), die Layer bleibt aber an der Stelle, wo ich sie platziert habe (eg: Left:52px Top:350px). Kann man diese Layer irgendwie "verankern", dass sie immer 52px von dem Beginn der Linken Seite der maintable anfängt. Versteht Ihr, was mein Problem ist?
DANKE für Eure Zeit....
"Auch die beste Kamera der Welt ist nur so gut, wie die Frau oder der Mann hinter ihr."
Meine Website
Stichwort: position:relative
Such mal danach im Forum, Du wirst einige Lösungen finden
Gruß Torsten
Meine Bilder im Internet: See the world through my eyes
Aber Vorsicht: Meine Bilder können nicht sprechen
Ich biete keinen privaten Support an!
Fragen oder Probleme? Nur keine Scheu verfasse einen Beitrag
Danke!
Habe jetzt viele Beiträge durchgelesen...?! Das Problem besteht weiterhin. Habe verstanden, dass es etwas mit dem Attribut position: (static, relative, ...) zu tun hat. Muss ich jetzt ein frame in dem Frame erstellen, oder wie? Ich sehe da nicht durch...
Ich will nur eine layer in der Tabelle (align: center), die immer an der gleichen Position innerhalb der Tabelle bleibt, egal, welche Auflösung. Die layer soll mit der table verschoben werden, wenn das geht.
HILFE!!! BITTEE!!!!!
"Auch die beste Kamera der Welt ist nur so gut, wie die Frau oder der Mann hinter ihr."
Meine Website
Wenn Du Layer (Ebenen oder auch DIV-Container) mit Dreamweaver zeichnest, erstellt Dreamweaver den CSS Code für die Ebene mit 'position:absolute'
Will man eine Ebene in einer Tabelle verankern, muss man zum einen den HTML Code der Ebene in der entsprechenden Tabellenzelle positionieren und in der CSS Anweisung für die Ebene das 'position:absolute' abändern in 'position:relative'
Dabei gilt es zu beachten, das die Position der Ebene ab jetzt nicht mehr vom Browserfenster aus zu berechnen ist, sondern von dem Punkt aus wo die Ebene verankert ist, in diesem Fall also eine Tabellenzelle.
Hier ein Bsp.:
PHP-Code:<!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=iso-8859-1" />
<title>Layertest</title>
<style type="text/css">
<!--
#Layer1 {
position:relative;
left:0px;
top:0px;
width:241px;
height:162px;
z-index:1;
background-color: #CCCC00;
}
-->
</style>
</head>
<body>
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="10">
<tr>
<td><div id="Layer1"> </div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Gruß Torsten
Meine Bilder im Internet: See the world through my eyes
Aber Vorsicht: Meine Bilder können nicht sprechen
Ich biete keinen privaten Support an!
Fragen oder Probleme? Nur keine Scheu verfasse einen Beitrag
Aha, ich sehe, was Du meinst...
Danke! Muss noch rumprobieren, bis ich das so hinbekomme. Aber DANKE!!!!
"Auch die beste Kamera der Welt ist nur so gut, wie die Frau oder der Mann hinter ihr."
Meine Website
Viel Spaß heute Nacht
Gruß Torsten
Meine Bilder im Internet: See the world through my eyes
Aber Vorsicht: Meine Bilder können nicht sprechen
Ich biete keinen privaten Support an!
Fragen oder Probleme? Nur keine Scheu verfasse einen Beitrag
So sieht es jetzt aus....PHP-Code:<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Microsoft Sans Serif, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
#Layer1 {
position:relative;
left:100px;
top:114px;
width:241px;
height:162px;
z-index:1;
background-color: #CCCC00;
}
body {
background-color: #FFFFFF;
margin-top: 40px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<table width="800" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="800"><table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="800" height="100"> </td>
</tr>
<tr>
<td width="800" height="200"> </td>
</tr>
<tr>
<td width="800" height="400"><div id="Layer1"> </div></td>
</tr>
</table></td>
</tr>
</table>
<br /><div style="z-index:3" class="smallfont" align="center"><!-- google_ad_section_start(weight=ignore) -->Search Engine Friendly URLs by vBSEO 3.0.0 RC8 ©2007, Crawlability, Inc.<!-- google_ad_section_end --></div></body>
</html>
Alles richtig? Nun kann ich die Ebene frei in der letzten Reihe der Tabelle positionieren, richtig? So verhält es sich dann auch mit mehreren Ebenen (Bilder und Text), oder?
TAUSEND DANK!!!!!!!!!!
"Auch die beste Kamera der Welt ist nur so gut, wie die Frau oder der Mann hinter ihr."
Meine Website
Sieht mal auf den ersten Blick so aus, als ob es funktionieren sollte.Zitat von Nikonisch
Ja es verhält sich genau so mit mehreren Ebenen.
Du musst halt jeder Ebene die in der Tabelle verankert werden soll, eine relative Positionierung zuweisen.
Hast Du schoneinmal daran gedacht, die Tabelle wegzulassen?
Gruß Torsten
Meine Bilder im Internet: See the world through my eyes
Aber Vorsicht: Meine Bilder können nicht sprechen
Ich biete keinen privaten Support an!
Fragen oder Probleme? Nur keine Scheu verfasse einen Beitrag
Hallo, ich bin's nochmal,
ich habe jetzt noch 2 (wenn nicht mehr) Probleme:
1. Die Layers werden immer irgendwo in DW angezeigt. Wenn ich zu FireFox wechsle, sind sie an der "richtigen" Position. Kann ich mir die Layers auch in DW richtig anzeigen lassen?
2. Ich kann die Tabellenhöhe der #main Tabelle nicht mehr festsetzen. Ich will diese auf 550px festlegen. Irgendwie hauen die Layers aber immer dazwischen?! Egal, ob ich die untere Spalte auf 0px setze...
Im Anhang: Quellcode und Bild, wie es bei DW aussieht....
Könnt Ihr mir noch mal helfen? Bitte....
DANKE!!!
PHP-Code:<!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=iso-8859-1" />
<title>Tischlermeister Holger Bloch: Inneneinrichtungen und Möbel</title>
<meta name="Tischlermeister Holger Bloch: Inneneinrichtungen und Möbel" content="Inneneinrichtungen und Möbel, Tischlerei, Tischlermeister, Holger Bloch">
<meta name="robots" content="index,follow">
<style type="text/css">
<!--
body,td,th {
font-family: Microsoft Sans Serif, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
body {
background-color: #dcdcdc;
margin-top: 30px;
background-image: url();
}
a:link {
color: #000000;
}
a:visited {
color: #6f6b66;
}
.style6 {color: #666666}
.style7 {font-weight: bold; font-size: 12px;}
.style8 {font-size: 12px}
#Layer1 {
position:relative;
left:390px;
top:-90px;
width:200px;
height:200px;
z-index:1;
background-color: #FFFFFF;
}
#Layer2 {
position:relative;
left:0px;
top:35px;
width:300px;
height:150px;
z-index:2;
background-color: #FFFFFF;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('/img/banner_home_rolled.jpg','/img/banner_leistungen_rolled.jpg','/img/banner_kontakt_rolled.jpg','/img/banner_impressum_rolled.jpg')">
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor="#FFFFFF" id="main">
<tr>
<td height="550"><table width="600" height="550" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="600" height="0" bgcolor="#FFFFFF"><table width="600" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" height="90" colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="600" height="90" align="top">
<param name="movie" value="flash/banner_top.swf" />
<param name=quality value=high /><param name="LOOP" value="false" />
<embed src="flash/banner_top.swf" width="600" height="90" loop="false" align="top" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object></td>
</tr>
<tr>
<td width="600" height="40" colspan="2"><img src="img/banner_top_down.jpg" alt="holz" width="600" height="40" /></td>
</tr>
<tr>
<td width="150" height="120"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="30"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','/img/banner_home_rolled.jpg',1)"><img src="/img/banner_home.jpg" alt="home" name="home" width="150" height="30" border="0" id="home" /></a></td>
</tr>
<tr>
<td width="150" height="30"><a href="leistungen.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('leistungen','','/img/banner_leistungen_rolled.jpg',1)"><img src="/img/banner_leistungen.jpg" alt="leistungen" name="leistungen" width="150" height="30" border="0" id="leistungen" /></a></td>
</tr>
<tr>
<td width="150" height="30"><a href="kontakt.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('kontakt','','/img/banner_kontakt_rolled.jpg',1)"><img src="/img/banner_kontakt.jpg" alt="kontakt" name="kontakt" width="150" height="30" border="0" id="kontakt" /></a></td>
</tr>
<tr>
<td width="150" height="30"><a href="impressum.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('impressum','','/img/banner_impressum_rolled.jpg',1)"><img src="/img/banner_impressum.jpg" alt="impressum" name="impressum" width="150" height="30" border="0" id="impressum" /></a></td>
</tr>
</table></td>
<td width="450" height="170" rowspan="2"><img src="img/banner_right.jpg" alt="holz" width="450" height="170" /></td>
</tr>
<tr>
<td width="150" height="50"><img src="img/banner_left_down.jpg" alt="holz" width="150" height="50" /></td>
</tr>
</table>
<div id="Layer2"><img src="/img/bild_home_box.jpg" alt="tischlermeister holger bloch" width="300" height="150" /></div> <div id="Layer1"><span class="style6"><span class="style7">Hallo und<br />
Herzlich Willkommen!<br />
<br />
</span><span class="style8"> Hier entsteht gerade<br />
eine neue Website.<br />
<br />
Bitte haben Sie etwas Geduld und schauen Sie bald einmal<br />
wieder rein!<br />
<br />
Sie können mir natürlich auch<br />
eine <a href="mailto:h.bloch@ho-bl.de">E-Mail</a> schicken.<br />
<br />
<em>- holger bloch</em></span></span></div></td>
</tr>
<tr>
<td width="600" height="0" bgcolor="#FFFFFF"> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
"Auch die beste Kamera der Welt ist nur so gut, wie die Frau oder der Mann hinter ihr."
Meine Website
Ok, das Problem mit der Tabellenhöhe hat sich erledigt. Meine Dummheit!Nun nervt mich aber noch, dass die Layers in DW nicht dort angezeigt werden, wo sie dann "wirklich" sind...!! Gibt es da eine Lösung? (Ich denke ja, aber ich bin zu blöd dafür)
DANKE!
"Auch die beste Kamera der Welt ist nur so gut, wie die Frau oder der Mann hinter ihr."
Meine Website
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
