PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Positionierungsproblem in IE7
Beitrag
<blockquote data-quote="LamaGeli" data-source="post: 1929206" data-attributes="member: 311273"><p>Hallo,</p><p></p><p>in IE7 wird meine Slideshow ganz nach rechts verschoben.</p><p>Sie soll aber mittig platziert sein, wie es in den anderen Browsern auch funktioniert.</p><p></p><p>Ich finde das Problem einfach nicht.</p><p></p><p>Hier die Webseite:</p><p><a href="http://www.tiny-world.de/ArchitekturVisualisierung.html" target="_blank">http://www.tiny-world.de/ArchitekturVisualisierung.html</a></p><p></p><p>Hier der HTML code:</p><p>[HTML]<body></p><p></p><p></p><p><div class="container"></p><p> </p><p> <div class="header"><a href="#"><img src="Images/Logo_Ani1GKl.gif" id="Insert_logo" /></a> </p><p> <!-- end .header --></div></p><p></p><p></p><p></p><p><div id="wrapper"></p><p><ul id="navigation"></p><p><li><a href="Index.html">3D Animation</a></li></p><p></p><p><li><a href="ProduktPraesentation.html">Produkt Präsentation</a></li></p><p> <li><a href="Interaktiv.html">360° Interaktiv</a></li></p><p> <li><a href="Medizin.html">Medizin Visualisierung</a></li></p><p> <li><a href="LogoAnimation.html">Logo Animation</a></li></p><p> <li><a href="CharakterAnimation.html">Character Animation</a></li></p><p> <li><a href="Technik.html">Technik Visualisierung</a></li></p><p><li><a href="#" class="active">Architektur Visualisierung & Panoramen</a></li></p><p><li><a href="Info.html">Info & Kontakt</a></li></p><p><li><a href="Impressum.html">Impressum</a></li></p><p></p><p></p><p> </p><p></ul></p><p></div> <!-- Ende wrapper --></p><p></p><p></p><p></p><p> </p><p> </p><p> <div class="content"></p><p> </p><p> <div class="button1"></p><p> <table width="100%" border="0"></p><p> <tr></p><p> <td align="left"> <h3>Tiny World</h3></td></p><p> <td align="right"> <h3>Slideshow</h3></td></p><p> <td align="right"><h3>Architektur Visualisierung</h3></td></p><p> </tr></p><p> </table></p><p> </div></p><p> </p><p></p><p><div class="video"></p><p> </p><p><div id="slideshow" style="margin-left:auto;margin-right:auto;margin-top:15px;margin-bottom:20px;</p><p>width:688px;height:387px; align="center"></p><p><img src="pics/pic01a.jpg" alt="Architektur Visualisierung Slideshow"/></p><p></p><p></div></p><p></p><p> </p><p> <div class="textbox"></p><p></p><p> <h3>So begeistern Sie zukünftige Bauherren, Käufer und Investoren.</h3> </p><p></p><p>Mit der Architekturvisualisierung ermöglichen Sie Ihren Kunden schon vor der Grundsteinlegung</p><p>das virtuelle Betreten und Begutachten des geplanten Bauprojekts.</br></p><p>Ob Großprojekt oder Eigenheim - mit einer realitätsnahen Architekturvisualisierung lässt sich</p><p>ein Bauprojekt überzeugender präsentieren, als mit schwer deutbaren Fachplänen und Bauzeichnungen.</br></p><p></p><p>Auch Bauschilder, Verkaufsbroschüren und Prospekte lassen sich mit einer 3D Archtekturvisualisierung </p><p>augenfällig und präsentabel gestalten.</p><p></p><p> </div></p><p></div></p><p></p><p><div class="button1"></p><p> <table width="100%" border="0"></p><p> <tr></p><p> <td align="left"> <h3>Tiny World</h3></td></p><p> <td align="right"> <h3>360° Panoramen</h3></td></p><p> <td align="right"><h3>Architektur Visualisierung</h3></td></p><p> </tr></p><p> </table></p><p></p><p> </div></p><p></p><p></p><p> </p><p></p><p><div class="video"></p><p></p><p><p></p><p> <script type="text/javascript"></p><p><!--</p><p> if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {</p><p> var flashvars="";</p><p> p2q_EmbedFlash('MFH_Siedlung_out.swf','800','400','allowFullScreen','true','bgcolor','#ffffff','FlashVars',flashvars);</p><p> </p><p> // Check to see if the version meets the requirements for playback</p><p> if (!DetectFlashVer(9,0,0)) {</p><p> document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '</p><p> + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');</p><p> }</p><p> } else {</p><p> document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old!<\/p>');</p><p> }</p><p>//--></p><p> </script></p><p> <noscript></p><p> <p class="warning">Please enable Javascript!</p></p><p></noscript></p><p></p><p></p><p></p><p></p><p><div class="textbox"></p><p></p><p>Die Steuerung dieses Panorama kann sowohl mit der Maus, bei gedrückter linker Maustaste,</p><p>als auch mit den Buttons am unteren Bildrand vorgenommen werden.</p><p></p><p></div></p><p></p><p><hr width="86%" /></p><p></p><p><div class="video"></p><p></p><p><p></p><p> <script type="text/javascript"></p><p><!--</p><p> if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {</p><p> var flashvars="";</p><p> p2q_EmbedFlash('WohnraumA_out.swf','800','400','allowFullScreen','true','bgcolor','#ffffff','FlashVars',flashvars);</p><p> </p><p> // Check to see if the version meets the requirements for playback</p><p> if (!DetectFlashVer(9,0,0)) {</p><p> document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '</p><p> + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');</p><p> }</p><p> } else {</p><p> document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old!<\/p>');</p><p> }</p><p>//--></p><p> </script></p><p> <noscript></p><p> <p class="warning">Please enable Javascript!</p></p><p></noscript></p><p></p><p></div></p><p><div class="textbox"></p><p></p><p>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.</p><p></p><p></div></p><p></p><p><hr width="86%" /></p><p></p><p><div class="video"></p><p></p><p><p></p><p> <script type="text/javascript"></p><p><!--</p><p> if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {</p><p> var flashvars="";</p><p> p2q_EmbedFlash('Feriensiedlung1_out.swf','800','400','allowFullScreen','true','bgcolor','#ffffff','FlashVars',flashvars);</p><p> </p><p> // Check to see if the version meets the requirements for playback</p><p> if (!DetectFlashVer(9,0,0)) {</p><p> document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. '</p><p> + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>');</p><p> }</p><p> } else {</p><p> document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old!<\/p>');</p><p> }</p><p>//--></p><p> </script></p><p> <noscript></p><p> <p class="warning">Please enable Javascript!</p></p><p></noscript></p><p></p><p></p><p></div></p><p> </p><p> </div></p><p> <div class="footer"></p><p> </p><p> <a href="http://vimeo.com/tinyworld/videos" target="_blank"><img src="Images/VimeoB.png" width="50" height="50" alt="VimeoBanner" /></a></td></p><p> <td align="right"></p><p> <a href="http://www.youtube.com/user/TinyWorldAnimation" target="_blank"><img src="Images/YouTubeB.png" width="51" height="50" alt="YouTubeBanner" /></a></p><p> <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> </p><p> <!-- end .footer --></div></p><p> <!-- end .container --></div></p><p></p><p></body></p><p></html>[/HTML]Hier das CSS:</p><p>[CODE]body {</p><p> margin: 0;</p><p> color: #FFF;</p><p> background-image: url(Images/EarthBG.jpg);</p><p> background-repeat: no-repeat;</p><p> background-color: #000;</p><p> padding-top: 5px;</p><p> padding-right: 0;</p><p> padding-bottom: 0;</p><p> padding-left: 0;</p><p> font-family: Verdana, Arial, Helvetica, sans-serif;</p><p> font-size: 100%;</p><p> line-height: 1.4;</p><p> text-decoration: none;</p><p>} </p><p></p><p> </p><p>/* ~~ Element-/Tag-Selektoren ~~ */</p><p>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. */</p><p> padding: 0px;</p><p> margin: 0px;</p><p>}</p><p>h1, h2, h3, h4, h5, h6, p {</p><p> padding-right: 20px;</p><p> 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. */</p><p> margin: 0;</p><p> padding-top: 1px;</p><p> padding-bottom: 4px;</p><p>}</p><p>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. */</p><p> border: none;</p><p>}</p><p></p><p>.container {</p><p> </p><p> width: 960px;</p><p> background-position: center top;</p><p> margin-top: 0px;</p><p> margin-right: auto;</p><p> margin-bottom: 0px;</p><p> margin-left: auto;</p><p> padding-top: 0px;</p><p> padding-right: 15px;</p><p> padding-bottom: 15px;</p><p> padding-left: 15px;</p><p> background-size: 100%;</p><p>}</p><p></p><p>.header {</p><p> display: block;</p><p> padding: 12px;</p><p> -webkit-border-radius: 20px;</p><p> -moz-border-radius: 20px;</p><p> border-radius: 20px;</p><p> -moz-box-shadow:inset 0 0 20px #CACACA;</p><p> -webkit-box-shadow:inset 0 0 20px #CACACA;</p><p> box-shadow:inset 0 0 20px #CACACA;</p><p> background-image: url(Images/TW_Text3Kl.png);</p><p> background-position: right center;</p><p> background-repeat: no-repeat;</p><p> border: 2px solid #666</p><p>}</p><p></p><p></p><p></p><p>#wrapper {</p><p>margin: 8px 0 0 0px;</p><p>font-size: 78%;</p><p></p><p></p><p>}</p><p>#navigation li {</p><p>margin-bottom: 4px;</p><p> width: 180px;</p><p> text-align: center;</p><p> margin-top: 0px;</p><p> margin-right: 0px;</p><p> margin-left: 0px;</p><p> padding-left: 0px;</p><p> list-style-type: none;</p><p> padding-top: 0px;</p><p> padding-right: 0px;</p><p> padding-bottom: 0px;</p><p> font-size: 82%;</p><p>display: block;</p><p> -webkit-border-radius: 15px;</p><p> -moz-border-radius: 15px;</p><p> border-radius: 15px;</p><p> -moz-box-shadow:inset 0 0 8px #CACACA;</p><p> -webkit-box-shadow:inset 0 0 8px #CACACA;</p><p> box-shadow:inset 0 0 8px #CACACA;</p><p> background: #000000; /* Fallback IE 6-8 */</p><p> background: rgba(0, 0, 0, .6);</p><p> border: 2px solid #666;</p><p> </p><p>float: left;</p><p>list-style-type: none;</p><p>}</p><p></p><p></p><p></p><p>#navigation li a {</p><p></p><p>color: #9CF;</p><p>display: block;</p><p></p><p>padding: 8px 8px;</p><p></p><p>text-decoration: none;</p><p>}</p><p></p><p></p><p></p><p>#navigation li a:hover {</p><p> </p><p>color: #fff;</p><p>text-decoration: none;</p><p>}</p><p></p><p></p><p></p><p>#navigation li a.active {</p><p> background: #009; /* Fallback IE 6-8 */</p><p> background: rgba(0, 0, 153, .6);</p><p> -webkit-border-radius: 15px;</p><p> -moz-border-radius: 15px;</p><p> border-radius: 15px;</p><p> -moz-box-shadow:inset 0 0 8px #CACACA;</p><p> -webkit-box-shadow:inset 0 0 8px #CACACA;</p><p> box-shadow:inset 0 0 8px #CACACA;</p><p></p><p>color: #fff;</p><p>text-align: center;</p><p>text-decoration: none;</p><p>}</p><p></p><p></p><p>#navigation li.start {</p><p>border-left: 30;</p><p>}</p><p></p><p>#navigation li.ende {</p><p>border-right: 0;</p><p>}</p><p></p><p></p><p></p><p></p><p></p><p></p><p>.content {</p><p> float: right;</p><p> width: 96%;</p><p> padding: 12px;</p><p> -webkit-border-radius: 20px;</p><p> -moz-border-radius: 20px;</p><p> border-radius: 20px;</p><p> -moz-box-shadow:inset 0 0 20px #CACACA;</p><p> -webkit-box-shadow:inset 0 0 20px #CACACA;</p><p> box-shadow:inset 0 0 20px #CACACA;</p><p> background: #000000; /* Fallback IE 6-8 */</p><p> background: rgba(0, 0, 0, .8);</p><p> color: #FFF;</p><p> margin-top: 15px;</p><p> margin-right: auto;</p><p> margin-bottom: 15px;</p><p> margin-left: auto;</p><p> border: 2px solid #666;</p><p> text-decoration: none;</p><p> text-align: center;</p><p>}</p><p></p><p>.button1 {</p><p> color: #FFF;</p><p> background: #009; /* Fallback IE 6-8 */</p><p> background: rgba(0, 0, 153, .6);</p><p> -moz-box-shadow:inset 0 0 10px #9CF;</p><p> -webkit-box-shadow:inset 0 0 10px #9CF;</p><p> box-shadow:inset 0 0 10px #9CF;</p><p> -webkit-border-radius: 20px;</p><p> -moz-border-radius: 20px;</p><p> border-radius: 20px;</p><p> font-size: 62%;</p><p> padding: 1px;</p><p> text-align: justify;</p><p> margin-top: 8px;</p><p> margin-right: 12px;</p><p> margin-bottom: 0px;</p><p> margin-left: 12px;</p><p>}</p><p></p><p></p><p></p><p></p><p>.video {</p><p> text-align: center;</p><p> margin-top: 20px;</p><p> margin-right: auto;</p><p> margin-bottom: 20px;</p><p> margin-left: auto;</p><p> font-size: 70%;</p><p>}</p><p></p><p>.textbox {</p><p> width: 78%;</p><p> display: block;</p><p> margin-top: 15px;</p><p> margin-right: auto;</p><p> margin-bottom: 20px;</p><p> margin-left: auto;</p><p> padding-top: 0;</p><p> padding-right: 0;</p><p> padding-bottom: 0;</p><p> padding-left: 0;</p><p> border: 1px none #FFF;</p><p> text-align: justify;</p><p> font-size: 98%;</p><p> text-decoration: none; </p><p>}</p><p></p><p></p><p>.tablebox {</p><p> width: 93%;</p><p> display: block;</p><p> margin-top: 20px;</p><p> margin-right: 4%;</p><p> margin-bottom: 20px;</p><p> margin-left: 4%;</p><p> padding-top: 0;</p><p> padding-right: 20px;</p><p> padding-bottom: 0;</p><p> padding-left: 20px;</p><p> border: 1px none #FFF;</p><p> text-align: center;</p><p> font-size: 72%;</p><p> </p><p>}</p><p></p><p>.table {</p><p> padding: 0;</p><p> width: 100%;</p><p>}</p><p></p><p>.content ul, .content ol { </p><p> padding: 0 15px 15px 40px; </p><p>}</p><p></p><p></p><p></p><p></p><p>.footer {</p><p> padding: 10px;</p><p> -webkit-border-radius: 20px;</p><p> -moz-border-radius: 20px;</p><p> border-radius: 20px;</p><p> -moz-box-shadow:inset 0 0 20px #CACACA;</p><p> -webkit-box-shadow:inset 0 0 20px #CACACA;</p><p> box-shadow:inset 0 0 20px #CACACA;</p><p> clear: both;</p><p> background: #000000; /* Fallback IE 6-8 */</p><p> background: rgba(0, 0, 0, .6);</p><p> color: #FFF;</p><p> border: 2px solid #666;</p><p> width: 96%;</p><p> float: right;</p><p> text-align: right;</p><p> margin-top: 0px;</p><p> margin-right: 0px;</p><p> margin-bottom: 30px;</p><p> margin-left: 0px;</p><p>}</p><p></p><p></p><p>.fltrt { </p><p> float: right;</p><p> margin-left: 8px;</p><p>}</p><p>.fltlft { </p><p> float: left;</p><p> margin-right: 8px;</p><p>}</p><p>.clearfloat { </p><p> clear:both;</p><p> height:0;</p><p> font-size: 1px;</p><p> line-height: 0px;</p><p>}</p><p></p><p></p><p>table.tight {</p><p> background-color: #FFF;</p><p> padding-top: 0px;</p><p> padding-right: 0px;</p><p> padding-bottom: 0;</p><p> padding-left: 0;</p><p>}</p><p>[/CODE]Danke schon mal,</p><p>Geli</p><p></p><p>P.S. Wenn jemand weiß, wie ich die Navigation richtig in der Mitte positioniere, wäre ich gleich noch froher.</p></blockquote><p></p>
[QUOTE="LamaGeli, post: 1929206, member: 311273"] 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: [URL]http://www.tiny-world.de/ArchitekturVisualisierung.html[/URL] 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>[/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; } [/CODE]Danke schon mal, Geli P.S. Wenn jemand weiß, wie ich die Navigation richtig in der Mitte positioniere, wäre ich gleich noch froher. [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Positionierungsproblem in IE7
Oben