Wechselndes Hintergrundbild mit Fade Effekt (nicht IE tauglich)

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Wechselndes Hintergrundbild mit Fade Effekt (nicht IE tauglich)

      Ich habe mal ein Projekt erstellt wo man sich ein wechselndes Hintergrundbild erstellen kann.
      Das ganze läuft nicht perfekt im Internet Explorer dieser spult alle Bilder schnell hintereinander ab und bleibt dann stehen.

      Also wir benötigen eine JS Datei...

      diese hat folgenden Inhalt ist aber im Testprojekt auch vorhanden.

      Der Autor hat diesen Text versteckt. Zum Einloggen oder Registrieren hier klicken.


      Dann brauchen wir noch eine CSS Datei:

      Der Autor hat diesen Text versteckt. Zum Einloggen oder Registrieren hier klicken.


      Diese beiden Dateien binden wir in den HEAD Teil der Seite ein - wenn auf allen Seiten dann unter Punkt 1 - wenn nur auf bestimmten Seiten dann unter Eigenschaften der Seite.Und dann noch ein bißchen was für den Internet Explorer

      HTML-Quellcode

      1. <link rel="stylesheet" type="text/css" href="css/style1.css" media="screen, print" />
      2. <script type="text/javascript" src="js/modernizr.custom.45139.js"></script>
      3. <!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="de"> <![endif]-->
      4. <!--[if IE 7 ]> <html class="ie ie7 no-js" lang="de"> <![endif]-->
      5. <!--[if IE 8 ]> <html class="ie ie8 no-js" lang="de"> <![endif]-->
      6. <!--[if IE 9 ]> <html class="ie ie9 no-js" lang="de"> <![endif]-->
      7. <!--[if gt IE 9]><!--><html class="no-js" lang="de"><!--<![endif]-->


      Natürlich müssen wir die Ordnerangabe auch richtig setzen sonst klappt das nicht.

      Das ganze reicht jetzt noch nicht, wir müssen noch ein bißchen HTML mit einbringen - das schreiben wir AUCH in den Head der Seite!!!

      HTML-Quellcode

      1. <ul class="cb-slideshow">
      2. <li><span>Image 01</span></li>
      3. <li><span>Image 02</span></li>
      4. <li><span>Image 03</span></li>
      5. <li><span>Image 04</span></li>
      6. <li><span>Image 05</span></li>
      7. <li><span>Image 06</span></li>
      8. </ul>
      9. <div class="clr"></div>
      10. </div>
      Alles anzeigen


      Das alles ist jetzt auf 6 Bilder ausgelegt.

      Eine Testseite habe ich auch mal gemacht...das Testprojekt befindet sich im Anhang...
      Dateien
      :hi: :mario:
    • Danke für die Codes. Ich habe noch eine Frage.

      Wozu dient dieser Code und die Pattern.png Datei?

      CSS-Quellcode

      1. .cb-slideshow:after {
      2. content: '';
      3. background: transparent url(../images/pattern.png) repeat top left;
      4. }


      Desweiteren habe ich das Problem, das

      HTML-Quellcode

      1. <li><span>Image 01</span></li>
      2. <li><span>Image 02</span></li>
      3. <li><span>Image 03</span></li>
      4. <li><span>Image 04</span></li>
      5. <li><span>Image 05</span></li>
      6. <li><span>Image 06</span></li>


      6 Schwarze Punkte oben links auf der html Datei erzeugen. Das Background image ist auch nicht ganz oben. Irgendwelche Tips?

      Aber noch viel wichtiger, der Background liegt im Vordergrund und überdeckt alles an Text was im Body Bereich ist. Nur beim Fading sieht man kurz den Text.


      Danke

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von otatp ()

    • Kannst Du mir wenigstens noch sagen, ob es eine Möglichkeit gibt, das bei einer Tabelle cellspacing="22" cellpadding="22" auch angezeigt wird. Irgendwie scheint bleibt alles bei 0 :(

      Ich habe also eine Tabelle eingefügt, bei der der Hintergrund eine Opal.png sein soll. Funktioniert auch aber der Text in der Tabelle ist zu dicht am Rand trotz cellspacing="22" cellpadding="22".

      Könntest Du mit ein zip. schicken, wo Du Deine neue Programmierung drin hast. Ist das Wordpress?

      Vielen Dank, Oli
    • Am besten schreibst du mal einen Link zur Seite - da kann ich mir das besser anschauen und testen.

      Ja das Template gibt es als Wordpress Template aber auch als HTML Template.

      Aber das Projekt hier ist ein X5 Projekt.

      Edit: ich seh gerade du hast Version 8 in deinem Profil angegeben....da muss ich wirklich mal auf deine Seite schauen um dir was fertiges liefern zu können...
      :hi: :mario:
    • kleines Problem

      Hallo,

      ich habe Testweise den Backroundfader in meine neue Seite eingebaut, soweit so gut, funktioniert bis auf einen Fehler. Ich habe auf der Seite einen Footer, der ist ebenfalls mit einem Backroundimage ausgerüstet. Durch das Faden des Websitehintergrundbildes blendet sich nun der Hintergrund des Footer ebenfalls aus und wieder kurz ein. Der Hintergrund des Footer soll aber nicht faden bzw. aus- u. einblenden sondern immer zu sehen sein. Das Footer BG-Image holt er sich aus einer CSS raus, siehe Word-Doument im Anhang.

      Wie kann ich das lösen? Ich füge hier mal den gesamten Quellqode der index.html ebenfalls als Word mal mit an.


      Kann mir jemand helfen? Wäre super, denn die neue Site soll am 01.01.2014 online gehen.

      Vielen Dank vorab.

      Grüße Denny
      Dateien
      • css.doc

        (55,81 kB, 2 mal heruntergeladen, zuletzt: )
      • index.doc

        (45,57 kB, 1 mal heruntergeladen, zuletzt: )
    • Bitte Quelltext direkt hier rein schreiben

      Quellcode

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <title>Willkommen im schönen Niedermausa (Sachs.)</title>
      5. <meta charset="windows-1252">
      6. <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
      7. <link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
      8. <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
      9. <link rel="icon" href="http://www.niedermausa.de/favicon.ico" type="image/x-icon">
      10. <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
      11. <link rel="stylesheet" type="text/css" href="css/style1.css" media="screen, print" />
      12. <script type="text/javascript" src="js/modernizr.custom.45139.js"></script >
      13. <!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="de"> <![endif]-->
      14. <!--[if IE 7 ]> <html class="ie ie7 no-js" lang="de"> <![endif]-->
      15. <!--[if IE 8 ]> <html class="ie ie8 no-js" lang="de"> <![endif]-->
      16. <!--[if IE 9 ]> <html class="ie ie9 no-js" lang="de"> <![endif]-->
      17. <!--[if gt IE 9]><!--><html class="no-js" lang="de">
      18. <!--<![endif]-->
      19. <script type="text/javascript" src="js/jquery-1.6.js" ></script>
      20. <script type="text/javascript" src="js/cufon-yui.js"></script>
      21. <script type="text/javascript" src="js/cufon-replace.js"></script>
      22. <script type="text/javascript" src="js/bg.js"></script>
      23. <script type="text/javascript" src="js/script.js"></script>
      24. <script type="text/javascript" src="js/superfish.js"></script>
      25. <script type="text/javascript" src="js/content_switch.js"></script>
      26. <script type="text/javascript" src="js/superfish.js"></script>
      27. <script type="text/javascript" src="js/forms.js"></script>
      28. <script type="text/javascript" src="js/cScroll.js"></script>
      29. <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
      30. <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
      31. <!--[if lt IE 9]>
      32. <script type="text/javascript" src="js/html5.js"></script>
      33. <link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
      34. <![endif]-->
      35. <!--[if lt IE 8]>
      36. <div style=' clear: both; text-align:center; position: relative;'>
      37. <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a>
      38. </div>
      39. <![endif]-->
      40. <script type="text/javascript">
      41. function MM_openBrWindow(theURL,winName,features) { //v2.0
      42. window.open(theURL,winName,features);
      43. }
      44. </script>
      45. <ul class="cb-slideshow">
      46. <li ><span >Image 01</span ></li >
      47. <li ><span >Image 02</span ></li >
      48. <li ><span >Image 03</span ></li >
      49. <li ><span >Image 04</span ></li >
      50. <li ><span >Image 05</span ></li >
      51. <li ><span >Image 06</span ></li >
      52. </ul >
      53. <div class="clr"></div >
      54. </div >
      55. </head>
      56. <body>
      57. <div class="spinner"></div>
      58. <div class="extra">
      59. <div class="wrapper">
      60. <!--header -->
      61. <header>
      62. <h1><a href="index.html" id="logo">in safe security services</a></h1>
      63. <nav class="menu">
      64. <ul id="menu">
      65. <li><a href="#!/page_home"><span></span><strong>Start</strong></a></li>
      66. <li><a href="#!/page_company"><span></span><strong>Portrait</strong></a>
      67. <div class="submenu_1">
      68. <ul>
      69. <li><a href="#!/page_more1">Niedermausa</a></li>
      70. <li><a href="#!/page_more">Sehenswuerdigkeiten</a>
      71. <div class="submenu_2">
      72. <ul>
      73. <li><a href="#!/page_train">Bahnhof</a></li>
      74. <li><a href="#!/page_alt">Altstadt</a></li>
      75. <li><a href="#!/page_wichtel">Wichtelberg</a></li>
      76. </ul>
      77. </div>
      78. </li>
      79. <li><a href="#!/page_ind">Industrie</a></li>
      80. <li><a href="#!/page_more">Umgebung</a></li>
      81. </ul>
      82. </div>
      83. </li>
      84. <li><a href="#!/page_clients"><span></span><strong>Galerie</strong></a></li>
      85. </ul>
      86. </nav>
      87. </header>
      88. <!--header end-->
      89. <div class="main">
      90. <!--content -->
      91. <article id="content">
      92. <ul>
      93. <li id="page_home">
      94. </li>
      95. <li id="page_company">
      96. <img src="images/bg_content.png" alt="" class="bg_cont">
      97. <div class="box"><div>
      98. <h4>Vorwort<br>
      99. <img border="0" src="images/vorwort_pic1.png" width="699" height="109"></h4>
      100. <p class="pad_bot1" align="justify">Begeben Sie
      101. sich auf eine außergewöhnliche Zeitreise, aber vergessen Sie dabei
      102. Ihren Humor nicht, denn so gesehen ist&nbsp; &quot;<b>Niedermausa</b>&quot;
      103. und alles drum und dran ein humorvoller
      104. Seitenhieb auf dieses ehemalige System, allerdings
      105. eben nur als
      106. Modell im Maßstab 1:87 - eben einfach eine
      107. Modelleisenbahnanlage mit Liebe zum Detail und von
      108. der Idee bis zur Vollendung durchdacht. Vielleicht
      109. kommt Ihnen, sofern auch Sie im Honnistaat
      110. aufgewachsen sind, so einiges ein klein wenig
      111. Bekannt vor und alte Erinnerungen werden wach.
      112. Beginnen Sie Ihre Reise mit der guten alten
      113. Deutschen Reichsbahn, nehmen Sie Platz in einem der
      114. gemütlich daherrumpelnden Personenzüge und genießen
      115. die Fahrt durch die Landschaft des tiefsten
      116. sächsischen Gebirges, nahe der Grenze zur ČSSR. Wo wir einmal bei der ČSSR sind, warum nicht auch nach Ihrem Besuch im beschaulichen Kreisstädtchen Niedermausa noch einen Ausflug kurz hinter die Grenze, nach Knedlík? Ah Sie kennen diesen Ort nicht? Kein Wunder, bedeutet Knedlík (tschechisch) übersetzt doch nichts anderes als Knödel, und die haben wir alle schon einmal gegessen. Aber es gibt noch mehr zu entdecken, aber Vorsicht, wandern Sie nicht zu tief ins Sperrgebiet der Grenze zur ČSSR, es könnte Ihnen sonst ein Grenzer der NVA-Grenztruppen im Trabbi-Kübelwagen oder "Horch & Guck" über die Füße fahren.<br>
      117. <img border="0" src="images/vorwort_pic3.png" width="699" height="259"></p>
      118. </div></div>
      119. </li>
      120. <li id="page_services">
      121. <img src="images/bg_content.png" alt="" class="bg_cont">
      122. <div class="box"><div>
      123. <div>
      124. <h2>services overview</h2>
      125. <h3>Pellentesque habitant morbi tristique seneus</h3>
      126. <div class="wrapper">
      127. <div class="cols">
      128. <p class="pad_bot2"><strong class="color1">Plantation Agriculture
      129. </strong><br>Amet, consectetuer adipisg elit,
      130. <br>sed diam nonu mmbh euismod tinc<br>idunt ut laoreet dolore magna
      131. </p>
      132. <a href="#!/page_more" class="button1 marg_bot1">
      133. <span><strong>more</strong></span><span class="active"><strong>more</strong></span></a>
      134. </div>
      135. <div class="cols pad_left2">
      136. <p class="pad_bot2"><strong class="color1">Cut – Flowers
      137. </strong><br>Amet, consectetuer adipisg elit,
      138. <br>sed diam nonu mmbh euismod tinc<br>idunt ut laoreet dolore magna
      139. </p>
      140. <a href="#!/page_more" class="button1 marg_bot1">
      141. <span><strong>more</strong></span><span class="active"><strong>more</strong></span></a>
      142. </div>
      143. <div class="cols pad_left2">
      144. <p class="pad_bot2"><strong class="color1">Geophytes
      145. </strong><br>Amet, consectetuer adipisg elit,
      146. <br>sed diam nonu mmbh euismod tinc<br>idunt ut laoreet dolore magna
      147. </p>
      148. <a href="#!/page_more" class="button1 marg_bot1">
      149. <span><strong>more</strong></span><span class="active"><strong>more</strong></span></a>
      150. </div></div>
      151. <div class="wrapper">
      152. <div class="col2 marg_right1">
      153. <h3 class="under">Research Services</h3>
      154. <ul class="list1">
      155. <li><span></span><a href="#">Pesticide Efficacy Studies</a></li>
      156. <li><span></span><a href="#">Crop Tolerance Screens</a></li>
      157. <li><span></span><a href="#">Pesticide Residue Studies</a></li>
      158. <li><span></span><a href="#">Product Demonstration
      159. </a></li>
      160. <li><span></span><a href="#">Agronomy Development</a></li>
      161. <li><span></span><a href="#">GM Crop Evaluation</a></li>
      162. <li><span></span><a href="#">Fertilizer Evaluation</a></li>
      163. <li><span></span><a href="#">Evaluation of New Crops</a></li>
      164. </ul></div>
      165. <div class="col3">
      166. <h3 class="under">Our Services</h3>
      167. <p class="pad_bot2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
      168. <div class="wrapper">
      169. <div class="col1 marg_right1">
      170. <div class="wrapper">
      171. <figure class="left marg_right1 marg_bot1">
      172. <span class="act"></span>
      173. <a href="#!/page_more">
      174. <img src="images/page2_img1.jpg" alt=""></a></figure>
      175. <p><strong class="color1">Crop
      176. <br>Protection</strong><br>Amet, conctetuer a elit, sed diam nonummbh
      177. <a href="#!/page_more">[...]</a>
      178. </p></div>
      179. <div class="wrapper">
      180. <figure class="left marg_right1 marg_bot1">
      181. <span class="act"></span>
      182. <a href="#!/page_more">
      183. <img src="images/page2_img2.jpg" alt=""></a></figure>
      184. <p><strong class="color1">Distribution</strong><br>Amet, conctetuer a elit, sed diam ornare felis non
      185. smod tinc <a href="#!/page_more">[...]</a> </p></div></div>
      186. <div class="col1">
      187. <div class="wrapper">
      188. <figure class="left marg_right1 marg_bot1">
      189. <span class="act"></span>
      190. <a href="#!/page_more">
      191. <img src="images/page2_img3.jpg" alt=""></a></figure>
      192. <p><strong class="color1">Seeds</strong><br>Amet, conctetuer a elit, sed diam ornare felis non
      193. smod tinc <a href="#!/page_more">[...]</a> </p></div>
      194. <div class="wrapper">
      195. <figure class="left marg_right1 marg_bot1">
      196. <span class="act"></span>
      197. <a href="#!/page_more">
      198. <img src="images/page2_img4.jpg" alt=""></a></figure>
      199. <p><strong class="color1">Micronutrient Fertilizers</strong><br>Amet, conctetuer a elit, sed diam nonummbh
      200. <a href="#!/page_more">[...]</a>
      201. </p></div></div></div></div>
      202. </div></div></div></li>
      203. <li id="page_clients">
      204. <img src="images/bg_content.png" alt="" class="bg_cont">
      205. <div class="box"><div>
      206. <h2>Galerie</h2>
      207. <h3>Atemberaubende Landschaften, verschlafene Ortschaften...</h3>
      208. <div class="cols">
      209. <div class="pad_bot2">
      210. <figure><span class="act"></span><a href="#"><img src="images/page3_img1.jpg" alt=""></a></figure>
      211. </div>
      212. <div class="pad_bot2">
      213. <p align="justify"></align="justify"><strong class="color1">Anreise mit der Bahn</strong><br>
      214. Genießen Sie die Fahrt in einem der typischen Reichs-bahnzüge.</p>
      215. </div>
      216. <div class="pad_bot2">
      217. <figure><span class="act"></span><a href="#"><img src="images/page3_img2.jpg" alt=""></a></figure>
      218. </div>
      219. <p align="justify"><strong class="color1">Landschaft & Umgebung</strong><br>
      220. Atemberaubend schön, dass sächs. Gebirge ist eines der schönsten Urlaubsregionen.</p>
      221. </div>
      222. <div class="cols pad_left2">
      223. <div class="pad_bot2">
      224. <figure><span class="act"></span><a href="#"><img src="images/page3_img3.jpg" alt=""></a></figure>
      225. </div>
      226. <div class="pad_bot2">
      227. <p align="justify"><strong class="color1">Die Stadt Niedermausa</strong><br>
      228. Verschlafen aber dennoch lebendig, dass kleine Kreis-städtchen Niedermausa.</p>
      229. </div>
      230. <div class="pad_bot2">
      231. <figure><span class="act"></span><a href="#"><img src="images/page3_img4.jpg" alt=""></a></figure>
      232. </div>
      233. <p align="justify"><strong class="color1">Der Wichtelberg</strong><br>
      234. Geheimnisvoll und sagenum-woben, der Wichtelberg.</p>
      235. </div>
      236. <div class="cols pad_left2">
      237. <div class="pad_bot2">
      238. <figure><span class="act"></span><a href="#"><img src="images/page3_img5.jpg" alt=""></a></figure>
      239. </div>
      240. <div class="pad_bot2">
      241. <p align="justify"><strong class="color1">Industrie</strong><br>
      242. Hier kommen sie her, die kleinen Haushaltsgeräte die in jeder Küche zu finden sind.</p>
      243. </div>
      244. <div class="pad_bot2">
      245. <figure><span class="act"></span><a href="#"><img src="images/page3_img6.jpg" alt=""></a></figure>
      246. </div>
      247. <p align="justify"><strong class="color1">Besondere Aussichten</strong><br>
      248. Ganz besondere Aufnahmen von ganz besonderen Orten und Gelegenheiten.</p>
      249. </div>
      250. </div></div>
      251. </li>
      252. <li id="page_contacts">
      253. <img src="images/bg_content.png" alt="" class="bg_cont">
      254. <div class="box"><div>
      255. <h2 align="justify">Nimm Kontakt mit Niedermausa auf</h2>
      256. <div class="col1">
      257. <h3 align="justify">Kontakt</h3>
      258. <div class="pad_bot1">
      259. </div>
      260. <p><strong class="color1">12627 Berlin<br>
      261. </strong><br>
      262. <span class="cols">Fon:</span> +49 (0)30 31174341<br>
      263. <span class="cols">FAX: </span> +49 (0)30 68079635<br>
      264. E-mail: <a href="mailto:">mail@demolink.org</a></p>
      265. <p><strong class="color1"><br>
      266. </strong><br>
      267. <span class="cols"></span> <br>
      268. <span class="cols"></span> <br>
      269. <span class="cols"></span> <br>
      270. <a href="mailto:"></a></p>
      271. </div>
      272. <div class="col2 pad_left1">
      273. <h3>Mailformular</h3>
      274. <form action="#" id="ContactForm">
      275. <div class="success"> Contact form submitted!<br>
      276. <strong>We will be in touch soon.</strong> </div>
      277. <fieldset>
      278. <div class="wrapper">
      279. <label class="name">
      280. <span class="bg"><input type="text" value="Name:" class="input"></span>
      281. <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span> </label></div>
      282. <div class="wrapper">
      283. <label class="email">
      284. <span class="bg"><input type="text" value="E-mail:" class="input"></span>
      285. <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label></div>
      286. <div class="wrapper">
      287. <label class="phone">
      288. <span class="bg"><input type="tel" value="Phone:" class="input"></span>
      289. <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label></div>
      290. <div class="wrapper">
      291. <label class="message">
      292. <span class="bg"><textarea rows="1" cols="1">Message:</textarea></span>
      293. <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span> </label></div>
      294. <div class="btns"><a href="#" class="button1" data-type="submit"><span><strong>send</strong></span><span class="active"><strong>send</strong></span></a></div>
      295. </fieldset>
      296. </form>
      297. </div>
      298. </div></div>
      299. </li>
      300. <li id="page_privacy">
      301. <img src="images/bg_content.png" alt="" class="bg_cont">
      302. <div class="box"><div>
      303. <h2 class="marg_bot1">privacy policy</h2>
      304. <div class="col1">
      305. <img border="0" src="images/bau.png" width="699" height="333"></div>
      306. </div></div>
      307. </li>
      308. <li id="page_more">
      309. <img src="images/bg_content.png" alt="" class="bg_cont">
      310. <div class="box"><div>
      311. <h2 class="marg_bot1">Read more</h2>
      312. <div class="relative">
      313. <div class="scroll">
      314. <div class="col1">
      315. <img border="0" src="images/bau.png" width="699" height="333"></div>
      316. </div>
      317. </div>
      318. </div></div>
      319. </li>
      320. <li id="page_more1">
      321. <img src="images/bg_content.png" alt="" class="bg_cont">
      322. <div class="box"><div>
      323. <h2 class="marg_bot1">Niedermausa, Stadt &amp; Region im Grünen</h2>
      324. <div class="relative">
      325. <div class="scroll">
      326. <div class="col1" style="width: 676px; height: 575px">
      327. <p align="justify">Die kleine Kreisstadt
      328. Niedermausa liegt im süd-östlichen
      329. Zipfel der ehemaligen DDR, also im
      330. sächsischen Gebirge. Die landschaftlich
      331. sehr reizvolle und auch zugleich
      332. abwechslungsreiche Gegend gilt als ein
      333. klein wenig &quot;verschlafen&quot;, aber genau
      334. dies macht den Charme der Kreisstadt
      335. Niedermausa auch aus. Man fühlt sich
      336. auch als Besucher der Region doch
      337. irgendwie wohl. Die Stadt strahlt den
      338. typischen Charme einer DDR-Kleinstadt
      339. aus, neben dem üblichen DDR-Grau kann
      340. man aber auch erkennen, dass die
      341. Bewohner der Stadt bemüht sind aus dem
      342. wenigen vorhandenen das beste zu machen.
      343. Vieles wird in Eigenregie gemacht, denn
      344. in der Planwirtschaft bekommt man nunmal
      345. nicht immer das, was man eigentlich
      346. braucht. Manchmal hilft da aber ein
      347. wenig Vitamin B wie Beziehungen oder
      348. eben ein Parteibuch. Hat man beides
      349. nicht, dann muddelt man eben so wie man
      350. kann. Durch die unmittelbare Nähe zur
      351. ČSSR ist aber durchaus möglich das eine
      352. oder andere an Bedarfsgütern im
      353. Nachbarland zu besorgen. Entweder man
      354. begibt sich mit seiner &quot;Rennpappe&quot; oder
      355. der guten alten Bahn, 3x am Tag gibt´s
      356. eine direkte Verbindung, nach Knedlík.
      357. Viele Niedermausaer arbeiten im VEB
      358. NieMa, einen Betrieb des VE Kombinat
      359. GaEsNi, dem größten Betrieb in der
      360. Region, werden doch dort elektrische
      361. Klein- und Haushaltsgeräte hergestellt.
      362. Manch einer aus der BRD hat sicher schon
      363. bei einen großen Versandhaus das eine
      364. oder andere Produkt erworben, welches
      365. die Fabrikhallen des VEB NieMa verlassen
      366. hat. Niedermausa, eine Stadt &amp; Region,
      367. sympatisch verschlafen und dennoch
      368. Sehens- u. Erlebenswert.</p>
      369. </div>
      370. </div>
      371. </div>
      372. </div></div>
      373. </li>
      374. <li id="page_train">
      375. <img src="images/bg_content.png" alt="" class="bg_cont">
      376. <div class="box"><div>
      377. <h2 class="marg_bot1">Bahnhof</h2>
      378. <div class="relative">
      379. <div class="scroll">
      380. <div class="col1" style="width: 676px; height: 897px">
      381. <img border="0" src="images/bau.png" width="699" height="333"></div>
      382. </div></div>
      383. </li>
      384. <li id="page_alt">
      385. <img src="images/bg_content.png" alt="" class="bg_cont">
      386. <div class="box"><div>
      387. <h2 class="marg_bot1">Altstadt</h2>
      388. <div class="relative">
      389. <div class="scroll">
      390. <div class="col1" style="width: 677px; height: 888px">
      391. <img border="0" src="images/bau.png" width="699" height="333"></div>
      392. </div>
      393. </div>
      394. </div></div>
      395. </li>
      396. <li id="page_ind">
      397. <img src="images/bg_content.png" alt="" class="bg_cont">
      398. <div class="box"><div>
      399. <h2 class="marg_bot1">Industrie</h2>
      400. <div class="relative">
      401. <div class="scroll">
      402. <div class="col1" style="width: 677px; height: 889px">
      403. <img border="0" src="images/bau.png" width="699" height="333"></div>
      404. </div>
      405. </div>
      406. </div></div>
      407. <p>
      408. <img src="images/bg_content.png" alt="" class="bg_cont">
      409. </p>
      410. <div class="box">
      411. <div>
      412. <h2 class="marg_bot1">Umgebung</h2>
      413. <div class="relative">
      414. <div class="scroll">
      415. <div class="col1" style="width: 677px; height: 886px">
      416. <img border="0" src="images/bau.png" width="699" height="333"></div></div></div></div></div>
      417. </li>
      418. <li id="page_wichtel">
      419. <img src="images/bg_content.png" alt="" class="bg_cont">
      420. <div class="box"><div>
      421. <h2 class="marg_bot1">Der Wichtelberg</h2>
      422. <div class="relative">
      423. <div class="scroll">
      424. <div class="col1" style="width: 677px; height: 845px">
      425. <img border="0" src="images/bau.png" width="699" height="333"></div>
      426. </div>
      427. </div>
      428. </div></div>
      429. </li>
      430. </ul>
      431. </article>
      432. <!--content end-->
      433. </div>
      434. </div>
      435. <div class="block"></div>
      436. </div>
      437. <div class="bg1">
      438. <div class="main">
      439. <!--footer -->
      440. <footer>
      441. <span class="right"><font color="#FFFF99">Niedermausa (c) 2013/2014 |
      442. </font> <a href="#!/page_privacy"><font color="#FFFF99">Privacy policy</font></a></span>
      443. <ul id="icons">
      444. <li><a href="#"><img src="images/icon6.gif" alt=""><img src="images/icon6_active.jpg" alt="" class="act" onClick="MM_openBrWindow('http://www.onlex.de/_gbuch.php?username=diewandbahn','Gaestebuch','scrollbars=yes,width=750,height=500')"><b><font color="#FFFF99">Gästebuch</font></b></a></li>
      445. <li><a href="#"><img src="images/icon5.gif" alt=""><img src="images/icon5_active.jpg" alt="" class="act"><b><font color="#FFFF99">Facebook</font></b></a></li>
      446. <li><a href="#"><img src="images/icon1.gif" alt=""><img src="images/icon1_active.jpg" alt="" class="act" onClick="MM_openBrWindow('mail1.html','Mail','scrollbars=yes,width=550,height=550')"><b><font color="#FFFF99">E-Mail</font></b></a></li>
      447. </ul>
      448. <!-- {%FOOTER_LINK} -->
      449. </footer>
      450. <!--footer end-->
      451. </div>
      452. </div>
      453. <script type="text/javascript"> Cufon.now(); </script>
      454. <script>
      455. $(window).load(function() {
      456. $('.spinner').fadeOut();
      457. $('body').css({overflow:'inherit'})
      458. })
      459. </script>
      460. <!--coded by koma-->
      461. </body>
      462. </html>
      Alles anzeigen


      CSS-Quellcode

      1. 800x600
      2. /* Getting the
      3. new tags to behave */
      4. article, aside,
      5. audio, canvas, command, datalist, details, embed, figcaption, figure, footer,
      6. header, hgroup, keygen, meter, nav, output, progress, section, source, video{
      7. display: block; }
      8. mark, rp, rt,
      9. ruby, summary, time{ display: inline }
      10. /* Left &
      11. Right alignment */
      12. .left { float:left;}
      13. .right { float:right;}
      14. .wrapper {width:100%; overflow:hidden;}
      15. .relative{
      16. position:relative;}
      17. /* Global
      18. properties ======================================================== */
      19. body{ background:#fff; border:0; font:13px Verdana; color:#000000; line-height:21px; min-width:1156px; overflow:hidden;}
      20. .css3{border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow:
      21. 0
      22. 0 4px
      23. rgba(0, 0, 0, .4); -moz-box-shadow:
      24. 0
      25. 0 4px
      26. rgba(0, 0, 0, .4);
      27. -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4); position: relative;}
      28. .block {height:61px;}
      29. .extra {min-height:100%; height:auto !important; height:100%; margin: 0 auto -61px;}
      30. body, html {height:100%;}
      31. /* Global
      32. Structure ============================================================= */
      33. .main { margin: 0 auto; width: 940px; padding-right:10px }
      34. #bg{ position:fixed; z-index:-1}
      35. .bg1{ background:url(../images/bg1_footer.png) center 0 repeat-x; height:61px;}
      36. .spinner{ position:absolute;background: url(../images/loader.gif) 50% 50% no-repeat #000; z-index:99; width:100%; height:100%; top:0; left:0}
      37. /*
      38. ============================= main layout ====================== */
      39. a{ color:#88817a; text-decoration: none; outline:none}
      40. a:hover{ color:#000}
      41. h1{ padding:23px 0 0 0;}
      42. h2{ font:30px Verdana; color:#000; padding:19px 0 6px 0; background: url(../images/line_hor1.gif) 0 bottom repeat-x; line-height:1.2em;}
      43. h2.marg_bot1{
      44. margin-bottom:34px;}
      45. h3{ font:18px Verdana; color:#DB2626; padding:39px 0 20px 0; line-height:1.2em;}
      46. h3.under{
      47. background:url(../images/line_hor1.gif) 0 bottom repeat-x; padding:52px 0 9px 0; margin-bottom:33px;}
      48. h4{ font:30px Verdana; color:#000; padding:19px 0 6px 0;}
      49. h4.marg_bot1{
      50. margin-bottom:34px;}
      51. #page_services h3.under{
      52. padding-top:46px;}
      53. p{ padding-bottom:21px;}
      54. /*
      55. ============================= header ====================== */
      56. header{ height:500px; width:206px; position:absolute; left:0; z-index:4}
      57. #logo{ display:block; text-indent:-9999px; background:url(../images/logo1.png) 0 0 no-repeat; width:206px; height:142px;}
      58. #menu { padding-top:94px;}
      59. #menu > li {
      60. position:relative; width:186px;}
      61. #menu > li
      62. > a{ position:relative; background:url(../images/menu_bg.png) 0 0 no-repeat; width:156px; display:block; font-size:18px; color:#fff; line-height:52px; padding-left:30px; letter-spacing:-2px;}
      63. #menu > li:hover
      64. > a, #menu > .active > a{}
      65. #menu > li
      66. > a span{ position:absolute; top:0; left:-20px; right:0; height:100%; background:url(../images/menu_bg_active.jpg) right 0 no-repeat;}
      67. #menu > li
      68. > a strong{ position:relative;}
      69. .submenu_1{
      70. position:absolute; top:1px; left:169px; background:#0c0a07; z-index:10}
      71. .submenu_1 ul{ position:relative; box-shadow:
      72. 1px 1px 4px #000; -moz-box-shadow:
      73. 1px 1px 4px #000;-webkit-box-shadow:
      74. 1px 1px 4px #000; background:url(../images/submenu_line.gif) 8px 6px no-repeat; width:204px; padding:8px 2px 4px}
      75. .submenu_1 li {
      76. position:relative; line-height:38px; background:url(../images/submenu_line.gif) center bottom no-repeat; padding-bottom:2px; padding-top:1px;}
      77. .submenu_1 a{
      78. padding:0 19px; font-size:18px; color:#59524c; letter-spacing:-2px; display:block;}
      79. .submenu_1 li:hover
      80. > a{ background:url(../images/submenu_bg_active.gif) 0 0 repeat-x #fd870e; color:#fff}
      81. .submenu_2{
      82. position:absolute; top:2px; left:169px; background:#0c0a07; z-index:10}
      83. .submenu_2 li:hover > a{ background:url(../images/submenu2_bg_active.gif) 0 0 repeat-x #1f1812;}
      84. /*
      85. ============================= content ====================== */
      86. #content{
      87. height:839px; padding:6px 0; width:812px; margin:0 auto; overflow:hidden;}
      88. #content > ul
      89. { position:relative; height:839px; width:100%;}
      90. #content > ul
      91. > li{ position:relative; width:100%; height:100%}
      92. .bg_cont{ position:absolute; top:0 ; left:0; z-index:1; width:100%}
      93. .box{ position: relative; z-index:2; margin:56px; overflow:hidden;}
      94. .box > div{
      95. position:relative;}
      96. .button1{ display:inline-block; position:relative; box-shadow:
      97. 1px 1px 4px #111; -moz-box-shadow:
      98. 1px 1px 4px #111;
      99. -webkit-box-shadow: 1px 1px 4px #111;}
      100. .button1 span{
      101. display:block; border:1px solid #1d1d1d; position:relative; background:#000000; padding:0 19px; line-height:35px; color:#fff; text-transform:uppercase;}
      102. .button1 strong{
      103. font-weight:normal; background:url(../images/marker_1.gif) right 14px no-repeat; display:block; padding-right:19px;}
      104. .button1 .active{
      105. background:url(../images/button1_bg.gif) 0 0 repeat-x #fd870e; border:1px solid #fd870e; color:#fff; position:absolute; top:0; left:0}
      106. .button1 .active
      107. strong{}
      108. .pad_bot1{
      109. padding-bottom:25px;}
      110. .pad_bot2{
      111. padding-bottom:15px;}
      112. .pad_left1{
      113. padding-left:60px;}
      114. .pad_left2{
      115. padding-left:40px;}
      116. .marg_right1{
      117. margin-right:20px;}
      118. .marg_bot1{
      119. margin-bottom:5px;}
      120. #page_contacts .pad_left1{
      121. padding-left:56px;}
      122. figure { position:relative; background:#212121; margin-top:6px; box-shadow:
      123. 1px 1px 4px #111; -moz-box-shadow:
      124. 1px 1px 4px #111;
      125. -webkit-box-shadow: 1px 1px 4px #111;}
      126. figure a{
      127. display:block;}
      128. figure .act{
      129. background:#fff; position:absolute; top:0; left:0; width:100%; height:100%; display:block;}
      130. figure img,
      131. figure iframe{ position:relative; padding:5px;}
      132. .color1{ color:#fff;}
      133. .list1{ padding:6px 15px 4px 0;}
      134. .list1 li{
      135. margin-bottom:1px; background:#000; border:1px solid #1c1c1c; line-height:35px; position: relative;box-shadow:
      136. 1px 1px 4px #111; -moz-box-shadow:
      137. 1px 1px 4px #111;
      138. -webkit-box-shadow: 1px 1px 4px #111;}
      139. .list1 a{ display:block; padding-left:27px; text-transform:uppercase; color:#fff; background: url(../images/marker_1.gif) 10px 14px no-repeat; position:relative;}
      140. .list1 span{
      141. position:absolute; top:0; left:0; width:100%; height:100%; display:block; background:url(../images/button1_bg.gif) 0 0 repeat-x #fd870e; }
      142. .list1 a:hover{
      143. color:#fff;}
      144. .scroll{height:590px; width:100%; overflow:hidden}
      145. .track{ width:1px; height:600px; padding:30px 0; top: 50px !important; left:700px !important; background:#1f1f1f}
      146. .shuttle{ width:5px; height:55px; background:#000; margin-left:-2px;}
      147. ._up-butt, ._down-butt{
      148. height:0px !important;}
      149. /*
      150. ============================= footer ====================== */
      151. footer { padding-top:27px; line-height:16px; color:#a49b92}
      152. footer a{
      153. color:#a49b92}
      154. footer a:hover{
      155. color:#fff}
      156. footer .right{
      157. padding-top:7px;}
      158. #icons{}
      159. #icons li{
      160. padding-right:39px; background: url(../images/footer_line.gif) right 0 no-repeat; margin-right:44px; float:left; padding-top:5px; padding-bottom:10px;}
      161. #icons img{
      162. float:left; margin-right:10px;}
      163. #icons a{
      164. display:inline-block; font-size:10px; text-transform:uppercase; position:relative;}
      165. #icons .act{
      166. position:absolute; top:0; left:0;}
      167. /* =============================
      168. forms ============================= */
      169. #ContactForm{
      170. padding-top:5px; position: relative; padding-bottom:5px}
      171. #ContactForm .wrapper{
      172. overflow:inherit; min-height:43px;}
      173. #ContactForm .success{
      174. padding:25px 30px; display:none; position:absolute; z-index:2; background:#1c1c1c; top:200px; left:0; right:0; color:#ccc}
      175. #ContactForm
      176. label{ position:relative;min-height:37px; display: inline-block; z-index:1}
      177. #ContactForm
      178. .message{ height:348px;}
      179. #ContactForm span{ display:block}
      180. #ContactForm .error,
      181. #ContactForm .empty{ font-size:10px; color:#fff; line-height:14px; display:none; width:100%}
      182. #ContactForm a{
      183. float:right;}
      184. #ContactForm .input
      185. { margin:0;width:240px; height:15px; background: none; padding:10px 8px;color:#727272; font:13px Verdana;}
      186. #ContactForm
      187. textarea { overflow: auto; margin:0;width:317px; height:304px; background: none; padding:10px 8px;color:#727272; font:13px Verdana;}
      188. #ContactForm .bg{ background:#000; border:1px solid #1c1c1c; position:relative;box-shadow:
      189. 1px 1px 4px #111; -moz-box-shadow:
      190. 1px 1px 4px #111;
      191. -webkit-box-shadow: 1px 1px 4px #111; float:left;}
      192. Normal
      193. 0
      194. 21
      195. false
      196. false
      197. false
      198. DE
      199. X-NONE
      200. X-NONE
      201. MicrosoftInternetExplorer4
      202. /* Style Definitions */
      203. table.MsoNormalTable
      204. {mso-style-name:"Normale Tabelle";
      205. mso-tstyle-rowband-size:0;
      206. mso-tstyle-colband-size:0;
      207. mso-style-noshow:yes;
      208. mso-style-priority:99;
      209. mso-style-parent:"";
      210. mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
      211. mso-para-margin:0cm;
      212. mso-para-margin-bottom:.0001pt;
      213. mso-pagination:widow-orphan;
      214. font-size:10.0pt;
      215. font-family:"Times New Roman","serif";}
      Alles anzeigen


      Auf den ersten Blick würde ich sagen da ist noch mehr mit drin was ich nicht deuten kann.
      Dieses Thema wollte ich eigentlich wieder löschen wie ich oben schon geschrieben hatte. Daraufhin ist aber das supersized Thema entstanden. Welches besser funktioniert.

      Solche Fehler muss man direkt auf der Seite sehen ich kann das nicht so nachvollziehen.
      :hi: :mario:
    • Seh ich ja jetzt erst...ist ja alles nicht mit Website X5 erstellt.

      Deine Klasse bg1 musst du mall positionieren und den z-index vergeben


      also

      CSS-Quellcode

      1. .bg1 {position: relative; z-index: 2;}


      Dann bleibt der auch stehen.

      Das weiß werden liegt am fehlenden Bild

      CSS-Quellcode

      1. .cb-slideshow li:nth-child(3) span {
      2. background-image: url(../images/fade/bg3.jpg);
      3. -webkit-animation-delay: 12s;
      4. -moz-animation-delay: 12s;
      5. -o-animation-delay: 12s;
      6. -ms-animation-delay: 12s;
      7. animation-delay: 12s;
      8. }
      :hi: :mario: