Anzeige

brauche Hilfe zur Kompilierung einer HP für IE

brauche Hilfe zur Kompilierung einer HP für IE | PSD-Tutorials.de

Erstellt von masterb44hz, 24.02.2009.

  1. masterb44hz

    masterb44hz Lernender

    Dabei seit:
    22.11.2008
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Adobe Webdesign Palette, C4D
    Kameratyp:
    Digicam irgend eine Canon ^^
    brauche Hilfe zur Kompilierung einer HP für IE
    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 (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Forum - Für junge Christen in Lippe</title>
    6. <link href="css/style.css" rel="stylesheet" type="text/css" />
    7. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    8. <script src="Scripts/hover.js" type="text/javascript"></script>
    9. </head>
    10.  
    11. <body class="style">
    12. <!--[if gte IE 5.5]>
    13. <![if lt IE 7]>
    14. <style type="text/css">
    15. #logo img, #bg img, #videobg img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
    16. #logo {
    17.     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png');
    18.     z-index:2;
    19.     padding-left:-300px;
    20.     display: inline-block;
    21. }
    22. #videobg {
    23.     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hintervideo.png');
    24.     display: inline-block;
    25.     margin-top:-1000px;
    26. }
    27. #bg {
    28.     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.png',sizingMethod='scale');
    29.     z-index:1;
    30.     margin-top:-502px;
    31.     display: inline-block;
    32. }
    33. #forumpromo {
    34.     margin-top: -1000px;}
    35.    
    36. </style>
    37. <![endif]>
    38. <![endif]-->
    39.  
    40.  
    41. <div id="logo" style="height:397; width:78;">
    42.     <a href="index.php" onmouseover="lightup('pic1')" onmouseout="turnoff('pic1')">
    43.     <img src="images/logo.png" alt="logo" name="pic1" width="78" height="397" border="0" /></a>
    44. </div>
    45.  
    46. <div id="bg" style="height:100%; width:100%;">
    47.     <img src="images/bg.png" width="100%" height="100%" alt="bg" />
    48. </div>
    49.  
    50. <div id="videobg" style="height:672; width:841;">
    51.     <img src="images/hintervideo.png" alt="vidbg" />
    52. </div>
    53.  
    54. <div id="forumpromo">
    55. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480" id="FLVPlayer">
    56.     <param name="movie" value="FLVPlayer_Progressive.swf" />
    57.     <param name="quality" value="high" />
    58.     <param name="wmode" value="opaque" />
    59.     <param name="scale" value="noscale" />
    60.     <param name="salign" value="lt" />
    61.     <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
    62.     <param name="swfversion" value="8,0,0,0" />
    63.     <!-- 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. -->
    64.     <param name="expressinstall" value="Scripts/expressInstall.swf" />
    65.     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    66.     <!--[if !IE]>-->
    67.     <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="640" height="480">
    68.       <!--<![endif]-->
    69.       <param name="quality" value="high" />
    70.       <param name="wmode" value="opaque" />
    71.       <param name="scale" value="noscale" />
    72.       <param name="salign" value="lt" />
    73.       <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
    74.       <param name="swfversion" value="8,0,0,0" />
    75.       <param name="expressinstall" value="Scripts/expressInstall.swf" />
    76.       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    77.       <div>
    78.         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
    79.         <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>
    80.       </div>
    81.       <!--[if !IE]>-->
    82.     </object>
    83.     <!--<![endif]-->
    84. </object>
    85. </div>
    86.  
    87. <div id="copyright">
    88.     <p>&copy; yougend.de 2009</p>
    89.     </div>
    90. <script type="text/javascript">
    91. <!--
    92. swfobject.registerObject("FLVPlayer");
    93. //-->
    94. </script>
    95. </body>
    96. </html>
    style.css
    Code (Text):
    1. @charset "utf-8";
    2.  
    3. html {
    4.     height:100%;
    5. }
    6.  
    7. body {
    8.     font: 100% Verdana, Arial, Helvetica, sans-serif;
    9.     background-color:#6d9fd1;
    10.     background: url(../images/bg.gif);
    11.     height:100%;
    12.     margin: 0;
    13.     padding: 0;
    14.     text-align: center;
    15. }
    16.  
    17. .style #bg {
    18.     position:fixed;
    19.     top:0;
    20.     left:0;
    21.     width:100%;
    22.     height:100%;
    23.     z-index:-4;
    24. }
    25.  
    26. .style #videobg {
    27.     margin-left:17%;
    28.     margin-top:-2%;
    29.     position:fixed;
    30.     z-index:-3;
    31. }    
    32.  
    33. .style #logo {
    34.     margin-left:15%;
    35.     margin-top:8%;
    36.     position:fixed;
    37.     z-index:1;
    38. }
    39. .style #forumpromo {
    40.     margin-left:25%;
    41.     margin-top:5%;
    42.     position:fixed;
    43. }
    44.  
    45. .style #copyright {
    46.     font: 100% Kartika;
    47.     color:#09396a;
    48.     text-align: center;
    49.     position:absolute;
    50.     padding-left:47%;
    51.     padding-top:45%;
    52.     z-index:-2;
    53.  
    54. }
    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ß
     
    #1      
  2. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    brauche Hilfe zur Kompilierung einer HP für IE
    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...
     
    #2      
  3. masterb44hz

    masterb44hz Lernender

    Dabei seit:
    22.11.2008
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Adobe Webdesign Palette, C4D
    Kameratyp:
    Digicam irgend eine Canon ^^
    brauche Hilfe zur Kompilierung einer HP für IE
    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?
     
    #3      
  4. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    brauche Hilfe zur Kompilierung einer HP für IE
    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 (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Forum - Für junge Christen in Lippe</title>
    6.  
    7.  
    8. <link href="css/style.css" rel="stylesheet" type="text/css" />
    9. <!--
    10. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    11. <script src="Scripts/hover.js" type="text/javascript"></script>
    12. -->
    13. </head>
    14.  
    15. <body>
    16.  
    17. <div id="wrapper">
    18. <div id="logo">
    19.     <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>
    20. </div>
    21.  
    22. <div id="forumpromo">
    23. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480" id="FLVPlayer">
    24.     <param name="movie" value="FLVPlayer_Progressive.swf" />
    25.     <param name="quality" value="high" />
    26.     <param name="wmode" value="opaque" />
    27.     <param name="scale" value="noscale" />
    28.     <param name="salign" value="lt" />
    29.     <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
    30.     <param name="swfversion" value="8,0,0,0" />
    31.     <!-- 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. -->
    32.     <param name="expressinstall" value="Scripts/expressInstall.swf" />
    33.     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    34.     <!--[if !IE]>-->
    35.     <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="640" height="480">
    36.       <!--<![endif]-->
    37.       <param name="quality" value="high" />
    38.       <param name="wmode" value="opaque" />
    39.       <param name="scale" value="noscale" />
    40.       <param name="salign" value="lt" />
    41.       <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
    42.       <param name="swfversion" value="8,0,0,0" />
    43.       <param name="expressinstall" value="Scripts/expressInstall.swf" />
    44.       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    45.       <div>
    46.         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
    47.         <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>
    48.       </div>
    49.       <!--[if !IE]>-->
    50.     </object>
    51.     <!--<![endif]-->
    52. </object>
    53. </div>
    54.  
    55. <div id="copyright">
    56.     <p>&copy; yougend.de 2009</p>
    57. </div>
    58. </div>
    59.    
    60. <script type="text/javascript">
    61. <!--
    62. swfobject.registerObject("FLVPlayer");
    63. //-->
    64. </script>
    65.  
    66. </body>
    67. </html>
    Code (Text):
    1. * {
    2.     margin:0;
    3.     padding:0;
    4. }
    5.  
    6. body {
    7.     background-color:#6d9fd1;
    8.     background-image: url(../images/bg.png);
    9.     background-position: center center;
    10.     background-repeat: no-repeat;
    11.     height:100%;
    12.     width:100%;
    13.     text-align: center;
    14. }
    15.  
    16. #logo {
    17.     float:left;
    18.     text-align: center;
    19. }
    20.  
    21. #forumpromo {
    22.     background-image: url(../images/hintervideo.png);
    23.     background-position: center center;
    24.     background-repeat: no-repeat;
    25. }
    26.  
    27. #copyright {
    28.     font: 100% Kartika;
    29.     color:#09396a;
    30.     text-align: center;
    31.     clear:both;
    32. }
    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: 24.02.2009
    #4      
  5. masterb44hz

    masterb44hz Lernender

    Dabei seit:
    22.11.2008
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Adobe Webdesign Palette, C4D
    Kameratyp:
    Digicam irgend eine Canon ^^
    brauche Hilfe zur Kompilierung einer HP für IE
    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.
     
    #5      
  6. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    brauche Hilfe zur Kompilierung einer HP für IE
    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 ;)
     
    #6      
  7. masterb44hz

    masterb44hz Lernender

    Dabei seit:
    22.11.2008
    Beiträge:
    76
    Geschlecht:
    männlich
    Software:
    Adobe Webdesign Palette, C4D
    Kameratyp:
    Digicam irgend eine Canon ^^
    brauche Hilfe zur Kompilierung einer HP für IE
    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: 24.02.2009
    #7      
  8. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    brauche Hilfe zur Kompilierung einer HP für IE
    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 (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Forum - Für junge Christen in Lippe</title>
    6.  
    7.  
    8. <link href="css/style.css" rel="stylesheet" type="text/css" />
    9. <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    10. <script src="Scripts/hover.js" type="text/javascript"></script>
    11. </head>
    12.  
    13. <body>
    14. <img src="http://www.psd-tutorials.de/modules/Forum/images/bg.png" id="bg" />
    15.  
    16. <div id="overlay">
    17. <div id="wrapper">
    18. <div id="logo">
    19.     <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>
    20. </div>
    21.  
    22. <div id="forumpromo">
    23. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480" id="FLVPlayer">
    24.     <param name="movie" value="FLVPlayer_Progressive.swf" />
    25.     <param name="quality" value="high" />
    26.     <param name="wmode" value="opaque" />
    27.     <param name="scale" value="noscale" />
    28.     <param name="salign" value="lt" />
    29.     <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
    30.     <param name="swfversion" value="8,0,0,0" />
    31.     <!-- 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. -->
    32.     <param name="expressinstall" value="Scripts/expressInstall.swf" />
    33.     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    34.     <!--[if !IE]>-->
    35.     <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="640" height="480">
    36.       <!--<![endif]-->
    37.       <param name="quality" value="high" />
    38.       <param name="wmode" value="opaque" />
    39.       <param name="scale" value="noscale" />
    40.       <param name="salign" value="lt" />
    41.       <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_3&amp;streamName=PromoForum&amp;autoPlay=true&amp;autoRewind=false" />
    42.       <param name="swfversion" value="8,0,0,0" />
    43.       <param name="expressinstall" value="Scripts/expressInstall.swf" />
    44.       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    45.       <div>
    46.         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
    47.         <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>
    48.       </div>
    49.       <!--[if !IE]>-->
    50.     </object>
    51.     <!--<![endif]-->
    52. </object>
    53. </div>
    54.  
    55. <div id="copyright">
    56.     <p>&copy; yougend.de 2009</p>
    57. </div>
    58. </div>
    59. </div>
    60.  
    61. <script type="text/javascript">
    62. <!--
    63. swfobject.registerObject("FLVPlayer");
    64. //-->
    65. </script>
    66.  
    67. </body>
    68. </html>
    Code (Text):
    1. * {
    2.     margin:0;
    3.     padding:0;
    4. }
    5.  
    6. body {
    7.     background-color:#6d9fd1;
    8.     background-image: url(../images/bg.gif);
    9.     height:100%;
    10.     width:100%;
    11.     text-align: center;
    12. }
    13.  
    14. #bg {
    15.     height:100%;
    16.     width:100%;
    17.     border:none;
    18. }
    19.  
    20. #overlay {
    21.     position: absolute;
    22.     top:0;
    23.     left:0;
    24.     height:100%;
    25.     width:100%;
    26.     text-align: center;
    27. }
    28.  
    29. #wrapper {
    30.     position:absolute;
    31.     top:50%;
    32.     left:50%;
    33.     margin-left:-462px;
    34.     margin-top:-337px;
    35.     height:674px;
    36.     width:924px;
    37. }
    38.  
    39. #logo {
    40.     float:left;
    41.     text-align: center;
    42.     height:397px;
    43.     width:78px;
    44. }
    45.  
    46. #forumpromo {
    47.     background-image: url(../images/hintervideo.png);
    48.     background-position: center center;
    49.     background-repeat: no-repeat;
    50.     height:672px;
    51.     width:842px;
    52.     text-align: center;
    53. }
    54.  
    55. #copyright {
    56.     font: 100% Kartika;
    57.     color:#09396a;
    58.     text-align: center;
    59.     clear:both;
    60. }
    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: 24.02.2009
    #8      
Seobility SEO Tool
x
×
×