• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Dreieck plus Verlinkung in einer Zeile

CSS Dreieck plus Verlinkung in einer Zeile?

  • ?

    Stimmen: 0 0,0%

  • ?

    Stimmen: 0 0,0%
  • Umfrageteilnehmer
    0
C

Cantar03

Neues Mitglied
Hallo und guten Tag,

ich muss einen Newsletter programieren und bin ein völliger Anfänger was Html + CSS angeht.
Ich möchte das ein Pfeil auf meinen Link zeigt. Den style habe ich angegeben und dieser wird auch angzeigt.
Leider wird <a href der folgende Link anscheinend davon überdeckt?!

Anbei ein Bilder wie es im moment bei mir aussiehtBildschirmfoto 2014-02-05 um 16.38.06.png Bildschirmfoto 2014-02-05 um 16.38.06.png
 
Hallo,

so richtig nachvollziehbar ist dein Problem nicht. Was wird wovon überdeckt? Am besten wäre ein Link zu der Seite, sonst ist eine konkrete Hilfe gar nicht möglich.

Allgemein fügst du solche Zeichen am Besten als Hintergrund ein, da sie nur der Optik dienen und keine Aussagekraft haben. Am sinnvollsten als Schriftart, da die beim Zoomen nicht verpixeln kann. Ich habe das als Beispiel mit Font-Awesome realisiert. Wenn das Zeichen zum normalen Zeichensatz gehört kannst du das natürlich benutzen und brauchst Font-Awesome nicht einzubinden, aber ohne deinen Quelltext ist deine Schriftart nicht ersichtlich:

http://foreninfo.bplaced.net/seiten_fremdseiten/2014_02_05_cantar03_dreieck_vor_wort.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Vielleicht hilft dir das hier... würde dir unter anderem bestimmt auch ein Bild spaaren das so nicht mehr geladen werden muss.

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            .triangle {
                width: 0px; height: 0px;
                border-top: 6px solid transparent;
                border-left: 6px solid black;
                border-bottom: 6px solid transparent;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <p>
            <a class="triangle" href="www.google.de/"></a>
            Beispiel text, beispiel text, beispiel text, beispiel text
        </p>
    </body>
</html>
 
Auch wenn Halbwissen oft gefährlich ist ... juckt es mir doch grade in den fingern...

So wie ich es versteh geht er davon aus das der Pfeil den dahinter enthaltenen Link "verdeckt" und es folglich ca so aussehen sollte:

1391636336-clip-6kb.png


Das Ganze ist mit dem von MrMurphy genannten Weg möglich mithilfe des CSS Pseudoelementes :before und der passenden Schriftart. Auch kann man das Aussehen des Links an sich über CSS ändern.

Gruß

nick
 
Die Tipps sind ja alle schön und gut und richtig, aber der junge Mann muss einen Newsletter erstellen. Also bleibt im Endeffekt nur die Möglichkeit, das Dreieck als Bild (<img />) einzubinden...
 
Hallo

Also bleibt im Endeffekt nur die Möglichkeit, das Dreieck als Bild (<img />) einzubinden...
Zum Vergrößern anklicken....

Das verstehe ich nicht. Ohne den Quellcode von Cantar03 ist sowieso keine konkrete Hilfe möglich. Das in Newslettern aktuelle und sinnvolle Lösungen nicht genutzt werden können wäre mir neu. Es handelt sich doch um ganz normales HTML und CSS.

Gruss

MrMurphy
 
MrMurphy schrieb:
Hallo

Das verstehe ich nicht. Ohne den Quellcode von Cantar03 ist sowieso keine konkrete Hilfe möglich. Das in Newslettern aktuelle und sinnvolle Lösungen nicht genutzt werden können wäre mir neu. Es handelt sich doch um ganz normales HTML und CSS.

Gruss

MrMurphy
Zum Vergrößern anklicken....

Ich denke er meint damit dass die meisten E-Mail-Klienten soviel Ahnung von CSS haben wie der Internet Explorer 3.
Der einzige auf den aktuell im Bereich CSS verlass ist, ist Apple Mail. So zumindest mein Kenntnisstand.

Deshalb ist es sicherer ein Bild zu verwenden als übermäßig viel CSS.

Ich würde mich zB nicht trauen ":before" zu verwenden.
http://www.campaignmonitor.com/css/

Cross-Browser Webanwendungen zu programmieren kann ja schon ganz nervenaufreibend sein.
Aufwändige Cross-Platform E-Mails sind jedoch die Hölle.
 
Zuletzt bearbeitet:
scbawik schrieb:
Ich denke er meint damit dass die meisten E-Mail-Klienten soviel Ahnung von CSS haben wie der Internet Explorer 3.
Der einzige auf den aktuell im Bereich CSS verlass ist, ist Apple Mail. So zumindest mein Kenntnisstand.

Deshalb ist es sicherer ein Bild zu verwenden als übermäßig viel CSS.
Zum Vergrößern anklicken....
Genau das meine ich. Ein Newsletter umzusetzen ist HTML schreiben im Jahre 1997. Tabellenlayout, spacer-Gifs, und all diese Geschichten. Und responsive muss es dann natürlich trotzdem sein...

scbawik schrieb:
Aufwändige Cross-Platform E-Mails sind jedoch die Hölle.
Zum Vergrößern anklicken....
+1
 
Banana_Jones schrieb:
Genau das meine ich. Ein Newsletter umzusetzen ist HTML schreiben im Jahre 1997. Tabellenlayout, spacer-Gifs, und all diese Geschichten. Und responsive muss es dann natürlich trotzdem sein...
Zum Vergrößern anklicken....

Oh ja, da bin ich bei einem Test mal direkt durchgefallen. Die Anforderung lautete, einen Newsletter mittels Tabellenlayout, deprecated Tags und spacer.gifs zu optimieren, und zwar ohne Unterstützung von Google oder Firebug. :D

Daraus habe ich dann gelernt, dass ich mich mit so einem Scheiß nie abgeben werde. Newsletter sollen Andere bauen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben