Newsletter/Gradient

cheooo · 11 März 2013

Hallo,

ich bin HTML-Anfängerin und schön langsam am verzweifeln: :cry:

ich muss für einen Kunden einen Newsletter erstellen, mit einem Verlauf in einem Balken als Navigation.
Ich habe den Verlauf im Ultimate CSS Gradient Generator - ColorZilla.com erstellt, jedoch wird dieser bei gmail und dem neuen gmx nicht angezeicht.

Jetzt habe ich probiert, den Balken im PS zu zeichnen und ihn als Hintergrund einzufügen. Jedoch kann ich das Hintergrundbild nicht auf den Server des Newsletter-Programms http://www.ymlp.com laden, wodurch es mir nicht angezeigt wird.

Wenn jemand einen Vorschlag hätte, wie es per Hintergrund funktionieren könnte, wäre ich sehr sehr sehr dankbar!!

Code:

#linke {
    float: left;
    width: 195px;
    padding: 0px;
    margin-top: 0px;
    height: 760px;
    background-position: center center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    margin-left: 0px;
    margin-right: 30px;
    background-image url(../../../Documents/Unbenannte%20Site%202/linke4.png);

Code:

#linke {
    float: left;
    width: 195px;
    padding: 0px;
    margin-top: 0px;
    height: 750px;
    box-shadow: 4px 0px 8px 2px rgba(204,204,204,0.5);
    >  -moz-box-shadow: 4px 0px 8px 2px rgba(204,204,204,0.5);
    -webkit-box-shadow: 4px 0px 8px 2px  rgba(204,204,204,0.5);
    -ms-box-shadow: 4px 0px 8px 2px rgba(204,204,204,0.5);
    -o-box-shadow: 4px 0px 8px 2px rgba(204,204,204,0.5);
    border-radius: 3px 3px 3px 3px;
    margin-right: 30px;
    background: rgba(51,51,51,1); /* Old browsers */
    background: -moz-linear-gradient(left,  #ffffff 1%, #efefef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #ffffff 1%,#efefef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #ffffff 1%,#efefef 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #ffffff 1%,#efefef 100%); /* IE10+ */
    background: linear-gradient(to right,  #ffffff 1%,#efefef 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=1 ); /* IE6-9 */
    border-top-width: thin;
    border-right-width: thin;
    border-top-style: solid;
    border-right-style: solid;
    border-top-color: rgba(255,255,255,1);
    border-right-color: rgba(255,255,255,1);
    border-bottom-color: rgba(255,255,255,1);
    border-left-color: rgba(255,255,255,1);
    margin-left: 0px;
    -moz-border-end-color: rgba(255,191,0,1);
}

Mod-Edit: Code-Tags hinzugefügt - Beim nächsten Mal bitte dran denken (XraYSoLo)

Banana_Jones · 11 März 2013

HTML-Newsletter sind eine knifflige Geschichte. Viele (verdammt viele) Dinge, die bei normalen Websiten funktionieren, musst du in Newslettern anders angehen.
Viele Clients werfen CSS-Angaben in externen Dateien oder im <head> komplett raus --> style-Attribut inline verwenden.
Aber auch mit den inline-Angaben muss man vorsichtig sein, die Unterstützung reicht von "ich akzeptiere fast alles" bis zu "hm, ne, ich weiß es ist ein Standard, aber mache ich trotzdem nicht." (Outlook!)

Eine Übersicht, welche Clients welche CSS-Angaben unterstützen, findest du z.B. bei Guide to CSS support in email | Campaign Monitor

Außerdem hat sich durchgesetzt, für HTML-Newsletter auf Tabellen zu setzen, da diese relativ konstant dargestellt werden und größere Überraschungen in der Regel ausbleiben.

Zu deinem Problem: Gradient kannst du vergessen. Hintergrundbilder setzt Outlook nur für den <body> dar, dort gibts allerdings Workarounds.
Lade doch das Bild auf einen (eigenen?) Server oder einen Free-hoster und verlinke es absolut. Allerdings könnte ein fremder Hoster die SPAM-Filter aufmerksam werden lassen.

Newsletter/Gradient

cheooo

Neues Mitglied

Banana_Jones

Aktives Mitglied

Neueste Beiträge