• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Positionierungsproblem einer Grafikbox

S

spike007

Neues Mitglied
Hallo Allerseits !

Ich hoffe Ihr könnt mir weiterhelfen. Und zwar bastel ich gerade an einer Homepage und habe folgendes Problem:

Mein Ziel ist es eine .swf Datei an einer festen Stelle im Headbereich auf der Page zu positionieren.

Das habe ich so realisiert:
<div style="position:absolute;left:687px;top:10px;height:180px; width:600px;z-index:2">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="540" height="180" id="tech" border ="1">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="test1.swf" />
<param name="quality" value="high" />
<embed src="test1.swf" quality="high" width="580" height="180" border="1" name="tech" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="Adobe - Install a different version of Adobe Flash Player" />
</object>
</div>
Zum Vergrößern anklicken....

Über den z-index liegt es auch wie von mir beabsichtigt über der Page.

Meine 2 Probleme sind jetzt aber zum einen, das sich bei Änderung der Browserfenstergröße die Box nicht an die neue Größe des Fensters anpasst und zum anderen das zudem die Mouseover images nicht mehr angezeigt werden.

hier der restliche Teil des Codes:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('Bilder/index_03_over.jpg','Bilder/index_04_over.jpg','Bilder/index_05_over.jpg','Bilder/index_06_over.jpg','Bilder/index_07_over.jpg','Bilder/index_08_over.jpg','Bilder/index_15_over.jpg','Bilder/index_18_over.jpg')">



<table align="center" id="Tabelle_01" width="855" height="901" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="Bilder/index_01.jpg" alt="" width="275" height="205" border="0" usemap="#Map"></td>
<td colspan="8">
<img src="Bilder/index_02.jpg" width="580" height="205" alt=""></td>
</tr>

<tr>
<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','Bilder/index_03_over.jpg',1)"><img src="Bilder/index_03.jpg" alt="Startseite" name="Image29" width="165" height="47" border="0" usemap="#Image29Map"></a></td>
<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','Bilder/index_04_over.jpg',1)"><img src="Bilder/index_04.jpg" alt="Wir über uns" name="Image30" width="132" height="47" border="0" usemap="#Image30Map"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','Bilder/index_05_over.jpg',1)"><img src="Bilder/index_05.jpg" alt="Lieferservice" name="Image31" width="132" height="47" border="0" usemap="#Image31Map"></a></td>
<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','Bilder/index_06_over.jpg',1)"><img src="Bilder/index_06.jpg" alt="Feste & Events" name="Image32" width="131" height="47" border="0" usemap="#Image32Map"></a></td>
<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image33','','Bilder/index_07_over.jpg',1)"><img src="Bilder/index_07.jpg" alt="Unser Sortiment" name="Image33" width="131" height="47" border="0" usemap="#Image33Map"></a></td>
<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image34','','Bilder/index_08_over.jpg',1)"><img src="Bilder/index_08.jpg" alt="Kontakt" name="Image34" width="164" height="47" border="0" usemap="#Image34Map"></a></td>
</tr>
<tr>
<td colspan="11">
<img src="Bilder/index_09.jpg" width="855" height="78" alt=""></td>
</tr>
<tr>
<td>
<img src="Bilder/index_10.jpg" width="58" height="488" alt=""></td>
<td colspan="9">
<img src="Bilder/index_11.jpg" width="726" height="488" alt=""></td>
<td>
<img src="Bilder/index_12.jpg" width="71" height="488" alt=""></td>
</tr>
<tr>
<td colspan="11">
<img src="Bilder/index_13.jpg" width="855" height="11" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="2">
<img src="Bilder/index_14.jpg" width="483" height="35" alt=""></td>
<td colspan="2"><a href="mailto:[email protected]" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image35','','Bilder/index_15_over.jpg',1)"><img src="Bilder/index_15.jpg" alt="Email" name="Image35" width="149" height="23" border="0"></a></td>
<td colspan="3" rowspan="2">
<img src="Bilder/index_16.jpg" width="223" height="35" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="Bilder/index_17.jpg" width="149" height="12" alt=""></td>
</tr>
<tr>
<td colspan="11"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','Bilder/index_18_over.jpg',1)"><img src="Bilder/index_18.jpg" alt="Impressum" name="Image36" width="855" height="36" border="0" usemap="#Image36Map"></a></td>
</tr>
<tr>
<td>
<img src="Bilder/Abstandhalter.gif" width="58" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="107" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="110" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="22" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="132" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="54" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="77" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="72" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="59" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="93" height="1" alt=""></td>
<td>
<img src="Bilder/Abstandhalter.gif" width="71" height="1" alt=""></td>
</tr>
</table>
<map name="Image29Map"><area shape="rect" coords="43,9,158,33" href="index.html" target="_self">
</map>
<map name="Image30Map"><area shape="rect" coords="14,12,123,37" href="wir_ueber_uns.html" target="_self">
</map>
<map name="Image31Map"><area shape="rect" coords="13,12,122,33" href="lieferservice.html" target="_self">
</map>
<map name="Image32Map"><area shape="rect" coords="8,9,127,33" href="feste_und_events.html" target="_self">
</map>
<map name="Image33Map"><area shape="rect" coords="18,11,108,33" href="sortiment.html" target="_self">
</map>
<map name="Image34Map"><area shape="rect" coords="31,12,103,34" href="kontakt.html" target="_self">
</map>
<map name="Image36Map"><area shape="rect" coords="9,8,76,24" href="impressum.html" target="_self">
</map>
<map name="Map"><area shape="rect" coords="44,56,253,138" href="index.html" target="_self">
</map></body>
Zum Vergrößern anklicken....

Ziel soll eigentlich sein, dass die box mit dem swf-file sich an die Browserfenstergröße anpasst, also sich nicht im header verschiebt.( Hat wohl irgendwie mit der position:absolute zu tun, aber wenn ich das attribut entferne wie soll ich sonst der Box eine exakte Position geben?

Und 2. wüsst ich gerne wieso auf einmal die Mouseover_images nicht mehr angezeigt werden.

Besten Dank im Voraus.

LG

spike007
 
div absolute problem

also das problem konnte ich zumindest jetzt genauer eingrenzen.

wenn ich mein table, was die gesammte HP umfasst in einen div packe und dann meine flashbox ebenfalls in ein div, bekomme ich 1. beides nur korrekt übereinander indem ich beide divs mit absolute positioniere, wenn ich aber das flashbox div relative zum tablediv welches absolute ist, setze verscheibt sich das tablediv um die flashboxbreite nach unten und bleibt irgendwie dennoch absolute wenn ich das browserfenster verkleiner ;(

hier der code

HTML: 
<style type="text/css">
#flashbox {
position:absolute;
left:687px;
top:10px;
height:180px;
width:600px;
z-index:2;
}
#tablediv {
z-index:-1
position:absolute;
}
<!--
body {
 background-image: url(Bilder/background3.jpg);
 background-position: center;
 margin: center auto;
 }
-->
 
</style>
</head>
<div id="tablediv">
 
<div id="flashbox">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="540" height="180" id="tech" border ="1">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="test1.swf" />
  <param name="quality" value="high" />
  <embed src="test1.swf" quality="high" name="tech"  allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
 </object> 
</div>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('Bilder/index_03_over.jpg','Bilder/index_04_over.jpg','Bilder/index_05_over.jpg','Bilder/index_06_over.jpg','Bilder/index_07_over.jpg','Bilder/index_08_over.jpg','Bilder/index_15_over.jpg','Bilder/index_18_over.jpg')">
<!-- Save for Web Slices (Home_neueButtons_sliced_over.psd) -->
<table align="center" id="Tabelle_01" width="855" height="901" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="3">
   <img src="Bilder/index_01.jpg" alt="" width="275" height="205" border="0" usemap="#Map"></td>
  <td colspan="8">
   <img src="Bilder/index_02.jpg" width="580" height="205" alt=""></td>
 </tr>
</div>
 <tr>
  <td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','Bilder/index_03_over.jpg',1)"><img src="Bilder/index_03.jpg" alt="Startseite" name="Image29" width="165" height="47" border="0" usemap="#Image29Map"></a></td>
  <td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','Bilder/index_04_over.jpg',1)"><img src="Bilder/index_04.jpg" alt="Wir über uns" name="Image30" width="132" height="47" border="0" usemap="#Image30Map"></a></td>
  <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','Bilder/index_05_over.jpg',1)"><img src="Bilder/index_05.jpg" alt="Lieferservice" name="Image31" width="132" height="47" border="0" usemap="#Image31Map"></a></td>
  <td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','Bilder/index_06_over.jpg',1)"><img src="Bilder/index_06.jpg" alt="Feste & Events" name="Image32" width="131" height="47" border="0" usemap="#Image32Map"></a></td>
  <td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image33','','Bilder/index_07_over.jpg',1)"><img src="Bilder/index_07.jpg" alt="Unser Sortiment" name="Image33" width="131" height="47" border="0" usemap="#Image33Map"></a></td>
  <td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image34','','Bilder/index_08_over.jpg',1)"><img src="Bilder/index_08.jpg" alt="Kontakt" name="Image34" width="164" height="47" border="0" usemap="#Image34Map"></a></td>
 </tr>
 <tr>
  <td colspan="11">
   <img src="Bilder/index_09.jpg" width="855" height="78" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="Bilder/index_10.jpg" width="58" height="488" alt=""></td>
  <td colspan="9">
   <img src="Bilder/index_11.jpg" width="726" height="488" alt=""></td>
  <td>
   <img src="Bilder/index_12.jpg" width="71" height="488" alt=""></td>
 </tr>
 <tr>
  <td colspan="11">
   <img src="Bilder/index_13.jpg" width="855" height="11" alt=""></td>
 </tr>
 <tr>
  <td colspan="6" rowspan="2">
   <img src="Bilder/index_14.jpg" width="483" height="35" alt=""></td>
  <td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image35','','Bilder/index_15_over.jpg',1)"><img src="Bilder/index_15.jpg" alt="Email" name="Image35" width="149" height="23" border="0"></a></td>
  <td colspan="3" rowspan="2">
   <img src="Bilder/index_16.jpg" width="223" height="35" alt=""></td>
 </tr>
 <tr>
  <td colspan="2">
   <img src="Bilder/index_17.jpg" width="149" height="12" alt=""></td>
 </tr>
 <tr>
  <td colspan="11"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','Bilder/index_18_over.jpg',1)"><img src="Bilder/index_18.jpg" alt="Impressum" name="Image36" width="855" height="36" border="0" usemap="#Image36Map"></a></td>
 </tr>
 <tr>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="58" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="107" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="110" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="22" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="132" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="54" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="77" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="72" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="59" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="93" height="1" alt=""></td>
  <td>
   <img src="Bilder/Abstandhalter.gif" width="71" height="1" alt=""></td>
 </tr>
</table>
</div>

Danke für jede Hilfe im Voraus !
 
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (z-index:-1) hinter deren Elternelement (Box C, deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird) und weicht damit von Opera und Internet Explorer ab, die Nachfahren nicht hinter dem kontexterzeugenden Element selbst darstellen. Diese Vorgangsweise entspricht CSS2, während die beiden letztgenannten Browser in diesem Zusammenhang bereits die Spezifikation gemäß CSS 2.1 umsetzen.
Zum Vergrößern anklicken....
wie wird es denn im IE angezeigt? oder sollen die DIVs sich gar nicht überlappen? dann können die z-indices ja weg.
 
ich nutze nur den internet explorer, sprich das problem tritt dort ja auf ;) und ja sie sollen sich überlappen, nur klappt das überlappen eben nur wenn ich beide divs absolute setze, obwohl ich auch schon für mein eigentliches problem, dass der flashdiv sich der browserfenstergröße mit anpassen soll, tutorials gesehen habe wo eben genau wegen dieser problematik man den flashdiv absolute setzt und den anderen div eben relative, nur bei mir klappts irgendwie nicht ka warum ;(
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben