Anklickbarer Newsletter-Banner

wr-graphics · 25.10.2010

Hallo Leute,

es ist ziemlich selten, dass ich mal was im Webbereich poste, aber heute ist so ein Tag. Im vorraus: Ich bin kein Webdesigner und habe auch gänzlich wenig Erfahrung damit. Ich möchte momentan einen Webbanner für einen Newsletter verschieden anklickbar machen. Hab erstmal die Standartexportfunktion von PS benutzt, also the dirtyway über eine Tabelle. Funktioniert, aber natürlich nur begränzt, also würde ich das Ganze Teil gern in Form von div-tags nachbauen, da ich aber von posotionierungsbefehlen über CSS oder XHTML sagen wir mal nur sehr begränzt Ahnung habe, bitte ich euch um eure Hilfe. Ich hab hier noch eine kleine Skizze wie das Teil aussieht mit ein paar Pixelmaßen. Die grauen Flächen sollen anklickbar sein.

Uploaded with

Könnt ihr mir bitte helfen?

LG
Eastwood

fexx · 25.10.2010

AW: Anklickbarer Newsletter-Banner

einen newsletter sollte man generell in form von tabellen anlegen, weil manche e-mail clienten probleme mit dem darstellen von divs haben.

und einen banner kannst du doch über das <a>-tag verlinken?!

Code:

<a href="#"><img src="" alt="" ... /></a>

Articles & Tips, Free Email Templates & Downloads - Campaign Monitor hier findest du einige gute tipps

Doitsu · 25.10.2010

AW: Anklickbarer Newsletter-Banner

Hm, wenn das jetzt einfach nur ein Bild ist, welches verlinkt werden soll wuerde ich eher auf eine image_map setzen. Wenn da aber noch HTML rein kommt machst du ein div als wrapper, welches auf position: relative; gesetzt wird, anschliessend richtest du die 3 divs welche inhalte bekommen per position: absolute; aus.
sprich:

Code:

<style type="text/css">
#wrapper {
  position: relative;
  top: 96px;
}
#wrapper div {
  background: #999;
  position: absolute;
}

#left_content {
  left: 30px;
  width: 500px;
  height: 500px;
}

#right_top_content {
  left: 560px;
  height: 400px;
  width: 100px;
}

#right_bottom_content {
  left: 560px;
  top: 430px;
  width: 100px;
}
</style>

wr-graphics · 25.10.2010

AW: Anklickbarer Newsletter-Banner

@ fexx: Also wäre es eher Contraproduktiv mit Div-Tags zu arbeiten?

nostra87 · 25.10.2010

AW: Anklickbarer Newsletter-Banner

Eastwood187Designz schrieb:
@ fexx: Also wäre es eher Contraproduktiv mit Div-Tags zu arbeiten?

Es kommt auf die Programmierung an. Tables müssen nicht
zwingend notwendig sein.

Gruß

wr-graphics · 25.10.2010

AW: Anklickbarer Newsletter-Banner

die Frage ist vielmehr, ob es mit Tablelayout auch überall gleich angezeigt wird. Also ob alle Mailclienten den Code gleich interpretieren und was passiert wenn die Leute ihre Mails per Server aufrufen. Da gibt es ja leider interpretationslücken bezüglich der Darstellung. Nur wenn das eh keinen unterschied beim verschicken per Mail macht, wäre es ja contraproduktiv das ganze nochmal umzubauen auf Div-tags oder nicht?

sokie · 25.10.2010

AW: Anklickbarer Newsletter-Banner

mit dem Tabellendesign und inlinestyles wirst du die grössten chancen haben, dass die Mails bei unterschiedlichen Szenarien gleich aussehen.

wr-graphics · 25.10.2010

AW: Anklickbarer Newsletter-Banner

Hey Jungs hab momentan mit meiner Tabbellenversion noch das Problem, dass Firefox den Code merkwürdig intepretiert. Muss euch leider den Screenshot zensieren weils für die Arbeit ist.

Uploaded with

Hier noch der geoxmoxte Quellcode:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>oxmox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (oxmox.psd) -->
<table id="Tabelle_01" width="570" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="6">
            <img id="oxmox01" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox01.gif" width="570" height="97" alt="" /></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img id="oxmox02" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox02.gif" width="30" height="311" alt="" /></td>
        <td rowspan="4"><a href="oxmox.del"><img id="oxmox03" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox03.png" width="303" height="311" alt="oxmoxel" /></a></td>
        <td rowspan="4">
            <img id="oxmox04" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox04.gif" width="46" height="311" alt="" /></td>
        <td colspan="2"><a href="oxmox.de"><img id="oxmox05" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox.png" width="159" height="259" alt="oxmoxten" /></a></td>
        <td rowspan="4">
            <img id="oxmox" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox06.gif" width="32" height="311" alt="" /></td>
    </tr>
    <tr>
        <td colspan="2">
            <img id="oxmox" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox07.gif" width="159" height="19" alt="" /></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img id="oxmox08" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox08.gif" width="51" height="33" alt="" /></td>
        <td><a href="http://www.smile2.de/index.php?r=smeeting/show&amp;id=1249&amp;key=smeeting_teilnehmen"><img id="oxmox09" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox09.png" width="108" height="17" alt="mehr erfahren" /></a></td>
    </tr>
    <tr>
        <td>
            <img id="oxmox_10" src="http://www.psd-tutorials.de/modules/Forum/images/oxmox.gif" width="108" height="16" alt="" /></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Könnt ihr mir helfen?

sokie · 26.10.2010

AW: Anklickbarer Newsletter-Banner

Nach dem, was auf dem 'Screen' zu sehen ist, sehe ich eine Tabelle mit drei Zellen. In der oberen Zelle eine Überschrift und einen Textabsatz (oder beides duch eine Grafik ersetzt), in der linken unteren Zelle unten links ausgerichtet ein Bild, in der rechten unteren recht ausgerichtet eine Grafik, und darunter eine als Button. Diese sind rechts ausgerichtet, und die Zelle hat rechts ein Padding.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<title></title>
</head>

<body>
<table width="570" style="border: 1px solid #000000" cellpadding="0" cellspacing="0">
<tr>
  <td colspan="2" style="padding-top:30px; padding-left:30px; padding-bottom: 10px;">
    <img src="oben.jpg" /> 
  </td>
</tr>
<tr>
  <td style="padding-left:30px; text-align: left;">
    <img src="ul.jpg" />
  </td>
  <td style="padding-right:30px; text-align: right;">
    <img src="rechts.jpg" />
    <img src="button.jpg" style="margin-top: 20px; margin-bottom: 10px;" />
  </td>
</tr>
</table>
</body>
</html>