Antworten auf deine Fragen:
Neues Thema erstellen

Positionierungsproblem in IE7

LamaGeli

LamaGeli

Neuweltkamel

Hallo,

in IE7 wird meine Slideshow ganz nach rechts verschoben.
Sie soll aber mittig platziert sein, wie es in den anderen Browsern auch funktioniert.

Ich finde das Problem einfach nicht.

Hier die Webseite:
http://www.tiny-world.de/ArchitekturVisualisierung.html

Hier der HTML code:
HTML: 
<body>


<div class="container">
  
  <div class="header"><a href="#"><img src="Images/Logo_Ani1GKl.gif" id="Insert_logo"  /></a> 
    <!-- end .header --></div>



<div id="wrapper">
<ul id="navigation">
<li><a href="Index.html">3D Animation</a></li>

<li><a href="ProduktPraesentation.html">Produkt Präsentation</a></li>
      <li><a href="Interaktiv.html">360° Interaktiv</a></li>
      <li><a href="Medizin.html">Medizin Visualisierung</a></li>
      <li><a href="LogoAnimation.html">Logo Animation</a></li>
      <li><a href="CharakterAnimation.html">Character Animation</a></li>
      <li><a href="Technik.html">Technik Visualisierung</a></li>
<li><a href="#" class="active">Architektur Visualisierung & Panoramen</a></li>
<li><a href="Info.html">Info & Kontakt</a></li>
<li><a href="Impressum.html">Impressum</a></li>


     
</ul>
</div> <!-- Ende wrapper -->



  
  
  <div class="content">
   
    <div class="button1">
    <table width="100%" border="0">
      <tr>
        <td align="left"> <h3>Tiny World</h3></td>
        <td align="right"> <h3>Slideshow</h3></td>
        <td align="right"><h3>Architektur Visualisierung</h3></td>
      </tr>
    </table>
    </div>
  

<div class="video">
    
<div id="slideshow" style="margin-left:auto;margin-right:auto;margin-top:15px;margin-bottom:20px;
width:688px;height:387px; align="center">
<img src="pics/pic01a.jpg" alt="Architektur Visualisierung Slideshow"/>

</div>

    
    <div class="textbox">

    <h3>So begeistern Sie zukünftige Bauherren, Käufer und Investoren.</h3> 

Mit der Architekturvisualisierung ermöglichen Sie Ihren Kunden schon vor der Grundsteinlegung
das virtuelle Betreten und Begutachten des geplanten Bauprojekts.</br>
Ob Großprojekt oder Eigenheim - mit einer realitätsnahen Architekturvisualisierung lässt sich
ein Bauprojekt überzeugender präsentieren, als mit schwer deutbaren Fachplänen und Bauzeichnungen.</br>

Auch Bauschilder, Verkaufsbroschüren und Prospekte lassen sich mit einer 3D Archtekturvisualisierung 
augenfällig und präsentabel gestalten.

  </div>
</div>

<div class="button1">
    <table width="100%" border="0">
      <tr>
        <td align="left"> <h3>Tiny World</h3></td>
        <td align="right"> <h3>360° Panoramen</h3></td>
        <td align="right"><h3>Architektur Visualisierung</h3></td>
      </tr>
    </table>

    </div>


    

<div class="video">

<p>
        <script type="text/javascript">
<!--
            if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
                var flashvars="";
                p2q_EmbedFlash('MFH_Siedlung_out.swf','800','400','allowFullScreen','true','bgcolor','#ffffff','FlashVars',flashvars);
                
                // Check to see if the version meets the requirements for playback
                if (!DetectFlashVer(9,0,0)) {
                    document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '
                                 + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');
                }
            } else {
                document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old!<\/p>');
            }
//-->
        </script>
        <noscript>
            <p class="warning">Please enable Javascript!</p>
</noscript>




<div class="textbox">

Die Steuerung dieses Panorama kann sowohl mit der Maus, bei gedrückter linker Maustaste,
als auch mit den Buttons am unteren Bildrand vorgenommen werden.

</div>

<hr width="86%" />

<div class="video">

<p>
        <script type="text/javascript">
<!--
            if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
                var flashvars="";
                p2q_EmbedFlash('WohnraumA_out.swf','800','400','allowFullScreen','true','bgcolor','#ffffff','FlashVars',flashvars);
                
                // Check to see if the version meets the requirements for playback
                if (!DetectFlashVer(9,0,0)) {
                    document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '
                                 + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');
                }
            } else {
                document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old!<\/p>');
            }
//-->
        </script>
        <noscript>
            <p class="warning">Please enable Javascript!</p>
</noscript>

</div>
<div class="textbox">

Bei diesem Panorama können Sie ebenso mit der Maus und den Buttons am unterem Bildrand, wie auch durch das Klicken auf die Kreise im Grundriss oben links, durch das innere des Gebäudes wandern.

</div>

<hr width="86%" />

<div class="video">

<p>
        <script type="text/javascript">
<!--
            if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
                var flashvars="";
                p2q_EmbedFlash('Feriensiedlung1_out.swf','800','400','allowFullScreen','true','bgcolor','#ffffff','FlashVars',flashvars);
                
                // Check to see if the version meets the requirements for playback
                if (!DetectFlashVer(9,0,0)) {
                    document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '
                                 + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');
                }
            } else {
                document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old!<\/p>');
            }
//-->
        </script>
        <noscript>
            <p class="warning">Please enable Javascript!</p>
</noscript>


</div>
  
  </div>
  <div class="footer">
  
    <a href="http://vimeo.com/tinyworld/videos" target="_blank"><img src="Images/VimeoB.png" width="50" height="50" alt="VimeoBanner" /></a></td>
        <td align="right">
        <a href="http://www.youtube.com/user/TinyWorldAnimation" target="_blank"><img src="Images/YouTubeB.png" width="51" height="50" alt="YouTubeBanner" /></a>
 <a href="http://www.facebook.com/pages/Tiny-World-3D-Animation/120410971407769?v=wall" target="_blank"><img src="Images/FacebookB.png" width="50" height="50" alt="FacebookBanner" /></a>       
  <!-- end .footer --></div>
  <!-- end .container --></div>

</body>
</html>
Hier das CSS:
Code: 
body {
    margin: 0;
    color: #FFF;
    background-image: url(Images/EarthBG.jpg);
    background-repeat: no-repeat;
    background-color: #000;
    padding-top: 5px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
    text-decoration: none;
}    

    
/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
    padding: 0px;
    margin: 0px;
}
h1, h2, h3, h4, h5, h6, p {
    padding-right: 20px;
    padding-left: 20px; /* Durch Hinzufügen der Auffüllung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffüllung verwendet werden. */
    margin: 0;
    padding-top: 1px;
    padding-bottom: 4px;
}
a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
    border: none;
}

.container {
    
    width: 960px;
    background-position: center top;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    background-size: 100%;
}

.header {
    display: block;
    padding: 12px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow:inset 0 0 20px #CACACA;
    -webkit-box-shadow:inset 0 0 20px #CACACA;
    box-shadow:inset 0 0 20px #CACACA;
    background-image: url(Images/TW_Text3Kl.png);
    background-position: right center;
    background-repeat: no-repeat;
    border: 2px solid #666
}



#wrapper {
margin: 8px 0 0 0px;
font-size: 78%;


}
#navigation li {
margin-bottom: 4px;
    width: 180px;
        text-align: center;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: none;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    font-size: 82%;
display: block;
       -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow:inset 0 0 8px #CACACA;
    -webkit-box-shadow:inset 0 0 8px #CACACA;
    box-shadow:inset 0 0 8px #CACACA;
    background: #000000; /* Fallback IE 6-8 */
    background: rgba(0, 0, 0, .6);
    border: 2px solid #666;
        
float: left;
list-style-type: none;
}



#navigation li a {

color: #9CF;
display: block;

padding: 8px 8px;

text-decoration: none;
}



#navigation li a:hover {
        
color: #fff;
text-decoration: none;
}



#navigation li a.active {
        background: #009; /* Fallback IE 6-8 */
    background: rgba(0, 0, 153, .6);
        -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow:inset 0 0 8px #CACACA;
    -webkit-box-shadow:inset 0 0 8px #CACACA;
    box-shadow:inset 0 0 8px #CACACA;

color: #fff;
text-align: center;
text-decoration: none;
}


#navigation li.start {
border-left: 30;
}

#navigation li.ende {
border-right: 0;
}






.content {
    float: right;
    width: 96%;
    padding: 12px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow:inset 0 0 20px #CACACA;
    -webkit-box-shadow:inset 0 0 20px #CACACA;
    box-shadow:inset 0 0 20px #CACACA;
    background: #000000; /* Fallback IE 6-8 */
    background: rgba(0, 0, 0, .8);
    color: #FFF;
    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 15px;
    margin-left: auto;
    border: 2px solid #666;
    text-decoration: none;
    text-align: center;
}

.button1 {
    color:  #FFF;
    background: #009; /* Fallback IE 6-8 */
    background: rgba(0, 0, 153, .6);
    -moz-box-shadow:inset 0 0 10px #9CF;
    -webkit-box-shadow:inset 0 0 10px #9CF;
    box-shadow:inset 0 0 10px #9CF;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-size: 62%;
    padding: 1px;
    text-align: justify;
    margin-top: 8px;
    margin-right: 12px;
    margin-bottom: 0px;
    margin-left: 12px;
}




.video {
    text-align: center;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    font-size: 70%;
}

.textbox {
    width: 78%;
    display: block;
    margin-top: 15px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    border: 1px none #FFF;
    text-align: justify;
    font-size: 98%;
    text-decoration: none;    
}


.tablebox {
    width: 93%;
    display: block;
    margin-top: 20px;
    margin-right: 4%;
    margin-bottom: 20px;
    margin-left: 4%;
    padding-top: 0;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 20px;
    border: 1px none #FFF;
    text-align: center;
    font-size: 72%;
    
}

.table {
    padding: 0;
    width: 100%;
}

.content ul, .content ol { 
    padding: 0 15px 15px 40px; 
}




.footer {
    padding: 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow:inset 0 0 20px #CACACA;
    -webkit-box-shadow:inset 0 0 20px #CACACA;
    box-shadow:inset 0 0 20px #CACACA;
    clear: both;
    background: #000000; /* Fallback IE 6-8 */
    background: rgba(0, 0, 0, .6);
        color: #FFF;
    border: 2px solid #666;
    width: 96%;
    float: right;
    text-align: right;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 30px;
    margin-left: 0px;
}


.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


table.tight {
    background-color: #FFF;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0;
}
Danke schon mal,
Geli

P.S. Wenn jemand weiß, wie ich die Navigation richtig in der Mitte positioniere, wäre ich gleich noch froher.
 

cebito

cebito

undefined

AW: Positionierungsproblem in IE7

Ein Wunder, dass das überhaupt irgendwo "richtig" angezeigt wird. Dein Slideshowscript gibt grottig schlechtes und nicht valides HTML aus.
Mein Vorschlag, such dir ein Slideshowscript, das validen Code ausgibt.
 
LamaGeli

LamaGeli

Neuweltkamel

AW: Positionierungsproblem in IE7

Ich habe erst eine andere Slideshow benutzt, aber das script vertrug sich offensichtlich nicht mit dem zweiten script für die Panoramen.
Es wurde immer nur entweder die Slideshow oder die Panoramen angezeigt.

Kann es denn wirklich am Inhalt des scripts liegen, auf welcher Position die Slideshow im IE7 angezeigt wird?

Geli
 
Myhar

Myhar

Hat es drauf

AW: Positionierungsproblem in IE7

Natürlich. Gibt man unsauberes HTML aus, dann darf man sich nicht wundern, wenn die Seite dann irgendwie dargestellt wird.
 
LamaGeli

LamaGeli

Neuweltkamel

AW: Positionierungsproblem in IE7

Das Problem hat sich jedenfalls für IE7 erledigt durch die Anweisung text-align:left
IE8 hab ich leider nicht, aber in IE9 und allen anderen Browsern ist die Slideshow jetzt mittig positioniert.

Gruß
Geli
 
Myhar

Myhar

Hat es drauf

AW: Positionierungsproblem in IE7

Wenn du IE9 hast, dann hast du auch IE7 und IE8. Durch drücken von F12 kannst du die Browserversion wechseln.
 
LamaGeli

LamaGeli

Neuweltkamel

AW: Positionierungsproblem in IE7

Myhar schrieb:
Wenn du IE9 hast, dann hast du auch IE7 und IE8. Durch drücken von F12 kannst du die Browserversion wechseln.
Zum Vergrößern anklicken....

Da hab ich doch heute den ganzen morgen rumgegoogelt, wie man am besten mehrere IE Versionen auf seinen PC bekommt und dann kommst Du mit so einem einfachen Tip:)

Danke schön, funktioniert wunderbar!

Gruß
Geli
 
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: 109 (Mitglieder: 2, Gäste: 107)
Robots: 866

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben