Antworten auf deine Fragen:
Neues Thema erstellen

Anklickbarer Newsletter-Banner

wr-graphics

Macher, Pixelschubser

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
 

Doitsu

Aktives Mitglied

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

Macher, Pixelschubser

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

Mod | Web

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

Macher, Pixelschubser

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

Mod | Web

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>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben