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: Links mit Icons versehen  (Gelesen 1925 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Links mit Icons versehen
« am: 02. Juni 2013, 19:00:45 »
Links kann man mit CSS so formatieren das an diese ein Icon angehängt wird.
Die ist zum Beispiel schön wenn Links zu PDF-Dokumenten hat oder auch externe Links kennzeichen will. Auch Affiliate-Links können so gekennzeichnet werden.
« Letzte Änderung: 02. Februar 2014, 15:24:32 von Dada »
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!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
[CSS] Links mit Icons versehen - Wichtiger Hinweiss
« Antwort #1 am: 02. Februar 2014, 13:35:41 »
Klar könnte man eine einfache Formatvorlage erstellen und diese nutzten.
Wenn man aber Uralt-Browser ignoriert hat man mit CSS2/3 wunderbare Möglichkeiten.
Hier kann man Attributselektoren nutzen und so z.B. nach Dateiendung des Links das jeweilige Symbol anzeigen. Beachtet aber bitte das diese erst im Browser sichtbar werden und es deshalb zu Verschiebungen im Text kommen kann.
« Letzte Änderung: 02. Februar 2014, 15:25:22 von Dada »
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!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Re: [CSS3] Links mit Icons versehen
« Antwort #2 am: 02. Februar 2014, 14:01:26 »
Wie man eine CSS-Klasse erstellt ist in den verschieden NOF-Versionen unterschiedlich.
Nutzer ab NOF11 könne dies auch im CSS-Code der Designansicht tun,



ansonsten wird dies händich gemacht.


Dafür wird die Stylenangabe entweder zwischen den Headtags eingefügt



Wie eine externe Datei verwendet wird ist in diesem Tutorial erklärt.
http://www.nof-community.de/index.php/topic,1536.0
« Letzte Änderung: 02. Februar 2014, 17:10:15 von Dada »
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!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Icons nach Dateityp
« Antwort #3 am: 02. Februar 2014, 15:02:16 »
Jetzt legen wir eine neue Klasse an bzw genauer gesagt überladen wir die Klasse a.
a ist ja nach HTML-Syntax ein Link, also wird diese Klasse auf alle Links angewendet.
Durch die Verwendung des Attributselktors kann man die jetzt auf spezielle Dateiendungen oder die href-Attribute zugreifen.

a[href $=".pdf"] {
background: url(../images/pdf.gif) center left no-repeat;
padding-left:20px;
}

Was mach nun diese Anweisung.

a[href $=".pdf"]
besagt das diese Regel nur auf Datei-Links mit der Dateiendung PDF angewendet werden soll.
background: url(../images/pdf.gif) center left no-repeat
Beschreibt den Pfad zum Icon, sowie daß es in der Höhe zentriert ist, horizontal nach links ausgerichtet ist und sich nicht wiederholen soll.
padding-left:20px veranlasst daß es 20px zum Linktext versetzt ist.
« Letzte Änderung: 05. Februar 2014, 20:10:25 von Dada »
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!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Icons nach href-Attribut
« Antwort #4 am: 02. Februar 2014, 15:12:21 »
Man kann auch auf die href-Attributte zugreifen und so z.B. auch mailto-Links oder externe Links kennzeichnen.

Dieser Codeschnipsel wirkt nur auf mailto-Links
a[href ^="mailto:"] {
background: transparent url(../images/email.gif) no-repeat right;
padding-right: 20px;
}

Bei externen Links muss man zwischen http und https unterscheiden.
Beides sind eigenständige Attribute.

a[href ^="http://"] {
background: transparent url(../images/link.gif) no-repeat right;
padding-right: 20px;}

a[href ^="https://"] {
background: transparent url(../images/savelink.gif) no-repeat right;
padding-right: 20px;}
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!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Icons nach target-Attribut
« Antwort #5 am: 02. Februar 2014, 15:16:32 »
Ebenso könnt ihr das target-Attribut verwenden.

Damit könnt ihr z.B. Links markieren die sich in einen neuem Fenster öffnen.

a[target ="_blank"] {
background: transparent url(../images/fenster.gif) no-repeat right;
padding-right: 20px;
}
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!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Icons für bestimmte Linkziele
« Antwort #6 am: 02. Februar 2014, 15:24:12 »
Will man speziele Icons für externe Seiten verwenden kann man die auch über die Attributselektoren tun.

a[href*="nof-community.de"]{
background: transparent url(../images/Community.gif) no-repeat right;
padding-right: 20px;
}

Würde z.B. nur auf Links die zu nof-community.de führen wirken.
« Letzte Änderung: 02. Februar 2014, 15:53:18 von Dada »
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!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Offline Dada

  • Supporter
  • *****
  • Beiträge: 1631
  • System: Windows 10
  • System-Typ: 64bit
Re: Links mit Icons versehen
« Antwort #7 am: 02. Februar 2014, 15:35:32 »
Zur volständigkeit die Filterregeln bei den Attribustselektoren.

a[title]
Wirkt auf einen Link mit dem Attribut title.

a[href="pillepalle"]
Wirkt auf einen Link mit Attribut href der den exakten Wert pillepalle enthält.

a[href~="pillepalle"]
Passt auf einen Link mit dem Attribut href der eine durch Leerzeichen getrennte Liste von Werten die den Wert Pillepalle enthält. Also würde dies auf das Attribut-Wert “pilepalle egal abc” zutreffen.

a[href|="pillepalle"]
Wirkt auf einen Link mit dem Attribut href der eine duch eine mit - Trennstrichen getrennte Liste. Also abc-pillepalle-abc

a[href^="pillepalle"]
Passt auf einen Link mit dem Attribut href, dessen Wert mit pillepalle beginnt. Dies würde z.B. auf den Attribut-Wert pillepalleaussage zutreffen.

a[href$="pillepalle"]
Wirkt auf einen Link mit dem Attribut href, dessen Wert mit pillepalle endet.
Z.B. Heinzpillepalle

a[href*="pillepalle"]
Passt auf einen Link mit Attribut href der den Wert pillepalle an beliebiger Stelle enthält.

« Letzte Änderung: 19. Februar 2014, 23:20:39 von nettesekel »
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!

Strebe nie nach Dingen, die auch Dümmeren gelingen ...

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


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