Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Autor Thema: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF  (Gelesen 3191 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit

Ich bin mir nicht sicher, wie man das Teil nennen soll... Content-slider?... Nachrichten-Slider? oder Menü-Slider? Egal wie man es nennt, euer Feedback hat mir gezeigt, dass viele von Euch Verwendung dafür haben werden und so versuche ich nun mal zu erklären, wie ihr diesen Slider in euer NOF-Projekt einbinden könnt.

Für alle die noch nicht wissen, worum es geht, es geht um diesen von mir erstellten Slider, den man für die verschiedensten Zwecke in seinem Webprojekt verwenden kann.
http://demos.nof-community.de/ContentNewsSlider/

Der Slider ist eine reine Code-Lösung, was bedeutet, dass alle Änderungen/Anpassungen im HTML/CSS-Code des Sliders vorgenommen werden müssen. Das Einzige, was ihr in eurere Arbeitsansicht sehen werdet, ist das kleine Textfeld in welches Ihr den html-Code des Sliders einfügen werdet.

Wer den Slider in sein Projekt einbinden möchte, sollte also keine Scheu haben, sich mit HTML-Code oder CSS auseinanderzusetzen.
Wobei es weniger schlimm ist, wenn man den Slider optisch unverändert lässt und nur die eigenen Inhalte einbindet.
Möchte man das Aussehen des Sliders ändern, dann ist der Aufwand schon ein wenig größer.

Achtung! Damit der Slider auch im IE fehlerfrei funktioniert, publiziert die Seite bitte unter dem Doctype LOOSE.
Für Nutzer älterer NOF-Versionen gibt es hierfür eine Komponente von SwissKnife die ihr hier downloaden könnt: http://www.nof-academy.de/html/SwissKnife-Komponenten_fuer_NetObjects_Fusion.php

Und hier findet ihr eine Anleitung zur Verwendung der Kompo: http://www.nof-academy.de/SwissKnife-Tutorials/DocType/index.html
« Letzte Änderung: 12. Mai 2014, 19:05:01 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #1 am: 12. Februar 2014, 20:03:55 »
Der Slider besteht im Prinzip auch 3 Bestandteilen:
jQuery
CSS
HTML

Platziert also zunächst mal die folgende Verlinkung zwischen den head-Tags der Seite, auf welcher der Slider laufen soll:
Code: HTML5

Wer nicht weiß, wie das geht, findet ihr eine Anleitung dazu: www.nof-community.de/index.php/topic,851.0
Da der Slider wahrscheinlich nicht auf allen Seiten laufen soll, würde ich empfehlen die Verlinkung im Layout-html (F9) einzutragen.

Zusätzlich fügt ihr dieses kleine Javascript am Body-Ende der Seite ein. Habt ihr euch bei der Verlinkung fürs Layout-html entschieden, so solltet ihr auch diese Einfügung im Layout-html vornehmen.

Code: Javascript
  1. <script type="text/javascript">
  2. var $gal = $('#gallery'),
  3.     $sli = $('#slider'),
  4.     $box = $('div.slide',$sli),
  5.     W    = $gal.width(), // 500
  6.     N    = $box.length,  // 3
  7.     C    = 0;            // a counter
  8.  
  9. $sli.width(W*N);
  10.  
  11.  
  12. $('#prev, #next').click(function(){
  13.   C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
  14.   $sli.stop().animate({left: -C*W },800);
  15. });
  16. </script>


« Letzte Änderung: 13. Februar 2014, 22:56:30 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #2 am: 12. Februar 2014, 20:15:45 »
Als nächstes wenden wir uns der CSS-Datei zu. Im Beispielprojekt habe ich die CSS zwischen den head-Tags der Seite eingefügt, was grundsätzlich kein Problem darstellt. Möchtet ihr in eurem Projekt genauso vorgehen, dann fügt ihr folgenden Code zwischen den Head-tags eurer Seite ein. Ihr könnt ihn im Prinzip direkt eine Zeile (eventuell eine Leerzeile dazwischen) unter der vorher eingefügten Verlinkung einfügen.

Code: HTML5
  1. <style type="text/css">
  2. p{
  3.   margin-bottom: 8px;
  4. }
  5. .h2{
  6.   font-size: 16px;
  7.   color: #FFFFFF; /* Fallback IE 6-8 */
  8.   color: rgba(255,255,255,0.8);
  9.   margin-bottom:0px;
  10.   padding: 5px 0px 6px 10px;
  11.   text-transform:uppercase;
  12. }
  13. .h3{
  14.   font-size: 14px;
  15.   margin-bottom: 8px;
  16. }
  17. #container{
  18.   width:990px;
  19.   padding: 15px 8px;
  20.   background-color: #626262; /* Fallback IE 6-8 */
  21.   background-color: rgba(59,59,59,0.8);
  22.   background-image: url(./assets/images/raster.png);
  23.   }
  24. #gallery{
  25.   position:relative;
  26.   margin: 0 auto;
  27.   overflow:hidden;
  28.   width:974px;
  29.   height:418px;
  30. }
  31. #slider{
  32.   position:absolute;
  33.   height:370px;
  34.   left:0;
  35.   text-align:left; /* to reset text inside slides */
  36. }
  37. #slider > div {
  38.   position:relative;
  39.   float:left;
  40.   width:974px;
  41.   height:370px;
  42. }
  43. .news_div{
  44.  width: 242px;
  45.  float:left;
  46. }
  47. .head_line{
  48.   height:30px;
  49.   margin: 0 auto;
  50.   margin-bottom: 2px;
  51. }
  52. .hl_1{
  53.   background-color: rgb(195,0,39); /* Fallback IE 6-8 */
  54.   background-color: rgba(195,0,39,0.5);
  55. }
  56. .hl_2{
  57.   background-color: rgb(255,115,0); /* Fallback IE 6-8 */
  58.   background-color: rgba(255,115,0,0.5);
  59. }
  60. .hl_3{
  61.   background-color: rgb(0,135,90); /* Fallback IE 6-8 */
  62.   background-color: rgba(0,135,90,0.5);
  63. }
  64. .hl_4{
  65.   background-color: rgb(60,60,255); /* Fallback IE 6-8 */
  66.   background-color: rgba(60,60,255,0.5);
  67. }
  68. .image{
  69.  width: 215px;
  70.  height:140px;
  71.  margin: 0 auto;
  72.  -webkit-box-shadow: 0 0 2em rgba(0,0,0,0.25);
  73.     -moz-box-shadow: 0 0 2em rgba(0,0,0,0.25);
  74.          box-shadow: 0 0 2em rgba(0,0,0,0.25);
  75. }
  76. .content{
  77.  width: 215px;
  78.  height:174px;
  79.  margin: 0 auto;
  80.  margin-top: 10px;
  81.  font-size: 12px;
  82. }
  83. #prev, #next{
  84.   display:inline-block;
  85.   cursor:pointer;
  86. }
  87. #prev_div{
  88.   width: 50%;
  89.   text-align:left;
  90.   float:left;
  91.   position:relative;
  92.   top:370px;
  93.   margin-top:2px;
  94. }
  95. #next_div{
  96.   width: 50%;
  97.   text-align:right;
  98.   display:inline-block;
  99.   position:relative;
  100.   top:370px;
  101.   margin-top:2px;
  102. }
  103. .first{
  104.   margin-right:2px;
  105. }
  106. div.style{
  107.   background-color: #A1A1A1; /* Fallback IE 6-8 */
  108.   background-color: rgba(255,255,255,0.4);
  109.   color: #333333;
  110.   padding-top:14px;
  111. }
  112. div.style:hover{
  113.   background-color: #3B3B3B; /* Fallback IE 6-8 */
  114.   background-color: rgba(0,0,0,0.4);
  115.   color: #E1E1E1;
  116. }
  117. div.prev{
  118.   background: url(./assets/images/button.png) 0% 0% no-repeat;
  119.   width: 64px;
  120.   height: 46px;
  121. }
  122. div.prev:hover{
  123.   background: url(./assets/images/button.png) 0% 100% no-repeat;
  124. }
  125. div.next{
  126.   background: url(./assets/images/button.png) 100% 0% no-repeat;
  127.   width: 64px;
  128.   height: 46px;
  129. }
  130. div.next:hover{
  131.   background: url(./assets/images/button.png) 100% 100% no-repeat;
  132. }
  133. .clearfloat{
  134.   clear: both;
  135. }
  136. a img{
  137.   border:none;
  138. }
  139. .mylink{
  140.   font-size: 12px;
  141.   font-weight: bold;
  142.   text-decoration:none;
  143. }
  144. .ml_1{
  145.   color: rgb(195,0,39); /* Fallback IE 6-8 */
  146.   color: rgba(195,0,39,0.8);
  147. }
  148. .ml_2{
  149.   color: rgb(255,115,0); /* Fallback IE 6-8 */
  150.   color: rgba(255,115,0,0.8);
  151. }
  152. .ml_3{
  153.   color: rgb(0,135,90); /* Fallback IE 6-8 */
  154.   color: rgba(0,135,90,0.8);
  155. }
  156. .ml_4{
  157.   color: rgb(60,60,255); /* Fallback IE 6-8 */
  158.   color: rgba(60,60,255,0.8);
  159. }



Alternativ könnt ihr die Styleangaben aber auch in eine eigene Styledatei schreiben und dann eine Verlinkung zu dieser Datei zwischen den head-Tags der Seite einbinden.
Dazu öffnet ihr euren Editor kopiert ihr diesen Code in eine leer Datei und speichert sie unter slider.css ab.

Code: HTML5
  1. p{
  2.   margin-bottom: 8px;
  3. }
  4. .h2{
  5.   font-size: 16px;
  6.   color: #FFFFFF; /* Fallback IE 6-8 */
  7.   color: rgba(255,255,255,0.8);
  8.   margin-bottom:0px;
  9.   padding: 5px 0px 6px 10px;
  10.   text-transform:uppercase;
  11. }
  12. .h3{
  13.   font-size: 14px;
  14.   margin-bottom: 8px;
  15. }
  16. #container{
  17.   width:990px;
  18.   padding: 15px 8px;
  19.   background-color: #626262; /* Fallback IE 6-8 */
  20.   background-color: rgba(59,59,59,0.8);
  21.   background-image: url(./assets/images/raster.png);
  22.   }
  23. #gallery{
  24.   position:relative;
  25.   margin: 0 auto;
  26.   overflow:hidden;
  27.   width:974px;
  28.   height:418px;
  29. }
  30. #slider{
  31.   position:absolute;
  32.   height:370px;
  33.   left:0;
  34.   text-align:left; /* to reset text inside slides */
  35. }
  36. #slider > div {
  37.   position:relative;
  38.   float:left;
  39.   width:974px;
  40.   height:370px;
  41. }
  42. .news_div{
  43.  width: 242px;
  44.  float:left;
  45. }
  46. .head_line{
  47.   height:30px;
  48.   margin: 0 auto;
  49.   margin-bottom: 2px;
  50. }
  51. .hl_1{
  52.   background-color: rgb(195,0,39); /* Fallback IE 6-8 */
  53.   background-color: rgba(195,0,39,0.5);
  54. }
  55. .hl_2{
  56.   background-color: rgb(255,115,0); /* Fallback IE 6-8 */
  57.   background-color: rgba(255,115,0,0.5);
  58. }
  59. .hl_3{
  60.   background-color: rgb(0,135,90); /* Fallback IE 6-8 */
  61.   background-color: rgba(0,135,90,0.5);
  62. }
  63. .hl_4{
  64.   background-color: rgb(60,60,255); /* Fallback IE 6-8 */
  65.   background-color: rgba(60,60,255,0.5);
  66. }
  67. .image{
  68.  width: 215px;
  69.  height:140px;
  70.  margin: 0 auto;
  71.  -webkit-box-shadow: 0 0 2em rgba(0,0,0,0.25);
  72.     -moz-box-shadow: 0 0 2em rgba(0,0,0,0.25);
  73.          box-shadow: 0 0 2em rgba(0,0,0,0.25);
  74. }
  75. .content{
  76.  width: 215px;
  77.  height:174px;
  78.  margin: 0 auto;
  79.  margin-top: 10px;
  80.  font-size: 12px;
  81. }
  82. #prev, #next{
  83.   display:inline-block;
  84.   cursor:pointer;
  85. }
  86. #prev_div{
  87.   width: 50%;
  88.   text-align:left;
  89.   float:left;
  90.   position:relative;
  91.   top:370px;
  92.   margin-top:2px;
  93. }
  94. #next_div{
  95.   width: 50%;
  96.   text-align:right;
  97.   display:inline-block;
  98.   position:relative;
  99.   top:370px;
  100.   margin-top:2px;
  101. }
  102. .first{
  103.   margin-right:2px;
  104. }
  105. div.style{
  106.   background-color: #A1A1A1; /* Fallback IE 6-8 */
  107.   background-color: rgba(255,255,255,0.4);
  108.   color: #333333;
  109.   padding-top:14px;
  110. }
  111. div.style:hover{
  112.   background-color: #3B3B3B; /* Fallback IE 6-8 */
  113.   background-color: rgba(0,0,0,0.4);
  114.   color: #E1E1E1;
  115. }
  116. div.prev{
  117.   background: url(./assets/images/button.png) 0% 0% no-repeat;
  118.   width: 64px;
  119.   height: 46px;
  120. }
  121. div.prev:hover{
  122.   background: url(./assets/images/button.png) 0% 100% no-repeat;
  123. }
  124. div.next{
  125.   background: url(./assets/images/button.png) 100% 0% no-repeat;
  126.   width: 64px;
  127.   height: 46px;
  128. }
  129. div.next:hover{
  130.   background: url(./assets/images/button.png) 100% 100% no-repeat;
  131. }
  132. .clearfloat{
  133.   clear: both;
  134. }
  135. a img{
  136.   border:none;
  137. }
  138. .mylink{
  139.   font-size: 12px;
  140.   font-weight: bold;
  141.   text-decoration:none;
  142. }
  143. .ml_1{
  144.   color: rgb(195,0,39); /* Fallback IE 6-8 */
  145.   color: rgba(195,0,39,0.8);
  146. }
  147. .ml_2{
  148.   color: rgb(255,115,0); /* Fallback IE 6-8 */
  149.   color: rgba(255,115,0,0.8);
  150. }
  151. .ml_3{
  152.   color: rgb(0,135,90); /* Fallback IE 6-8 */
  153.   color: rgba(0,135,90,0.8);
  154. }
  155. .ml_4{
  156.   color: rgb(60,60,255); /* Fallback IE 6-8 */
  157.   color: rgba(60,60,255,0.8);
  158. }

Diese Datei kopiert dann in den html-Ordner eurer lokalen Publizierung und ebenfalls in den html-Order auf eurem Server.

Anstelle des CSS_Codes fügt ihr dann nur noch die Verlinkung zu dieser datei zwischen den Head-Tags eurer Seite ein. Achtet darauf dass beim Einsatz auf der Startseite der Pfad zur Style-Datei mit nur einem Punkt beginnen darf!

Code: HTML5
  1. <link rel="stylesheet" type="text/css" href="../html/slider.css">


Die Datei direkt in NOF zu integrieren, würde ich allenfalls für die 2 neusten NOF-Versionen empfehlen, da es sein kann dass einige der von mir verwendeten CSS-Regeln von einigen NOF-Versionen als ungültig erkannt und gelöscht werden. Wie das dann in den neusten Versionenn gemacht werden könnte, ist hier beschrieben: http://www.nof-community.de/index.php/topic,1536.0


Auf die Anpassung der CSS-Datei gehe ich an dieser Stelle nicht ein, zu diesem Thema werde ich am Ende dieses Tutorials einen Link posten, unter welchem sowohl der CSS-Teil als auch der html-Teil verständlich gemacht werden.
« Letzte Änderung: 16. Februar 2014, 15:04:48 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #3 am: 13. Februar 2014, 12:25:41 »
Wenn ihr den Slider identisch nachbauen möchtet, benötigt ihr nun als nächstest die Grafiken für die Button und den Hintergrund.

Ihr dürft die von mir erstellten Grafiken für euren Slider verwenden. Speichert sie euch mit einem Rechtsklick auf die Grafik und der Auswahl "speichern unter" ab und kopiert sie in den Ordner assets >> images
eurer lokalen Publizierung und ebenso in den gleichnamigen Ordner auf eurem Server.

Alternativ könnt ihr die Grafiken auch als Assets in euer Projekt einbinden, dann werden sie von NOF in den entsprechenden Ordner publiziert. Eine Anleitung hierzu findet ihr unter diesem Link: www.nof-community.de/index.php/topic,11.0





Die Fotos in meinem Slider haben ein Maß von 215 x 140px.
Wenn ihr keine Änderungen am CSS-Code vornehmen möchtet, dann solltet ihr eure Bilder identisch groß erstellen.
« Letzte Änderung: 14. Februar 2014, 11:43:29 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #4 am: 13. Februar 2014, 22:58:33 »
Nun kommen wir zum html-Code, dem Code für den Slider selbst.

Dieser Code wird kopiert und ins html eines Textfeldes eingefügt. Für die, die eine Anleitung hierzu brauchen hier ein link:www.nof-community.de/index.php/topic,47.0

Ich habe hier bewußt den kompletten Code meines Beispielsliders gepostet, damit ihr den Aufbau eines Sliders mit mehren Slides besser nachvollziehen könnt.

Code: HTML5
  1. <div id="container">
  2.   <div id="gallery">
  3.     <div id="slider">
  4.      <!-- ##### Slide 1 ######################################################################################### -->
  5.       <div class="slide">
  6.        <!-- ##### Slide 1 - Nachricht 1 ######################################################################################### -->
  7.         <div class="news_div first">
  8.           <div class="head_line hl_1"><h2 class="h2">Nachricht 1</h2></div>
  9.             <div class="style">
  10.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild1.jpg"></a></div>
  11.               <div class="content">
  12.                 <h3 class="h3">Überschrift</h3>
  13.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  14.  
  15. ridiculus mus.</p>
  16.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_1">mehr lesen...</a>
  17.               </div>
  18.             </div>
  19.         </div>
  20.        <!-- ##### Slide 1 - Nachricht 2 ######################################################################################### -->
  21.         <div class="news_div first">
  22.           <div class="head_line hl_2"><h2 class="h2">Nachricht 2</h2></div>
  23.             <div class="style">
  24.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild2.jpg"></a></div>
  25.               <div class="content">
  26.                 <h3 class="h3">Überschrift</h3>
  27.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  28.  
  29. ridiculus mus.</p>
  30.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_2">mehr lesen...</a>
  31.               </div>
  32.             </div>
  33.         </div>
  34.        <!-- ##### Slide 1 - Nachricht 3 ######################################################################################### -->
  35.         <div class="news_div first">
  36.           <div class="head_line hl_3"><h2 class="h2">Nachricht 3</h2></div>
  37.             <div class="style">
  38.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild3.jpg"></a></div>
  39.               <div class="content">
  40.                 <h3 class="h3">Überschrift</h3>
  41.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  42.  
  43. ridiculus mus.</p>
  44.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_3">mehr lesen...</a>
  45.               </div>
  46.             </div>
  47.         </div>
  48.        <!-- ##### Slide 1 - Nachricht 4 ######################################################################################### -->
  49.         <div class="news_div">
  50.           <div class="head_line hl_4"><h2 class="h2">Nachricht 4</h2></div>
  51.             <div class="style">
  52.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild4.jpg"></a></div>
  53.               <div class="content">
  54.                 <h3 class="h3">Überschrift</h3>
  55.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  56.  
  57. ridiculus mus.</p>
  58.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_4">mehr lesen...</a>
  59.               </div>
  60.             </div>
  61.         </div>
  62.         <div class="clearfloat"></div>
  63.       </div>
  64.       <!-- ##### Slide 2 ######################################################################################### -->
  65.       <div class="slide">
  66.        <!-- ##### Slide 2 - Nachricht 1 ######################################################################################### -->
  67.         <div class="news_div first">
  68.           <div class="head_line hl_1"><h2 class="h2">Nachricht 1</h2></div>
  69.             <div class="style">
  70.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild5.jpg"></a></div>
  71.               <div class="content">
  72.                 <h3 class="h3">Überschrift</h3>
  73.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  74.  
  75. ridiculus mus.</p>
  76.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_1">mehr lesen...</a>
  77.               </div>
  78.             </div>
  79.         </div>
  80.        <!-- ##### Slide 2 - Nachricht 2 ######################################################################################### -->
  81.         <div class="news_div first">
  82.           <div class="head_line hl_2"><h2 class="h2">Nachricht 2</h2></div>
  83.             <div class="style">
  84.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild6.jpg"></a></div>
  85.               <div class="content">
  86.                 <h3 class="h3">Überschrift</h3>
  87.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  88.  
  89. ridiculus mus.</p>
  90.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_2">mehr lesen...</a>
  91.               </div>
  92.            </div>
  93.         </div>
  94.        <!-- ##### Slide 2 - Nachricht 3 ######################################################################################### -->
  95.         <div class="news_div first">
  96.           <div class="head_line hl_3"><h2 class="h2">Nachricht 3</h2></div>
  97.             <div class="style">
  98.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild7.jpg"></a></div>
  99.               <div class="content">
  100.                 <h3 class="h3">Überschrift</h3>
  101.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  102.  
  103. ridiculus mus.</p>
  104.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_3">mehr lesen...</a>
  105.               </div>
  106.             </div>
  107.         </div>
  108.        <!-- ##### Slide 2 - Nachricht 4 ######################################################################################### -->
  109.         <div class="news_div">
  110.           <div class="head_line hl_4"><h2 class="h2">Nachricht 4</h2></div>
  111.             <div class="style">
  112.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild8.jpg"></a></div>
  113.               <div class="content">
  114.                 <h3 class="h3">Überschrift</h3>
  115.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  116.  
  117. ridiculus mus.</p>
  118.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_4">mehr lesen...</a>
  119.               </div>
  120.             </div>
  121.         </div>
  122.         <div class="clearfloat"></div>
  123.       </div>
  124.       <!-- ##### Slide 3 ######################################################################################### -->
  125.       <div class="slide">
  126.        <!-- ##### Slide 3 - Nachricht 1 ######################################################################################### -->
  127.         <div class="news_div first">
  128.           <div class="head_line hl_1"><h2 class="h2">Nachricht 1</h2></div>
  129.             <div class="style">
  130.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild9.jpg"></a></div>
  131.               <div class="content">
  132.                 <h3 class="h3">Überschrift</h3>
  133.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  134.  
  135. ridiculus mus.</p>
  136.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_1">mehr lesen...</a>
  137.               </div>
  138.             </div>
  139.         </div>
  140.        <!-- ##### Slide 3 - Nachricht 2 ######################################################################################### -->
  141.         <div class="news_div first">
  142.           <div class="head_line hl_2"><h2 class="h2">Nachricht 2</h2></div>
  143.             <div class="style">
  144.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild10.jpg"></a></div>
  145.               <div class="content">
  146.                 <h3 class="h3">Überschrift</h3>
  147.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  148.  
  149. ridiculus mus.</p>
  150.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_2">mehr lesen...</a>
  151.               </div>
  152.             </div>
  153.         </div>
  154.        <!-- ##### Slide 3 - Nachricht 3 ######################################################################################### -->
  155.         <div class="news_div first">
  156.           <div class="head_line hl_3"><h2 class="h2">Nachricht 3</h2></div>
  157.             <div class="style">
  158.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild11.jpg"></a></div>
  159.               <div class="content">
  160.                 <h3 class="h3">Überschrift</h3>
  161.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  162.  
  163. ridiculus mus.</p>
  164.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_3">mehr lesen...</a>
  165.               </div>
  166.             </div>
  167.         </div>
  168.        <!-- ##### Slide 3 - Nachricht 4 ######################################################################################### -->
  169.         <div class="news_div">
  170.           <div class="head_line hl_4"><h2 class="h2">Nachricht 4</h2></div>
  171.             <div class="style">
  172.               <div class="image"><a href="" target="_blank"><img src="./assets/images/bild12.jpg"></a></div>
  173.               <div class="content">
  174.                 <h3 class="h3">Überschrift</h3>
  175.                 <p>Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nato que penatibus et magnis dis part urient montes, nascetur
  176.  
  177. ridiculus mus.</p>
  178.                 <a href="http://www.nof-academy.de" target="_blank" class="mylink ml_4">mehr lesen...</a>
  179.               </div>
  180.             </div>
  181.         </div>
  182.         <div class="clearfloat"></div>
  183.       </div>
  184.     </div>
  185.     <div id="prev_div"><div id="prev" class="prev"></div></div>
  186.     <div id="next_div"><div id="next" class="next"></div></div>
  187.     <div class="clearfloat"></div>
  188.   </div>
  189. </div>


Für alle Anpassungen den html-Code und auch den CSS-Code betreffend habe ich unter folgendem Link versucht sowohl den html-Code als auch den CSS-Code mit Hilfe farblicher Markierungen und diverser Text-und Bildhinweise anschaulich zu erläutern.
Ich habe bewußt die Grafik vom Slider festgesetzt, damit jederzeit ein Vergleich des Codes mit der Grafik erfolgen kann. Alle unterstrichenen Textabschnitte enthalten versteckte Hinweise und Erläuterungen. http://demos.nof-community.de/ContentNewsSlider/html/erklarung_zum_slider.html



« Letzte Änderung: 16. Februar 2014, 12:18:06 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Content-Slider, Nachrichten-Slider, Menü-Slider... für NOF
« Antwort #5 am: 16. Februar 2014, 12:18:40 »
Ich wünsche euch gutes Gelingen und würde mich über Feedback zur Verständlichkeit des Tutorials sowie über Links zu euren eingebauten Slidern freuen.  >> Feedback <<

l.g. nettesekel


« Letzte Änderung: 19. Februar 2014, 13:57:53 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)