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:
Hier das CSS:
Danke schon mal,
Geli
P.S. Wenn jemand weiß, wie ich die Navigation richtig in der Mitte positioniere, wäre ich gleich noch froher.
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>
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;
}
Geli
P.S. Wenn jemand weiß, wie ich die Navigation richtig in der Mitte positioniere, wäre ich gleich noch froher.