Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Aufgrund der anstehenden gesetzlichen Änderungen in Sachen Datenschutz habe ich am 03.05.2018 eine umfassende Bereinigung unserer Datenbanken vorgenommen.

Bei dieser Bereinigung habe ich alle personenbezogenen und privaten Daten unserer Mitglieder aus den Mitglieder- , Beitrags- und Nachrichtendatenbanken gelöscht.

Konkret von der Löschung betroffen waren hierbei im Wesentlichen folgende Daten:

persönliche Avatare
E-Mail-Adressen
Angaben zum Wohnort
Angaben zum Geschlecht
Angaben zu Alter und Geburtstag
IP-Adressen
Websites und Websitetitel
Signaturen
Angaben zu diversen Messengern
Passwörter
Sicherheitsfragen und -antworten
Angaben zur verwendeten Programmversion
Angaben zum verwendeten Betriebssystem
sämtlicher persönlicher Schriftverkehr in Form privater Nachrichten

Beste Grüße nettesekel

* Friendship

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

Die letzten Beiträge

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

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
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
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
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
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 http://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="http://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="http://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="http://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="http://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="http://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="http://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
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="http://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