[CSS] Hilfe beim Aufbau

Dieses Thema im Forum "Webdesign" wurde erstellt von juppwatis, 9. Januar 2010 .

Schlagworte:
  1. 9. Januar 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Hilfe beim Aufbau

    Hallo zusammen,

    ich versuche gerade nen kleinen Aufbau für ne Mail aus meinem Onlineshop zu machen, dass dann die Kunden bekommen. Es ist so ähnlich wie bei amazon.de aufgebaut. Habe mich selber schon versucht, aber durch die etlichen Tabellen usw komme ich nicht mit den Designs, Tabellenrahmen und Hintergründen hin.

    Hab mal das Layout hochgeladen als pdf. und xls.
    Wäre geil, wenn mir jmd. helfen könnte.

    No File | xup.in
    No File | xup.in

    Cheers
     
    + Multi-Zitat Zitieren
  3. 10. Januar 2010
    AW: Hilfe beim Aufbau

    Sorry für den Doppelpost. Habe jetzt aber mal was geschafft. Und sieht auch recht vernünftig aus. Aber ich habe noch ein paar probleme mit dem anpassen der Tabellenränder.
    hier mal der Code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=[{$charset}]">
 </head>
 <body bgcolor="#FFFFFF" link="#355222" alink="#355222" vlink="#355222" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px;">
<table width="100%"border="1">
 <tr>
 <td colspan="2" width="70%"></td>
 <td colspan="2" align="right" valign="middle">Mein Konto | Bestellhistorie | Impressum</td>
 </tr>
 <tr>
 <td width="3%">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1">
 <tr>
 <td>Vielen Dank für Ihre Bestellung <br /><br />Text Text Text Text</td>
 </tr>
</table>
</td>
 <td bgcolor="#CCCCCC" width="15%"><table width="100%" border="1">
 <tr>
 <td align="center" valign="middle" bgcolor="#009900"><strong>Empfehlungen f&uuml;r Ihren<br /> n&auml;chsten Besuch:</strong></td>
 </tr>
 <tr>
 <td align="center" valign="middle">Empfehlung1</td>
 </tr>
 <tr>
 <td align="center" valign="middle">Empfehlung2</td>
 </tr>
 <tr>
 <td align="center" valign="middle">Empfehlung3</td>
 </tr>
 <tr>
 <td align="center" valign="middle">Empfehlung4</td>
 </tr> 
</table>
</td>
 </tr>
 <tr>
 <td width="3%">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1"> 
 <tr bgcolor="#009900">
 <td height="33" colspan="2" align="left" valign="middle"><strong>Bestellinformationen:</strong></td>
 </tr>
 <colgroup width="100%" span="2"></colgroup>
 <tr>
 <td colspan="2"><strong>E-Mailadresse: </strong>Adresse</td>
 </tr>
 <tr>
 <td><strong>Rechnungsadresse:</strong><br />
 Anrede Vorname Nachname<br>
 Straßen<br>
 PLZ, Ort<br>
 Land<br>
 Telefonnr.:<br>
 </td>
 <td><strong>Versandadresse:</strong><br /> 
 Anrede Vorname Nachname<br>
 Straße<br>
 PLZ Ort<br>
 Land<br>
 </td>
 </tr>
 <tr>
 <td colspan="2"><strong>Gesamtsumme dieser Bestellung: Betrag</strong></td>
 </tr>
 </table></td>
 <td bgcolor="#CCCCCC"></td>
 </tr>
 <tr>
 <td width="3%">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1"> 
 <tr bgcolor="#009900">
 <td height="33" colspan="2" align="left" valign="middle"><strong>Bestell&uuml;bersicht:</strong></td>
 </tr>
 <colgroup>
 <col width="25%">
 <col width="75%">
 </colgroup>
 <tr>
 <td>Bestellnr.:</td>
 <td>Nummer</td>
 </tr>
 <tr>
 <td>Bezahlung erfolgt über:</td>
 <td>Bezahlart</td>
 </tr>
 <tr>
 <td>Versand:}]</td>
 <td>Versandart</td>
 </tr> 
 <tr>
 <td>Artikelsumme netto</td>
 <td>Betrag</td>
 </tr> 
 <tr>
 <td>MWSt.</td>
 <td>Betrag</td>
 </tr> 
 <tr>
 <td>&nbsp;</td>
 <td>------------</td>
 </tr> 
 <tr>
 <td>Artikelsumme brutto:</td>
 <td>Betrag:</td>
 </tr> 
 <tr> 
 <td>Versandkosten:</td>
 <td>Betrag</td>
 </tr> 
 <tr>
 <td>&nbsp;</td>
 <td>-----------</td>
 </tr>
 <tr>
 <td><strong>Gesamtsumme:</strong></td>
 <td><strong>Betrag</strong></td>
 </tr> 
 </table></td>
 <td bgcolor="#CCCCCC">&nbsp;</td>
 </tr>
 <tr>
 <td width="3%">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1">
 <tr bgcolor="#009900">
 <td height="33" colspan="2" align="left" valign="middle"><strong>Artikel</strong></td>
 <td height="33" align="left" valign="middle"><strong>Anzahl</strong></td>
 <td height="33" align="left" valign="middle"><strong>Einzelpreis</strong></td>
 <td height="33" align="left" valign="middle"><strong>Gesamtpreis</strong></td>
 <td height="33" align="left" valign="middle"><strong>Produkt bewerten</strong></td>
 </tr>
 <tr>
 <td width="100">Bild</td>
 <td nowrap="nowrap">Beschreibung
 <br><span style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px;">Artikelnummer</span></td>
 <td>Anzahl</td>
 <td>Betrag</td>
 <td>Betrag</td>
 <td>Link</td>
 </tr> 
 </table></td>
 <td bgcolor="#CCCCCC">&nbsp;</td>
 </tr>
 <tr>
 <td width="3%">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1">
 <colgroup width="100%" span="2"></colgroup>
 <tr>
 <td><strong>Kundennachricht:</strong></td>
 </tr>
 <tr>
 <td>Text</td>
 </tr>
 </table></td>
 <td bgcolor="#CCCCCC">&nbsp;</td>
 </tr>
 <tr>
 <td width="3%">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1">
 <tr>
 <td><strong>Bitte beachten Sie:</strong></td>
 </tr>
 <tr>
 <td>Text</td>
 </tr>
 </table></td>
 <td bgcolor="#CCCCCC">&nbsp;</td>
 </tr>
</table>
</body>
</html>
    ich würde gerne wollen, dass eben nur noch die ränder angezeigt werden, wie in dem pdf/xls-Dokument. Habe es schon versucht mit

    Code:
    rule="cols" frame="void"
    aber es hat sich nichts geändert.
    was mache ich falsch?

    Cheers
     
    + Multi-Zitat Zitieren
  4. 10. Januar 2010
    AW: Hilfe beim Aufbau

    Hey

    guck dir am besten mal folgende Links an:
    Tables
    Lesson 6 - Structuring Web Pages

    Du musst den Spalten mit style CSS Parameter übergeben. Hab schonmal ein bisschen angefangen

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=[{$charset}]">
 </head>
 <body bgcolor="#FFFFFF" link="#355222" alink="#355222" vlink="#355222" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px;">
<table width="100%"border="1">
 <tr>
 <td colspan="2" width="70%"></td>
 <td style="border-right: hidden; border-bottom: hidden; border-top: hidden; border-left: hidden" colspan="2" align="right" valign="middle">Mein Konto | Bestellhistorie | Impressum</td>
 </tr>
 <tr>
 <td width="3%" style="border-right: hidden; border-bottom: hidden; border-top: hidden; border-left: hidden">&nbsp;</td>
 <td style="border-right: hidden; border-bottom: hidden;" colspan="2"><table width="100%" border= "0" >
 <tr>
 <td>Vielen Dank für Ihre Bestellung <br /><br />Text Text Text Text</td>
 </tr>
</table>
</td>
 <td bgcolor="#CCCCCC" width="15%"><table width="100%" border="1">
 <tr>
 <td align="center" valign="middle" bgcolor="#009900"><strong>Empfehlungen f&uuml;r Ihren<br /> n&auml;chsten Besuch:</strong></td>
 </tr>
 <tr>
 <td align="center" valign="middle">Empfehlung1</td>
 </tr>
 <tr>
 <td align="center" valign="middle">Empfehlung2</td>
 </tr>
 <tr>
 <td align="center" valign="middle">Empfehlung3</td>
 </tr>
 <tr>
 <td align="center" valign="middle">Empfehlung4</td>
 </tr> 
</table>
</td>
 </tr>
 <tr>
 <td width="3%" style="border-right: hidden; border-bottom: hidden; border-top: hidden; border-left: hidden">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1"> 
 <tr bgcolor="#009900">
 <td height="33" colspan="2" align="left" valign="middle"><strong>Bestellinformationen:</strong></td>
 </tr>
 <colgroup width="100%" span="2"></colgroup>
 <tr>
 <td colspan="2"><strong>E-Mailadresse: </strong>Adresse</td>
 </tr>
 <tr>
 <td><strong>Rechnungsadresse:</strong><br />
 Anrede Vorname Nachname<br>
 Straßen<br>
 PLZ, Ort<br>
 Land<br>
 Telefonnr.:<br>
 </td>
 <td><strong>Versandadresse:</strong><br /> 
 Anrede Vorname Nachname<br>
 Straße<br>
 PLZ Ort<br>
 Land<br>
 </td>
 </tr>
 <tr>
 <td colspan="2"><strong>Gesamtsumme dieser Bestellung: Betrag</strong></td>
 </tr>
 </table></td>
 <td bgcolor="#CCCCCC"></td>
 </tr>
 <tr>
 <td width="3%"style="border-right: hidden; border-bottom: hidden; border-top: hidden; border-left: hidden">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1"> 
 <tr bgcolor="#009900">
 <td height="33" colspan="2" align="left" valign="middle"><strong>Bestell&uuml;bersicht:</strong></td>
 </tr>
 <colgroup>
 <col width="25%">
 <col width="75%">
 </colgroup>
 <tr>
 <td>Bestellnr.:</td>
 <td>Nummer</td>
 </tr>
 <tr>
 <td>Bezahlung erfolgt über:</td>
 <td>Bezahlart</td>
 </tr>
 <tr>
 <td>Versand:}]</td>
 <td>Versandart</td>
 </tr> 
 <tr>
 <td>Artikelsumme netto</td>
 <td>Betrag</td>
 </tr> 
 <tr>
 <td>MWSt.</td>
 <td>Betrag</td>
 </tr> 
 <tr>
 <td>&nbsp;</td>
 <td>------------</td>
 </tr> 
 <tr>
 <td>Artikelsumme brutto:</td>
 <td>Betrag:</td>
 </tr> 
 <tr> 
 <td>Versandkosten:</td>
 <td>Betrag</td>
 </tr> 
 <tr>
 <td>&nbsp;</td>
 <td>-----------</td>
 </tr>
 <tr>
 <td><strong>Gesamtsumme:</strong></td>
 <td><strong>Betrag</strong></td>
 </tr> 
 </table></td>
 <td bgcolor="#CCCCCC">&nbsp;</td>
 </tr>
 <tr>
 <td width="3%" style="border-right: hidden; border-bottom: hidden; border-top: hidden; border-left: hidden">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1">
 <tr bgcolor="#009900">
 <td height="33" colspan="2" align="left" valign="middle"><strong>Artikel</strong></td>
 <td height="33" align="left" valign="middle"><strong>Anzahl</strong></td>
 <td height="33" align="left" valign="middle"><strong>Einzelpreis</strong></td>
 <td height="33" align="left" valign="middle"><strong>Gesamtpreis</strong></td>
 <td height="33" align="left" valign="middle"><strong>Produkt bewerten</strong></td>
 </tr>
 <tr>
 <td width="100">Bild</td>
 <td nowrap="nowrap">Beschreibung
 <br><span style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px;">Artikelnummer</span></td>
 <td>Anzahl</td>
 <td>Betrag</td>
 <td>Betrag</td>
 <td>Link</td>
 </tr> 
 </table></td>
 <td bgcolor="#CCCCCC">&nbsp;</td>
 </tr>
 <tr>
 <td width="3%"style="border-right: hidden; border-bottom: hidden; border-top: hidden; border-left: hidden">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1">
 <colgroup width="100%" span="2"></colgroup>
 <tr>
 <td><strong>Kundennachricht:</strong></td>
 </tr>
 <tr>
 <td>Text</td>
 </tr>
 </table></td>
 <td bgcolor="#CCCCCC">&nbsp;</td>
 </tr>
 <tr>
 <td width="3%" style="border-right: hidden; border-top: hidden; border-left: hidden; border-bottom: hidden;">&nbsp;</td>
 <td colspan="2"><table width="100%" border="1">
 <tr>
 <td><strong>Bitte beachten Sie:</strong></td>
 </tr>
 <tr>
 <td>Text</td>
 </tr>
 </table></td>
 <td bgcolor="#CCCCCC">&nbsp;</td>
 </tr>
</table>
</body>
</html>
    Greetz Kaptain27
     
    + Multi-Zitat Zitieren
  5. 10. Januar 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Hilfe beim Aufbau

    hab jetzt deinen code einmal ausprobiert, aber er funktioniert irgendwie nicht warum auch immer...verstehe das nicht ganz. also schon was das bewirken soll, aber nicht, warum es nicht passiert

    cheers

    //EDIT:

    hier mal, wie es aussehen sollte (Bilder)
    Bild


    {bild-down: https://www1.xup.in/tn/2010_01/65561357.jpeg}
     
    + Multi-Zitat Zitieren
  6. 13. Januar 2010
    AW: Hilfe beim Aufbau

    also es ist mit sicherheit nur ein "walkaround" aber ich würds -auch auf grund fehlender kenntnisse- so machen: struktur grob/großflächig in photoshop zeichen, slicen und als html speichern, dann hast du in jedem fall schonmal die tabellen genau so wie du sie brauchst. bilder duch entsprechende styles zu erstehen sollte dann ja kein problem mehr sein....aber wie gesagt ist nur der walkaround eines newbees;-)

    greez
     
    + Multi-Zitat Zitieren
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten