Hallo,
ich setze mich gerade mit den Positionierungen in CSS auseinandern. Bis dato komme ich mit "position:absolute" gut klar, jedoch verschieben sich die nachfolgenden Elemente nach Einfügen einer SWF-Datei immer nur relativ, dabei soll es doch so sein, dass absolute Positionierung sich immer unabhängig verhalten?
Hier meine format.css:
PHP-Code:
*{ margin:10; padding:0;}
html { background-color:#CCCCCC;}
body { width:760px;}
img { border:0px;}
a:link {color:#FFFFFF; text-decoration:none}
a:visited {color:#FFFFFF; text-decoration:none}
a:hover {font-weight:bold; color:#FFFFFF; text-decoration:none}
a:active {font-weight:bold;color:#FFFFFF; text-decoration:none}
a:focus {color:#FFFFFF1; text-decoration:none}
#hintergrund { min-height:600px; background-color:#FFFFFF; width:756px; height:auto; border: 1px solid #666666; z-index:1; }
#home { font-family:verdana; font-weight:bold; font-size:12px; text-align:center; background-color:#666666; color:#000000; position:absolute; visibility:visible; border-bottom: 9px solid #666666; z-index: 7; height: 40px; width: 126px; }
#free { font-family:verdana; font-weight:bold; font-size:12px; text-align:center; background-color:#0093D3; color:#FFFFFF; position:absolute; visibility:visible; border-bottom: 1px solid #0093D3; z-index: 6; height: 40px; width: 126px; margin-left: 126px; }
#print { font-family:verdana; font-weight:bold; font-size:12px; text-align:center; background-color:#CC006B; color:#FFFFFF; position:absolute; visibility:visible; border-bottom: 1px solid #CC006B; z-index: 5; height: 40px; width: 126px; margin-left: 252px; }
#web { font-family:verdana; font-weight:bold; font-size:12px; text-align:center; background-color:#FDD518; color:#FFFFFF; position:absolute; visibility:visible; border-bottom: 1px solid #FDD518; z-index: 4; height: 40px; width: 126px; margin-left: 378px; }
#concept { font-family:verdana; font-weight:bold; font-size:12px; text-align:center; background-color:#000000; color:#FFFFFF; position:absolute; visibility:visible; border-bottom: 1px solid #000000; z-index: 3; height: 40px; width: 126px; margin-left: 504px; }
#refs { font-family:verdana; font-weight:bold; font-size:12px; text-align:center; background-color:#666666; color:#FFFFFF; position:absolute; visibility:visible; border-bottom: 1px solid #666666; z-index: 2; height: 40px; width: 126px; margin-left: 630px; }
#logo {margin-left:30px ; z-index:8; margin-top:50px; }
#head { position: absolute; visibility:visible; font-family:verdana; font-weight:bold; font-size:16px; color:#000000; margin-top:70px; margin-left:380px; width:320px; z-index:9;}
#subhead { position: absolute; visibility:visible; font-family:verdana; font-weight:normal; font-weight:bold; font-size:12px; color: #333333; margin-top:400px; margin-left:380px; width:320px; z-index:10;}
#fliesstxt { position: absolute; visibility:visible; font-family:verdana; font-weight:normal; font-size:10px; color:#000000; margin-top:4500px; margin-left:380px; width:320px; z-index:11;}
Hier die html
PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>www.gutgeloest.de</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="css/format_home.css" />
<script src="js/ebenen.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="hintergrund">
<div id="home"><br /><a href="index.html" target="_parent">Startseite</a></div>
<div id="free"><br /><a href="index.html" target="_parent">Freelancing</a></div>
<div id="print"><br /><a href="index.html" target="_parent">Print</a></div>
<div id="web"><br /><a href="index.html" target="_parent">Webdesign</a></div>
<div id="concept"><br /><a href="index.html" target="_parent">Concept</a></div>
<div id="refs"><br /><a href="index.html" target="_parent">Referenzen</a></div>
<div id="logo">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','300','height','280','title','gglogoani','src','swf/gg_ani','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','swf/gg_ani' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="280" title="gglogoani">
<param name="movie" value="swf/gg_ani.swf" />
<param name="quality" value="high" />
<embed src="swf/gg_ani.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="280"></embed>
</object>
</noscript></div>
<div id="head">...is coming soon!</div>
<div id="subhead">Bald gibt´s mehr</div>
<div id="fliesstxt">bla</div>
</div>
</body>
</html>
Die ungewollte Verschiebung findet bei head, subhead, fliesstxt statt...
Danke für die Hilfe.
11-07-2007, 20:44
Linear-Darstellung
