Hey super! Das klingt schonmal sehr genial 😃 Danke!

Ich werde es morgen mal ausprobieren und berichten👍

Aber eine Frage hätte ich noch:
Sollte ich also mit CSS auch die Textfarbe und auch die Mouse-Over-Linkfarbe bestimmen?
Oder wie passe ich das an?

[...] Sollte ich also mit CSS auch die Textfarbe und auch die Mouse-Over-Linkfarbe bestimmen? [...]

Dazu bietet der WD eine Option an, mit der Du das Aussehen von Links vorgeben kannst:

Allerdings funktioniert das mit den per CSS formatierten Textbereichen nur zum Teil, das automatische Unterstreichen geht so nicht.
Probier's einfach aus. Wenn dann noch etwas zu ändern ist, kannst Du das mit entsprechenden CSS Anweisungen machen...

@Nina-D

Bei meinem aktuellen Test ging das Vorhaben durchaus.

Ich habe ein Textfeld angelegt und beschrieben. Danach habe ich das Textwerkzeug verlassen und das dennoch noch markierte Objekt im Gesamten verlinkt. Mit Erfolg wie man sieht.
Gruß Marboe

Hi Marboe,

das ist ja seltsam. Das wäre ja wirklich eine sehr einfach Methode.
 

Ich habe es nochmal ausprobiert. Aber es geht wirklich nicht bei mir.
Ich habe den Zeilenumbruch auch durch das Textfeld erzwungen.

Trotzdem leuchtet nur eine Zeile in der Linkfarbe an, aber beide Zeilen haben natürlich dieselbe Adresse.

(Ich habe einen Screenshot per Print gemacht, keine Ahnung, wieso mein Mauszeiger in der Vorschau verschwunden ist. Er zeigte aber auf die obere Zeile 1)

Exportieren hat auch keine Veränderung gebracht...mir fällt nicht ein, warum es bei mir nicht geht...

Vielleicht liegt es daran, dass mein WD 17 grad nicht mehr das aktuellste Update hat?

Habe diese Version hier: 17.1.0.60415

[...] Sollte ich also mit CSS auch die Textfarbe und auch die Mouse-Over-Linkfarbe bestimmen? [...]

Dazu bietet der WD eine Option an, mit der Du das Aussehen von Links vorgeben kannst:

Allerdings funktioniert das mit den per CSS formatierten Textbereichen nur zum Teil, das automatische Unterstreichen geht so nicht.
Probier's einfach aus. Wenn dann noch etwas zu ändern ist, kannst Du das mit entsprechenden CSS Anweisungen machen...

Achso, ok. Danke für den Hinweis. Ich wusste nicht, dass Magix die Standard-Linkfarben auch bei Platzhaltern übernehmen kann ;-)

Ich habe es nochmal ausprobiert. Aber es geht wirklich nicht bei mir.
Ich habe den Zeilenumbruch auch durch das Textfeld erzwungen.

Entschuldige Nina, mir war nicht klar, dass dir das nicht - getrennte Anzeigen der MouseOverfarbe auch wichtig ist.

Das geht tatsächlich nicht.

Was aber geht, ist die supereinfache Verlinkung. Für mich bleibt die Frage, warum du das so umständlich machst. Was soll damit bezweckt werden?
Ich vermute du möchtest das für Bildbeschreibungen umsetzen.

Wenn meine Vermutung stimmt, dann kannst du bestimmt deutlich Arbeitsaufwand sparen, wenn du dein Design überarbeitest. Ich habe zB sehr gute Erfahrungen mit Symbolen gemacht. Diese lassen sich natürlich auch variantenspezifisch innerhalb einer Textzeile eingebettet platzieren und ermöglichen sowohl den Touch, wie auch den Klick. Gruß marboe

Hi marboe,

achso, schade...es hätte ja so schön sein können ☺️

Mein Design-Plan ist so ähnlich wie das Template von BeRo.

Es gibt eben Spalten auf der Startseite mit verschiedenen Themen. Und in jeder Spalte sollte sich zum Thema noch ein weiterführender Link befinden. Und der Linktext ist einfach länger als die Spalte.

Mal sehen, ob ich das mit der BeRo-Methode hinkriege 😉

Wird das, was in einem Platzhalter dann steht auch von Google gefunden?
Frage mich das wegen der Suchmaschinenoptimierung, weil ich auch extra Schlüsselbegriffe in die Links rein geschrieben habe...

Wird das, was in einem Platzhalter dann steht auch von Google gefunden?

Wenn es sich um Inhalte der MouseOff-Ebene handelt, die bei Seitenaufruf lesbar sind, ja. Das kannst du einfach im Quelltext überprüfen.

Texte, die erst in einem PopUp erscheinen sind bei Seitenaufruf für Google nicht lesbar. Gruß Marboe

Alles klar, lieben Dank für die Info 😄

[...] Bis jetzt habe ich es so gelöst, dass ich den Linktext kopiert und in die Mouse-Over-Ebene eingefügt habe. Beide Ebenen gruppiert und dann verlinkt [...]

Als Workaround ist das sicher akzeptierbar, auch, wenn Du damit keinen Textlink mehr hast, weil durch die Gruppierung Texte zu Grafiken werden.

Aber es gibt eine bessere Lösung, die so aussehen kann...

    

So sieht der verlinkte Text aus dem o. a. Beispiel im "a" Tag aus:

<a class="xr_tc Normal_Text xr_s3" style="line-height: 1.5;" href="javascript:xr_cpu(4)">Eu velit sed ex dolore sit dolor aliquip.<br />Officia eiusmod ut consequat minim.
</a>

Die für den"Trick" wesentlichen Teile sind fett markiert. Der Rest ist "Beiwerk", das im Beispiel für die Formatierung und Auszeichnung des Linktexts benutzt wird.

Im Beispiel wird ein Link auf eine popup Ebene gesetzt, die nach einem Klick auf den Linktext eingeblendet wird

Das wird mit der Aktivierung der JScript Funktion "xr_cpu(4)" gemacht, mit dem Aufruf "href="javascript:xr_cpu(4)".
Stattdessen kannst Du natürlich jeden anderen Link eintragen, z. B. den Aufruf einer anderen Seite in Deinem Projekt, z. B. so: href="info.htm", wenn die aufzurufende Seite den Namen "info" hat.

Der Linktext "Eu velit sed ex dolore sit dolor aliquip.<br />Officia eiusmod ut consequat minim." hat etwa in der Mitte der Zeile einen programmierten Zeilenumbruch bekommen, der so aussieht "<br />".
Die "Break" Anweisung kannst Du beliebig oft in einem Text verwenden, wenn der Text z. B. 3- oder mehrzeilig werden soll.

Soll der Text bestimmte Auszeichnungen (fett, kursiv, unterstrichen, o. ä.) bekommen, muss das in einer CSS Anweisung angegeben werden.
Im Beispiel sind 2 Methoden zu sehen, 1x eine CSS Klassenzuweisung mit "class="xr_tc Normal_Text xr_s3" und 1x eine direkte CSS Anweisung mit "style="line-height: 1.5;".
Im "Normalfall" wirst Du direkte CSS Anweisungen benutzen, weil die einfacher zu händeln sind.

Schau Dir mal die online Demo an, die ich mit den o. Einstellungen gemacht habe (klick).

Die zur Demo gehörende Projektdatei kannst Du für eigene "Forschungsarbeit" hier herunterladen (klick).

Und wenn noch Fragen auftauchen, nur her damit... 😉

Hallo wieder!

Das hat bei mir mit dem Austesten ein wenig länger gedauert als geplant...mir sind einige Dinge dazwischen gekommen 😌

Nun habe ich die ganze Zeit rumprobiert, aber die Sache mit den Platzhaltern und dem CSS ist mir einbisschen zu hoch. Wenn ich es genauso eingebe, wie BeRo, dann ist mein Link aus irgendeinem Grund fett und nicht bündig?

Was habe ich denn falsch gemacht, bzw. was kann ich tun, damit der Link so aussieht wie in der Grafik?

(Erster Link ist das Ergebnis des Platzhalters - nicht bündig!!!- ,
der 2. Link ist ein Beispiel, wie es denn aussehen sollte)

In den HTML-Body des Platzhalters habe ich eingegeben:

<a class="xr_tc Normal_Text xr_s3" style="line-height: 1.5;" href="index.htm">Das soll mein guter<br />  zweizeiliger Link sein</a>

Danke schonmal für jeden Rat 🌼

[...] was kann ich tun, damit der Link so aussieht wie in der Grafik? [...]

Wie ich schon am 18.02. geschrieben habe...

---------------------------------------
So sieht der verlinkte Text aus dem o. a. Beispiel im "a" Tag aus:

<a class="xr_tc Normal_Text xr_s3" style="line-height: 1.5;" href="javascript:xr_cpu(4)">Eu velit sed ex dolore sit dolor aliquip.<br />Officia eiusmod ut consequat minim. </a>

Die für den"Trick" wesentlichen Teile sind fett markiert. Der Rest ist "Beiwerk", das im Beispiel für die Formatierung und Auszeichnung des Linktexts benutzt wird.
-----------------------------------------

...kannst Du zum Test einfach nur den fett markierten Inhalt des "a" Tag benutzen.
In Deinem Fall sollte das das dann so aussehen:

<a href="index.htm">Das soll mein guter<br />  zweizeiliger Link sein</a>

Wenn die Textformatierung-/Auszeichnung dann vom restlichen Text abweicht, dann musst Du mit geeigneten CSS Attributen gegensteuern.
In meinem ersten Beispiel hatte ich die CSS Klassen "xr_tc", "Normal_Text" und "xr_s3" für die Auszeichnung der Link Textzeilen übernommen.
Offenbar sind die Klassen in Deinem Projekt anders definiert worden. Der Link Text sieht daher anders aus als der umgebende Text.

Probier's also zunächst mal ohne Klassenzuweisung... 😉

Bitte übernimm bei einer Antwort nicht immer den kompletten Text eines Kommentars. Das sogenannte "Fullquote" ist lästig, wenn nicht sogar ärgerlich, weil jeder, der die Kommentare in diesem Thread gelesen hat, weiß, was ich geschrieben habe, ohne es mehrfach wieder lesen zu müssen...

Hi BeRo,

danke für deine Tipps!

Ich habe jetzt das "Beiwerk" weg gelassen und habe geschafft, dass der zweizeilige Link endlich bündig ist 😃
Die Standard-Mouse-Over-Farbe der Website funktioniert auch einwandfrei.

Leider ist die Schriftart immer noch anders...:

Ich hätte gerne die gleiche Schriftart (Montserrat) wie im unteren Beispiellink.
Unterstrichen wäre natürlich auch schön (nur diese Links sollen unterstrichen sein im Gegensatz zur restlichen Page..)

Wie kann ich mit CSS-Attributen gegensteuern? Und wie definiere ich Klassen in dem Projekt?

Habe da null Plan 😨

Ps: Stimmt, kompletten Kommentar übernehmen, ist gut gemeint gewesen, aber echt unnötig 😅

[...] Ich hätte gerne die gleiche Schriftart (Montserrat) wie im unteren Beispiellink. [...]

Kein Problem. Die Schriftart kannst Du ganz einfach einfügen, mit der Anweisung:

font-family: 'Montserrat';

[...] Unterstrichen wäre natürlich auch schön [...]

Das geht mit einer zusätzlichen Anweisung:

text-decoration:underline;

So sieht der vollständige "a" Tag aus,wenn Du, der Syntax gehorchend, noch die "style=" Anweisung einbaust...

<a style="text-decoration:underline; font-family: 'Montserrat';" href="index.htm">Das soll mein guter<br />zweizeiliger Link sein</a>

Beachte bitte, dass in der Zeile 2 verschiedene Arten von Anführungsstrichen verwendet werden, die einfachen und die doppelten...

[...] Wie kann ich mit CSS-Attributen gegensteuern? [...]

Eine mögliche Methode hast Du gerade kennen gelernt. 😊
Es gibt noch sehr viel mehr Möglichkeiten die Textdarstellung zu beeinflussen. Du kannst die Zeichengröße-, den Zeilenabstand-, die Laufweite-, die Höhe der Grundlinie-, die Textfarbe-, u.s.w. manipulieren und, wenn Du willst, sogar Animationseffekte einbauen.
Wenn Du Dir also "intimere" Kenntnisse aneignen möchtest, steht Dir mit dem WWW eine nahezu unerschöpfliche Quelle zur Verfügung. Zum Thema "Text decoration" findest Du z. B. hier einen Einstieg (klick).

[...] wie definiere ich Klassen in dem Projekt? [...]

Der WD hat schon etliche CSS Klassen angelegt, die Du benutzen kannst. Du findest sie in den CSS Dateien, z. B. in der "xr_all.css". Der Inhalt sieht so aus:

@media screen and (max-width: 759px) {
.xr_mvp_2 {display: block;}
.xr_mvp_1 {display: none;}
.xr_pbd {margin-left: -200px;}
#xr_xr {width: 400px; height: 1949px}
}
@media screen and (min-width: 760px) {
.xr_mvp_2 {display: none;}
.xr_mvp_1 {display: block;}
.xr_pbd {margin-left: -560px;}
#xr_xr {width: 1120px; height: 1611px}
}

Die enthaltenen CSS Klassen beginnen alle mit einem Punkt ".", dann folgt der Name der Klasse. Der WD lässt die Namen alle mit "xr_" beginnen, dann folgen die Anweisungen, die ausgeführt werden, wenn eine der Klassen aktiviert wird.
Wenn Du eigenen Klassen anlegen willst, was Du nicht musst, kannst Du eine der CSS Dateien erweitern, die der WD innerhalb eines Projekts benutzt, oder Du legst eine eigene Klassen Datei an und bindest sie in die Site ein.

Das ist aber absolut nicht nötig und nur brauchbar, wenn Du zumindest verwertbare CSS Kenntnisse aufgebaut hast... 😋

[...] Kommentar übernehmen, ist gut gemeint gewesen, aber echt unnötig

Jein 😇

Es kann durchaus Sinn machen , einen Teil eines vorangegangenen Kommentars erneut zu posten, wenn Deine Antwort sich darauf bezieht. Dadurch ist die Antwort für alle "Mitleser" leichter zuzuordnen, weil sie im Kontext steht. 😉

Hi BeRo,

das ist einfach großartig! Vielen Dank für den Support.
Es hat wunderbar funktioniert 😄

Da habe ich mal wieder viel gelernt!!! 😊

Ich habe noch die Schriftgröße angepasst mit font-size: 15px
und es sieht super aus!

Auch gut zu wissen mit CSS-Klassen beim WD, falls ich da mal tiefer in die Materie einsteigen will.

Es kann durchaus Sinn machen , einen Teil eines vorangegangenen Kommentars erneut zu posten, wenn Deine Antwort sich darauf bezieht. Dadurch ist die Antwort für alle "Mitleser" leichter zuzuordnen, weil sie im Kontext steht. 😉

Achso, die Teil-Zitate waren garnicht auf meinem Schirm. Ich glaub jetzt kann ich es auch und hab auch da was Neues gelernt 😅

Hallo ihr Lieben,

nach einiger Zeit muss ich nochmal in meinem Beitrag posten.

Ich war bislang mit meinen zweizeiligen/dreizeiligen Links ganz glücklich, jedoch habe ich zufällig bei der Arbeit an meiner mobilen Website etwas bemerkt:

Zuvor hatte ich folgenden Code verwendet:
(Dadurch wurden einfach die Website-Einstellungen für den Mouse-Over etc. verwendet, was auch gut war...)

<a style="text-decoration:none; font-family: 'Montserrat';font-size: 19px" href="meine-seite.htm"
>Ich habe hier einen schönen<br>dreizeiligen Link gebastelt<br>der funktionieren soll.</a>

Für die Mobilseite hätte ich meinen dreizeiligen Link aber gerne in Fettschrift.

Dafür habe ich ein <strong> in den Code mit eingebaut:

<a style="text-decoration:none; font-family: 'Montserrat';font-size: 19px" href="meine-seite.htm"
<strong>Ich habe hier einen schönen<br>dreizeiligen Link gebastelt<br>der funktionieren soll.</strong></a>

Das Problem, das entsteht:

Jetzt ist mein Text schön fett geschrieben, allerdings gibt es dann keinen Mouse-Over-Effekt mehr mit anderer Farbe?

Sollte ich jetzt hier selbst mit CSS entgegensteuern?
Und falls ja, wie kann ich das machen?

Ich hab mir jetzt versucht, paar Codes zusammen zu googeln,
aber meine Versuche als Laie einen Mouse-Over-Effekt in diesen reinzubringen zeigen Nulll Wirkung.

Hat jemand eine Idee?

LG

[...] Für die Mobilseite hätte ich meinen dreizeiligen Link aber gerne in Fettschrift. Dafür habe ich ein <strong> in den Code mit eingebaut: [...]

...und dabei eine Kleinigkeit vergessen. 😍

Wenn Du das korrigiert hast, sollte es klappen 😉

Hi BeRo,

danke für den Hinweis ☺️...ja stimmt, ich habe es tatsächlich im Beispiel nicht aufgeführt.😳🤓

Ich habe natürlich gehofft, dass dies die Lösung des Problems ist, doch leider gibt es immer noch keinen Mouse-Over-Effekt. 😔
Bei anderen Links hatte ich tatsächlich noch die Klammer als Tag-Begrenzung drin, aber auch diese machen da keinen Unterschied.

Es ist halt das Ding, dass sobald ich die Fettschrift einfüge mit "strong", dann verschwindet der Mouse-Over-Effekt.

Ohne das "strong" habe ich wieder einen...

Aber ich hätte ja so gerne beides☺️...und frag mich, ob das geht?
 

[...] Für die Mobilseite hätte ich meinen dreizeiligen Link aber gerne in Fettschrift. [...] allerdings gibt es dann keinen Mouse-Over-Effekt mehr mit anderer Farbe [...]

MouseOver Effekte sind auf mobilen Geräten natürlich nicht möglich, weil es hier keine Maus gibt... 😉
Wenn Du aber den Test auf einem Desktop Gerät machst, dann sollte auch die mobile Variante den MouseOver Effekt zeigen.
Bei meinen Tests funktioniert das jedenfalls problemlos mit den aktuellsten Versionen von Firefox-, Google Chrome und Internet Explorer.

[...] sobald ich die Fettschrift einfüge mit "strong", dann verschwindet der Mouse-Over-Effekt. Ohne das "strong" habe ich wieder einen. [...]

Nicht jeder Browser "versteht" das HTML Tag <strong>. Probier's stattdessen mal mit dem Bold Tag

<b>Text</b>

Vielleicht ist Dein Problem dann gelöst... 😊

Ja, ich habe es erst einmal auf dem Desktop-Gerät getestet. Daher kenne ich ja schon, dass diese Links (sofern sie nicht fett sind) schön in der Mouse-Over-Farbe aufleuchten, in meinem Fall wäre es eben eine grüne Mouseover-Farbe.

Ich habe es auch mit dem Bold-Tag versucht und in mehreren Browsern, es tut sich leider nix, der Link bleibt schwarz (wie die normale MousOff-Farbe):

Irgendwie dachte ich, dass die Mouse-Over-Farbe auf dem Smartphone zu sehen sein könnte, sobald man mit dem Finger drauf drückt. Bin mir aber noch nicht sicher, weil ich es nicht getestet habe.

Allerdings kann man es dann wohl einfach vernachlässigen, wenn das einfach nicht hinhauen will...wird schon keiner merken und ich könnte aufhören, mir den Kopf zu zerbrechen😅

Eine Frage hätte ich noch:
Ist es denn auch möglich, dass dieser Link dann nicht auf eine weitere Seite führt, sondern auf der selben Seite auf eine bestimmte Überschrift verlinkt?
Im WD gibt es ja die Funktion in dem Link-Reiter, aber für den Platzhalter scheint es ja nicht zu gehen.
Kann ich das dann in dem Code einstellen, dass bei Klick zu einer bestimmten Überschrift gesprungen wird??

[...] Ich habe es auch mit dem Bold-Tag versucht und in mehreren Browsern, es tut sich leider nix, der Link bleibt schwarz [...]

In dem Fall hat der WD was dagegen, dass Du ihn bevormunden willst. 🙃
Im "Inneren" des WD laufen diverse JScript Funktionen und CSS Anweisungen ab, die u. a. auch die Textdarstellung steuern. Leider greift unter bestimmten Umständen die programminterne Einstellung für die Linkfarben hier mit höherer Priorität ein und verhindert damit, dass Deine Einstellung wirksam wird, wenn Du zusätzliche Textauszeichnungen aktivierst. Hier ist das die Auszeichnung "fett".

Abhilfe:
Deaktiviere die Link Farbe für die Website...

...und definiere die Farben für Deinen Link mit einer CSS Anweisung neu. Das geht so:

<style>
.mylink { text-decoration:none; font-family: 'Montserrat'; font-size: 19px; color:#5C5C5C !important; }
.mylink:hover { color: #44ffe5 !important; }
</style>

<a class="mylink";  href="index.htm#headline">
<b>Ich habe hier einen schönen<br />dreizeiligen Link gebastelt<br />der funktionieren soll.
</b>
</a>

Im o. a. Script siehst Du zwischen <style> und </style> ein paar Zeilen CSS, in denen ich eine neue CSS Klasse ".mylink" eingerichtet habe, die die nötigen Anweisungen enthält, mit denen die Schriftart-, die Zeichengröße-, und die Textfarbe "color:#5C5C5C" definiert werden.
Die Textfarbe, die bei einem MouseOver sichtbar wird, ist in der 2. Zeile definiert, mit "color: #44ffe5", was einem hellen Grün entspricht.

Das "a Tag" enthält jetzt nur die Klassenzuweisung class="mylink", damit die Anweisungen aus dem CSS Script das richtige Ziel finden und den Link href="index.htm#headline", mit dem auf 3 Zeilen umbrochenen, fetten Linktext.

[...] Ist es denn auch möglich, dass dieser Link dann nicht auf eine weitere Seite führt, sondern auf der selben Seite auf eine bestimmte Überschrift verlinkt? [...]

Ja, das ist kein Problem, wenn Du vorher die Überschrift mit einem Namen (Anker) ausgestattet hast.
Für einen Test habe ich z. B. ein transparentes Rechteck im Seitenkopf mit dem Namen "headline" ausgestattet.

Im o. a. "a Tag" findest Du den passenden Link href="index.htm#headline" auf den Anker "headline".
Wenn Du das nachbauen willst, hängst Du ganz einfach ein Hashtag an den Seitennamen, gefolgt von dem Ankernamen. 😉

So sieht der Link aus, wenn alles geklappt hat...

P.S.
Auf Touchscreens ist der MouseOver Effekt problematisch oder unmöglich. Abhängig vom Browser, tritt die :hover Pseudoklasse niemals, nur für einen kurzen Moment nach dem Berühren in Kraft oder bleibt aktiviert, auch wenn der Nutzer das Element nicht mehr berührt, bis er ein anderes Element berührt.
Es macht also durchaus Sinn, MouseOver Effekte in den Varianten für die mobilen Geräte gar nicht erst einzusetzen... 🤓

Hi,

ich glaub der Webdesigner hat zur Zeit wirklich was gegen mich 😅

Ok, ich seh es ja ein, dass ich eigentlich kein Mouse-Over dann brauche, weil es nur in der Mobilseite so eine Konstellation gibt.

Trotz allem wollte ich es mal ausprobieren mit dem Deaktivieren der Mouse-Over-Farbe der Website und dem erweiterten CSS-Code. Resultat: der WD weigert sich weiter hartnäckig, alles bleibt beim Alten...

Aber gut, ich kann ja wie gesagt auch ohne leben. Bei jemand anderem würd es ja sicher funktionieren😄

Die Sache mit dem Anker klappt bei mir auch irgendwie nicht. Ich habe den gleichen Code wie du benutzt und den selben Anker "headline" für die Überschrift benutzt. Das Resultat: Wenn ich auf den Link klicke, passiert garnichts 😳...Dann habe ich zum Test auch ein Rechteck mit Anker versehen und das verlinkt- passiert auch nichts.
Allerdings sieht man in der unteren Leiste bei der Vorschau, wenn man mit der Maus über dem Link ist, dass der richtige Link hinterlegt ist, mit Anker.

Hach, ich weiß es nicht...ich überlege mir, ob ich in der Mobilversion aus den paar Links auf nur einer Seite (wegen denen jetzt der ganze Stress ist) nicht einfach Bilder mache, die könnte ich dann über den Link-Reiter der Website mit einer Überschrift verlinken...