Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Neuigkeiten der NOF-Community

Die letzten Beiträge

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

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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 »
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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...

Screenshots sind nur für Mitglieder sichtbar. Bitte einloggen oder registrieren.
« Letzte Änderung: 02. April 2014, 22:23:51 von nettesekel »
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.
« Letzte Änderung: 03. April 2014, 10:21:06 von nettesekel »
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.
« Letzte Änderung: 05. April 2014, 10:54:56 von nettesekel »
Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 7828
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


und endet mit

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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

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

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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

Die Zeile

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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

In dieser Zeile

Code:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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:
1.

Dieser Code ist nur für Mitglieder sichtbar.
Bitte einloggen oder registrieren.


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!


Kannst du so machen, dann isses halt kacke.

Fragen - die inhaltlich ins Forum gehören - sind grundsätzlich im Forum zu stellen und werden auch nur dort beantwortet, damit Alle durch deren Erörterung lernen und von ihr profitieren können. 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... ;)