Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

April 2017

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

Absturz bei FTP Publizierung
von nettesekel
16. April 2017, 12:51:56

E-Masil Adresse herausfinden
von nettesekel
11. April 2017, 16:16:20

Keine Neuinstallation möglich
von nettesekel
10. April 2017, 16:00:27

Publizieren geht nicht
von musikavokale
09. April 2017, 23:15:50

NOF 15
von nettesekel
04. April 2017, 23:55:26

Feststehender Seitenbereich
von nettesekel
01. April 2017, 17:37:12

Aufklappbare Navigation
von nettesekel
31. März 2017, 12:50:30

Nov 12 zum hare ausreisen
von Jim Panse
26. März 2017, 11:48:03

Lytebox Dateiablage
von fahrzeugseiten
21. März 2017, 23:23:23

* Schatznasen Feed

* Aquablogger Feed

* Strickzeugs Feed

* Links für Katzenfreunde

* ...

Fachanwalt für Internet-Recht C.Schmietenknop

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Autor Thema: CSS3 HoverEffekts für Bilder mit Content  (Gelesen 6927 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
CSS3 HoverEffekts für Bilder mit Content
« am: 27. März 2014, 12:55:24 »
Einer unserer User hat kürzlich diesen netten CSS3-Hover-Effekt im Web gefunden und ich erkläre nun kurz, wie man diesen Effekt in seine NOF-Projekte einbinden kann.

Dass die Einbindung in NOF möglich ist und wie das Ganze dann aussieht, könnt ihr in diesem Beispielprojekt ansehen und testen.

http://demos.nof-community.de/CSS3HoverEffekts/index.html
« Letzte Änderung: 15. Mai 2014, 18:06:41 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: CSS3 HoverEffekts für Bilder mit Content
« Antwort #1 am: 27. März 2014, 13:03:39 »
Vorab möchte ich darauf hinweisen, dass die Darstellung dieses Effekts nicht in jedem Browser gleichermaßen funktioniert. Unter HTML4.01 klappt im FireFox alles bestens im IE allerdings gibt es massive Darstellungsprobleme.
Eine Publizierung unter dem Doctype LOOSE hat in meinem Beispielprojekt Abhilfe geschaffen. (es steht euch frei auch andere Doctypen auszuprobieren)

Relevant für NOF9, NOF10, NOF11 und frühere Versionen

Bis einschließlich NOF 11 solltet ihr für die Publizierung von DocType LOOSE die DocTypeKomponente von SwissKnife nutzen.

Die Komponente könnt ihr hier downloaden.

Die Installation der Komponente ist hier beschrieben: http://www.nof-academy.de/SwissKnife-Tutorials/Installation/

Und eine Anleitung dazu, wie ihr sie benutzen könnt, findet ihr hier: http://www.nof-academy.de/SwissKnife-Tutorials/DocType/index.html

Bitte keien Scheu, das Ganze hört sich viel an, ist aber schnell erledigt und überhaupt nicht kompliziert.


Relevant für NOF12 und NOF13

Wer NOF12 oder 13 nutzt, kann den DocType Loose ohne Hilfsmittel generieren. Wählt hierzu einfach die HTML-Ausgabe HTML4.01 oder 4.01 with Tables und deaktiviert den Quirksmodus. Wie das geht, zeigt der folgende Screenshot...

« Letzte Änderung: 02. April 2014, 22:23:51 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: CSS3 HoverEffekts für Bilder mit Content
« Antwort #2 am: 27. März 2014, 13:04:25 »
Zunächst solltet ihr euch die benötigten Bilder auf das passende Maß zuschneiden.
Wenn ihr keine UMfangreichen Änderungen am CSS-Code machen möchtet sollten die Bilder eine Größe von 283x164px haben. Bindet diese Bilder als Assets in euer Projekt ein. Eine Anleizung zu diesem Vorgang findet ihr hier: http://www.nof-academy.de/Zusaetzliche%20Assets%20in%20NOF%20einbinden/


Imnächsten Schritt fügt ihr die Styleangaben in euer Projekt ein. Da man den Effekt sicher nicht im kompletten Projekt nutzen wird und NOF u.U. mit einigen der Styleangaben Probleme hat, wenn wir sie im Design einbinden, würde ich empfehlen, diese Angaben direkt in die Seite zu integrieren, auf welcher der Effekt genutzt werden soll.

Öffnet also die Seite eurer Wahl und fügt den folgenden Code ins Layout-HTML zwischen den Head-Tags ein. (solltet ihr das Ganze doch auf mehreren Seiten nutzen wollen, könnt ihr den Code auch im Masterrahmen-HTML platzieren)
Wer nicht weiß, wie man Code zwischen den Head-Tags einer Seite einfügt, findet hier eine Anleitung/Erklärung dazu: www.nof-community.de/index.php/topic,851.0

Code: HTML5
  1. <style type="text/css">
  2. .our_menu{width:970px; margin:0 auto;}
  3. ul,li{margin:0;padding:0;list-style:none}
  4. .menu .item{float:left;position:relative}
  5. .menu .item .new{background-position:-248px -482px;height:28px;left:-9px;padding:7px 0 0 7px;top:41px;width:55px; background:#F00;color:#FFF;display:block;font-family:"league-gothic",sans-serif;font-size:18px;position:absolute;text-transform:uppercase;z-index:1; }
  6. .menu .item a{background-color:#FFF;color:#820922;display:block;overflow:hidden;position:absolute;box-shadow:0 0 7px 0 #CCC;-moz-box-shadow:0 0 7px 0 #CCC;-webkit-box-shadow:0 0 7px 0 #CCC}
  7. .menu .item a:hover{z-index:2;-webkit-transition:height .2s ease-in-out;-moz-transition:height .2s ease-in-out;-o-transition:height .2s ease-in-out;-ms-transition:height .2s ease-in-out;transition:height .2s ease-in-out}
  8. .menu .item:hover .new{z-index:3}
  9. .menu .item a h3{border:0;font-family:"league-gothic",sans-serif;font-size:18px;margin:0 0 .5em 0;padding:0;text-transform:uppercase; }
  10. .menu .item a p{color:#432;font-size:16px;}
  11. .our_menu .menu{float:left;margin:0 0 50px 0}
  12. .our_menu .menu .item{background-position:9px -791px;height:170px;padding:0 0 0 7px;width:316px}
  13. .our_menu .menu .item a{height:25px;padding:114px 0 0 14px;top:20px;width:295px;text-decoration:none;}
  14. .our_menu .menu .item a:hover{height:145px;padding-top:179px}
  15. .our_menu .menu .item a img{clip:rect(0px,283px,96px,0px);height:164px;position:absolute;top:14px;width:283px}
  16. .our_menu .menu .item a:hover img{clip:auto}
  17. .our_menu .menu .item .new{left:-1px}
  18. a img {border:none;}
« Letzte Änderung: 03. April 2014, 10:21:06 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: CSS3 HoverEffekts für Bilder mit Content
« Antwort #3 am: 02. April 2014, 21:56:49 »
Nun muss nur noch der Code für die Bild/Text-Boxen in eurer Seite platziert werden. Fügt hierzu ein Textfeld in eure Seite ein und platziert es dort, wo die Boxen erscheinen sollen. Ihr müsst das Textfeld nicht unbedingt in die Höhe oder Breite ziehen.

Zunächst solltet ihr euch den nachfolgenden Code in euren Editor kopieren und euren Bedürfnissen entsprechend bearbeiten. (Erklärung im nachfolgenden Post) Wenn ihr damit fertig seid, kopiert ihr den fertigen Code und fügt ihn nun nach dieser Anleitung https://www.nof-community.de/index.php/topic,47.0 in das Textfeld ein.

Code: HTML5
  1. <div class="our_menu">
  2.             <ul class="menu">
  3.                     <li class="item">
  4.                        <strong class="new">new</strong>
  5.                           <a href="https://www.nof-community.de/index.php?action=impressum">
  6.                             <h3>Lorem ipsum dolor</h3>
  7.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  8.                             <img src="./assets/images/1.png" alt="2 for 20" height="164" width="283">
  9.                          </a>
  10.                     </li>
  11.                     <li class="item">
  12.                        <strong class="new">new</strong>
  13.                        <a href="https://www.nof-community.de/index.php?action=impressum">
  14.                      <h3>Lorem ipsum dolor</h3>
  15.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  16.                             <img src="./assets/images/2.png" height="164" width="283">
  17.                         </a>
  18.                     </li>
  19.                     <li class="item">
  20.                           <strong class="new">new</strong>
  21.                        <a href="https://www.nof-community.de/index.php?action=impressum">
  22.                             <h3>Lorem ipsum dolor</h3>
  23.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  24.                             <img src="./assets/images/3.png" alt="Alternate" height="164" width="283">
  25.                        </a>
  26.                     </li>
  27.                     <li class="item">
  28.                        <a href="https://www.nof-community.de/index.php?action=impressum">
  29.                             <h3>Lorem ipsum dolor</h3>
  30.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  31.                             <img src="./assets/images/4.png" height="164" width="283">
  32.                        </a>
  33.              </li>
  34.                     <li class="item">
  35.                       <a href="https://www.nof-community.de/index.php?action=impressum">
  36.                             <h3>Lorem ipsum dolor</h3>
  37.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  38.                             <img src="./assets/images/5.png" alt="" height="164" width="283">
  39.                       </a>
  40.                     </li>
  41.              <li class="item">
  42.                        <a href="https://www.nof-community.de/index.php?action=impressum">
  43.                             <h3>Lorem ipsum dolor</h3>
  44.                             <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  45.                             <img src="./assets/images/6.png" height="164" width="283">
  46.                        </a>
  47.                     </li>
  48.            </ul>    
  49.         </div>
« Letzte Änderung: 05. April 2014, 10:54:56 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: CSS3 HoverEffekts für Bilder mit Content
« Antwort #4 am: 03. April 2014, 10:51:37 »
Der Code für eine einzelne Box beginnt jeweils mit

Code: HTML5
  1. <li class="item">

und endet mit

Code: HTML5
  1. </li>

-----------------------------------------------------------------------------------------------------

Solltet ihr also mehr als die vorhandenen Boxen einbinden wollen, müsst ihr nach dem letzen

Code: HTML5
  1. </li>

zusätzliche Codeblöcke einfügen. Ein kompletter Code-Block für eine Box sieht so aus:

Code: HTML5
  1.                         <li class="item">
  2.                            <strong class="new">new</strong>
  3.                               <a href="https://www.nof-community.de/index.php?action=impressum">
  4.                                 <h3>Lorem ipsum dolor</h3>
  5.                                 <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  6.                                 <img src="./assets/images/1.png" alt="2 for 20" height="164" width="283">
  7.                              </a>
  8.                         </li>

-----------------------------------------------------------------------------------------------------

Die Zeile

Code: HTML5
  1. <strong class="new">new</strong>

benötigt nur dann, wenn in der Box die New-Kennzeichnung erscheinen soll.
Bei genauerem Betrachten des kompletten Codes werdet ihr erkennen, dass nur die ersten 3 Code-Blöcke diese Zeile enthalten, da auch nur die ersten 3 Boxen die Kennzeichnung "New" enthalten.

-----------------------------------------------------------------------------------------------------

In der nachfolgenden Zeile ersetzt ihr meinen Link gegen den, den der Besucher aufrufen soll, wenn er auf das jeweilige Bild klickt.

Code: HTML5

-----------------------------------------------------------------------------------------------------

In dieser Zeile

Code: HTML5
  1. <h3>Lorem ipsum dolor</h3>

tauscht ihr den Text "Lorem ipsum dolor" gegen die jeweilige Überschrift aus, die unterhalb des Bildes sichtbar ist. Achtet darauf dass sie nicht zu lang wird.

-----------------------------------------------------------------------------------------------------

In dieser Zeile

Code: HTML5
  1. <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>

tauscht ihr den Text zwischen den <p></p> gegen euren eigenen Beschreibungstext aus, welcher bei mausover eingeblendet wird.

-----------------------------------------------------------------------------------------------------

Und zum guten Schluss editiert ihr die Pfadangabe zum jeweilgen Bild

Code: HTML5
  1. <img src="./assets/images/1.png" alt="2 for 20" height="164" width="283">

wobei zu beachten wäre, dass bei verwendung auf der Startseite der Pfad mit einem Punkt beginnt, bei Verwendung auf allen Unterseiten muss er mit 2 Punkten beginnen. (ausgehend von einer Publizierung nach Assettyp)

-----------------------------------------------------------------------------------------------------

Ich wünsche gutes gelingen!



Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion