Antworten auf deine Fragen:
Neues Thema erstellen

brauche Hilfe zur Kompilierung einer HP für IE

M

masterb44hz

Lernender

Hallo :)

Ich habe ein ziemlich dickes (zumindest für mich) Problem. In Firefox steht die Seite wie sie sein soll, aber IE 6 will nicht wie Firefox. Beim einrichten für IE schiebt sich nun jedoch das 2. BG bild über einen Link, sodass der nicht mehr begangbar ist. Aber macht euch am besten selbst mal ein Bild: yougend.de

Hier sind nun die index.php und die style.css:

index.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=utf-8" />
<title>Forum - Für junge Christen in Lippe</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="Scripts/hover.js" type="text/javascript"></script>
</head>

<body class="style">
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
#logo img, #bg img, #videobg img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
#logo {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png');
    z-index:2;
    padding-left:-300px;
    display: inline-block;
}
#videobg {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hintervideo.png');
    display: inline-block;
    margin-top:-1000px;
}
#bg {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.png',sizingMethod='scale');
    z-index:1;
    margin-top:-502px;
    display: inline-block;
}
#forumpromo {
    margin-top: -1000px;}
    
</style>
<![endif]>
<![endif]-->


<div id="logo" style="height:397; width:78;">
    <a href="index.php" onmouseover="lightup('pic1')" onmouseout="turnoff('pic1')">
    <img src="images/logo.png" alt="logo" name="pic1" width="78" height="397" border="0" /></a>
</div>

<div id="bg" style="height:100%; width:100%;">
    <img src="images/bg.png" width="100%" height="100%" alt="bg" />
</div>

<div id="videobg" style="height:672; width:841;">
    <img src="images/hintervideo.png" alt="vidbg" />
</div>

<div id="forumpromo">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don?t want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="640" height="480">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="scale" value="noscale" />
      <param name="salign" value="lt" />
      <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
      <param name="swfversion" value="8,0,0,0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>
</div>

<div id="copyright">
    <p>&copy; yougend.de 2009</p>
    </div>
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>
</body>
</html>
style.css
Code: 
@charset "utf-8";

html {
    height:100%;
}

body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background-color:#6d9fd1;
    background: url(../images/bg.gif);
    height:100%;
    margin: 0; 
    padding: 0;
    text-align: center;
}

.style #bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-4;
}

.style #videobg {
    margin-left:17%;
    margin-top:-2%;
    position:fixed;
    z-index:-3;
}    

.style #logo {
    margin-left:15%;
    margin-top:8%;
    position:fixed;
    z-index:1;
}
.style #forumpromo {
    margin-left:25%;
    margin-top:5%;
    position:fixed;
}

.style #copyright {
    font: 100% Kartika;
    color:#09396a;
    text-align: center;
    position:absolute;
    padding-left:47%;
    padding-top:45%;
    z-index:-2;

}
Der Code ist vllt nicht der schönste, aber ich bin ja noch Codeanfänger ;)

Hoffe ihr könnt mir irgendwie helfen.

Danke :) und Gruß
 

T

Top_Gun

Aktives Mitglied

AW: brauche Hilfe zur Kompilierung einer HP für IE

So spontan geraten ist es das position:fixed mit dem der IE nicht umgehen kann... außerdem weiß ich nicht wieso du mit dem z-index arbeitest...

Die Seite kann ich mir leider nicht richtig anschauen da mir der FlashPlayer fehlt...
 
M

masterb44hz

Lernender

AW: brauche Hilfe zur Kompilierung einer HP für IE

das mit dem flashplayer ist eher unwichtig. mit z-index arbeite ich, weil ich dadurch die Bilder in einer vernünftige Reihenfolge bringen wollte, ist das nicht sinnvoll? Hatte vorher glaube Probleme mit der Reihenfolge, von daher. position:fixed würde ja in dem If teil umgangen werden, oder?
 
T

Top_Gun

Aktives Mitglied

AW: brauche Hilfe zur Kompilierung einer HP für IE

Nein, dein If Teil bezieht sich ausschließlich auf den Internet Explorer in den Versionen zwischen 5.5 und 7.0 das ist ja gerade der IE6 der damit nicht kann...

Und für das was du machen möchtest brauchst du den z-index nicht... gib mir mal nen moment Zeit ich zeig dir wie es besser geht...

EDIT: Wargh ich hab die Zeit vergessen... Hier mein jetziger Stand:
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=utf-8" />
<title>Forum - Für junge Christen in Lippe</title>


<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="Scripts/hover.js" type="text/javascript"></script>
-->
</head>

<body>

<div id="wrapper">
<div id="logo">
    <a href="index.php" onmouseover="lightup('pic1')" onmouseout="turnoff('pic1')"><img src="http://www.psd-tutorials.de/modules/Forum/images/logo.png" alt="logo" name="pic1" width="78" height="397" border="0" /></a>
</div>

<div id="forumpromo">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="640" height="480">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="scale" value="noscale" />
      <param name="salign" value="lt" />
      <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
      <param name="swfversion" value="8,0,0,0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>
</div>

<div id="copyright">
    <p>&copy; yougend.de 2009</p>
</div>
</div>
    
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>

</body>
</html>
Code: 
* {
    margin:0;
    padding:0;
}

body {
    background-color:#6d9fd1;
    background-image: url(../images/bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    height:100%;
    width:100%;
    text-align: center;
}

#logo {
    float:left;
    text-align: center;
}

#forumpromo {
    background-image: url(../images/hintervideo.png);
    background-position: center center;
    background-repeat: no-repeat;
}

#copyright {
    font: 100% Kartika;
    color:#09396a;
    text-align: center;
    clear:both;
}
Was muss noch gemacht werden?
- Wrapper vertikal zentrieren (schau mal in die Signatur von Herr_D ob du das selbst hinbekommst)
- Logo ausrichten
- Dir erklären, dass man auf meine Art das bg.png nicht strecken kann ;)

Ich weiß nicht wann ich heute abend wieder Zeit habe, setze mich dann aber wieder da dran... sorry
 
Zuletzt bearbeitet:
M

masterb44hz

Lernender

AW: brauche Hilfe zur Kompilierung einer HP für IE

Hey cool danke erstmal für deine Zeit und Mühe :)

gucke mir das gleich mal an. Mmh das mit dem bg.png sollte aber schon irgendwie funzen.. mal sehen ^^

melde mich nachher nochmal.
 
T

Top_Gun

Aktives Mitglied

AW: brauche Hilfe zur Kompilierung einer HP für IE

So bin gerade wieder im Forum angekommen. Kann jetzt noch bissl schrauben...

In dem oben genannten Beispiel musst du das JS wieder einkommentieren, das hatte ich rausgenommen um es lokal zu testen...

Also wenn das mit dem Hintergrundbild tatsächlich ein Muss ist, dass es gestreckt wird, dann führt doch kein Weg um den z-index drum herum. Das wird dann aber komplizierter ;)
 
M

masterb44hz

Lernender

AW: brauche Hilfe zur Kompilierung einer HP für IE

dann erzähl :p

Edit: du hast das bg.png als body background genommen.. ist der verlauf denn jetzt noch mit drin? oder ist der raus?
 
Zuletzt bearbeitet:
T

Top_Gun

Aktives Mitglied

AW: brauche Hilfe zur Kompilierung einer HP für IE

öhm Verlauf? Ich dachte ich hätte alle Bilder mit drin...

Gib mir nochmal nen moment Zeit (diesmal hab ich auch keinen Termin mehr ;)) dann probier ich nochmal was...

So, nachdem ich jetzt auch den Verlauf gefunden habe, habe ich das mal zusammengebastelt:
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=utf-8" />
<title>Forum - Für junge Christen in Lippe</title>


<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="Scripts/hover.js" type="text/javascript"></script>
</head>

<body>
<img src="http://www.psd-tutorials.de/modules/Forum/images/bg.png" id="bg" />

<div id="overlay">
<div id="wrapper">
<div id="logo">
    <a href="index.php" onmouseover="lightup('pic1')" onmouseout="turnoff('pic1')"><img src="http://www.psd-tutorials.de/modules/Forum/images/logo.png" alt="logo" name="pic1" width="78" height="397" border="0" /></a>
</div>

<div id="forumpromo">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="640" height="480">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="scale" value="noscale" />
      <param name="salign" value="lt" />
      <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
      <param name="swfversion" value="8,0,0,0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>
</div>

<div id="copyright">
    <p>&copy; yougend.de 2009</p>
</div>
</div>
</div>

<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>

</body>
</html>
Code: 
* {
    margin:0;
    padding:0;
}

body {
    background-color:#6d9fd1;
    background-image: url(../images/bg.gif);
    height:100%;
    width:100%;
    text-align: center;
}

#bg {
    height:100%;
    width:100%;
    border:none;
}

#overlay {
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    text-align: center;
}

#wrapper {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-462px;
    margin-top:-337px;
    height:674px;
    width:924px;
}

#logo {
    float:left;
    text-align: center;
    height:397px;
    width:78px;
}

#forumpromo {
    background-image: url(../images/hintervideo.png);
    background-position: center center;
    background-repeat: no-repeat;
    height:672px;
    width:842px;
    text-align: center;
}

#copyright {
    font: 100% Kartika;
    color:#09396a;
    text-align: center;
    clear:both;
}
Sag mal ob du damit zu frieden bist...

EDIT: du musst in dem HTML-Code die Bildpfade anpassen, das Forum wandelt die automatisch um...
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 160 (Mitglieder: 3, Gäste: 157)
Robots: 578

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben