✔ Bilder überlagern

T

tandalier

Grünschnabel
Ich plage mich nun bereits seit über einem Tag und langsam aber doch hab ich den Faden verloren.
ZIel ist es im Header Bilder als Slideshow abspielen zu lassen, die aber dabei noch von einem anderen Headerteil überlagert werden. Hab es nun zwar geschafft, dass es im Firefox 3.5.3 so aussieht wie ich es will, doch im Internet Exoplorer 8.0.6001.18702
ist das Bild nach rechts verschoben.

Da ich mittlerweile nicht mehr weiter weiß, frag ich einfach euch mal und hoffe, dass mir jemand helfen kann. Ich hoffe es schimpft niemand, dass mein Code nicht perfekt aussieht. Bin hier aber für jede Hilfe sehr dankbar.

Die Seite ist sichtbar unter http://yougame.at/test2/test.html
 
Hi,

ich kann da im IE (6,7,8) keinen Unterschied zum FF (2.x,3.0.x,3.5.x) entdecken.

Was auffällt, ist der Umstand, dass das Bild (mario1.jpg, mario2.jpg) beim horizontalen Skalieren des Browserfensters in allen gängigen Browsern (FF, IE, Opera, Safari) in seiner Ausgangsposition verharrt, und lediglich das "darunter- /darüberliegende" DIV "graphismeshaut" im Viewport verschoben wird.

Um dies zu vermeiden, sollte die "Galerie" in diesem Block eingebettet werden. So dürfte sich dann das verschobene Bild zurechtrücken lassen.

mfg Maik
 
Vielleicht entspricht dies so deiner Vorstellung:
HTML: 
<html>
<head>
<script src="http://yougame.at/test2/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="http://yougame.at/test2/scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="http://yougame.at/test2/scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yougame.at/test2/css/yougame.css" type="text/css" media="screen">
<link rel="stylesheet" href="http://yougame.at/test2/css/jd.gallery.css" type="text/css" media="screen">
<style type="text/css">
<!--
#myGallery, #myGallerySet
{
        left:260px; /* vorgenommene Positionskorrektur */
        z-index:0; /* Schichtposition nach unten setzen */
}
-->
</style>
<script type="text/javascript">
        function startGallery() {
        var myGallery = new gallery($('myGallery'), {
        timed: true,
        showArrows: false,
        showCarousel: false
        });
        }
        window.addEvent('domready', startGallery);
</script>
</head>
<body>

<div class="graphismeshaut">
        <div style="position:absolute; left:0px; top:0px; width:245px; height:103px; z-index:2; ">
             <a href="" class="nono"><img src="http://yougame.at/test2/img/head_l.gif" style="width: 245px; height: 103px; border: 0;" alt=""         class="nono"></a>
        </div>
        <div style="position:absolute; left:500px; top:0px; width:500px; height:103px; z-index:2;">
             <img src="http://yougame.at/test2/img/head_back.gif" width="500" height="103" alt="">
        </div>
        <div style="position:absolute; left:245px; top:0px; width:257px; height:103px; z-index:2;">
             <img src="http://yougame.at/test2/img/head_r.gif" width=257 height=103 alt="">
        </div>
        <div style="position:absolute; left:515px; top:10px; width:468px; height:103px; z-index:2;">
             google-ads
        </div>
        <div id="myGallery">
             <div class="imageElement">
                  <h3>Item 1 Title</h3>
                  <p>Item 2 Description</p>
                  <a href="mypage1.html" title="open image" class="open"></a>
                  <img src="http://yougame.at/test2/images/mario1.jpg" class="full">
                  <img src="mario2.jpg" class="thumbnail">
             </div>
             <div class="imageElement">
                  <h3>Item 2 Title</h3>
                  <p>Item 2 Description</p>
                  <a href="mypage2.html" title="open image" class="open"></a>
                  <img src="http://yougame.at/test2/images/mario2.jpg" class="full">
                  <img src="mario2.jpg" class="thumbnail">
             </div>
        </div>
</div>

<table align=center width=1000 valign=top border="0" cellpadding="0" cellspacing="0">
       <tr height=103><td></td></tr>
       <tr style="background-color:#000000;"><td>blabal</td></tr>
</table>

</body>
</html>


mfg Maik
 
ja genau das war das Problem...
Hatte anscheinend verschieden große Fenster im FF und IE, weshalb sich das im IE verschoben hat.

Aber vielen, vielen Dank für die Hilfe. Hast mir sehr geholfen.
 
so eine letzte Frage hätt ich noch.

weißt du, wie es möglich ist, den kleinen untertext mit z.b. "item 2 title" nach vorne zu schieben. dürte doch auch nur am z-index liegen, wenn ich es richtig versteh, hab aber anscheinend keinen plan, dies richtig umzusetzen. hab das schon in alle richtungen versucht zu verändern...
 
Wohin "nach vorne" soll das relevante <h3>-Element denn wandern?

Ich frag nur, weil es in der Schichtposition schon über dem Bild sitzt.

mfg Maik
 
naja ich hab beide Versionen jetzt auf meinem Server. (den schwarzen balken kannst du vergessen)

http://yougame.at/test2/test.html
http://yougame.at/test2/test2.html

Test 2 ist deine Version mit perfekter Umsetzung, Test 1 meine. In Test 1, kann man aber den kleinen Bereich anklicken, da ist ein Link drübergelegt. In Test 2 scheint aber das Bild mit dem Bogen drüberzuliegen und den Link unanklickbar machen. Ich hoff ich hab mich richtig ausgedrückt.

Bin mir auch nicht sicher, ob man sich da mit der css spielen muss oder doch mit dem Script...

liebste grüße
tandalier
 
Die Galerie wird nun von diesem Container überdeckt, da sie sich hinter / unter dessen eingebetteten Grafikelement befinden soll:
HTML: 
<div style="position: absolute; left: 245px; top: 0px; width: 257px; height: 103px; z-index: 2;">
       <img width="257" height="103" alt="" src="http://yougame.at/test2/img/head_r.gif">
</div>


Die Lösung sieht so aus, diese Grafik in drei Teile (geschwungenes Objekt, Rahmen oben, Rahmen unten) aufzuteilen, damit dieser Container nicht mehr die gesamte Breite der Galerie überdeckt, sondern der relevante Bereich ausgespart und von den drei Containern "umrahmt" wird.

Hab's hier mal mit der Grafik als entsprechend positioniertes Hintergrundbild für die drei Container umgesetzt:
HTML: 
<div style="position:absolute; left:245px; top:0px; width:120px; height:103px; z-index:2; overflow:hidden; background:url(http://yougame.at/test2/img/head_r.gif);"></div>
<div style="position:absolute; left:365px; top:0px; width:137px; height:1px; z-index:2; overflow:hidden; background:url(http://yougame.at/test2/img/head_r.gif) -120px 0;"></div>
<div style="position:absolute; left:365px; top:92px; width:137px; height:11px; z-index:2; overflow:hidden; background:url(http://yougame.at/test2/img/head_r.gif) -120px -92px;"></div>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück