CSS / HTML Newsletter responsive - Problem mit 2 Div classes

Neuling123 · #1 (**permalink**) 02.06.2015, 11:23

Hallo zusammen,

ich hoffe Ihr könnt mir helfen, ich habe noch nie mit CSS/HTML zu tun gehabt und soll nun einen responsive Newsletter hinbekommen. Ich habe mich mit videos etc. durchgehangelt. Bisher schaut es auf den Mobilengeräten (Tablet, Smartphone), sowie auf dem Desktop ganz okay aus.

Ich habe folgenden Aufbau:

Fullview

Navigation

Artikelbild

Artikelname

werblicher Text / Inhalt

Ich habe ein Problem mit dem werblichen Text und dem Inhalt ich möchte diese beiden nebeneinander, und wenn möglich bei der mobilen Ansicht untereinander. Leider komme ich hier seit einiger Zeit nicht mehr weiter und finde im Internet nicht die entsprechende Hilfe.

Mit float: left; funktinoiert es nicht.

Hier noch mein Code, ich hoffe, dass ich da nicht was kompliziertes zusammengeschustert habe : )

<!Doctype html>
<html>
<head>
<title></title>

<style type="text/css">
.email-background {
background: #ffffff;
padding: 10px; }

.email-Container, .pre-header {
max-width: 500px;
background: #ffffff;
font-family: sans-serif;
margin: 0 auto;
overflow: hidden;
border-radius: 0px;
text-align: center;

}

.pre-header {
background: #ffffff;
color: #000;
font-size: 12px;
padding-bottom: 8px }

.navigation {
max-width: 500px;
background: #FFFFFF;
color: #b3231c;
font-size: 16px;
padding-bottom: 5px;
padding-left: 50px;
padding-top: 3px;
padding-right: 50px;
margin: 5px;
face: Arial, Helvetica, sans-serif;
margin: 0 auto;
border: #c89d6a solid;
border-width: 2px; }

img {
max-width: 100%;
height: auto;

}

.c {
magrin: 20 px;
font-size: 18px;
font-weight: 300;
color: #000;
line-height: 1.5;
text-align: center }

.cta {
margin: 20px; }

.cta a {
text-decoration: none;
display: inline-block;
background: #ffffff;
color: #000;
padding: 10px 20px 10px;
border-radius: 5px; }

</style>
</head>

<body style="background-color: #ffffff">

<div class="email-background">

<div class="pre-header">
Sollte der Newsletter nicht korrekt angezeigt werden, klicken Sie <a href="#">hier</a>

</div>

<center><div class="navigation" >
<center> <u>Navi 1 »</u>     <u>Navi 2 »</u>     <u>Navi 3 »</u>     <u>Navi 4 »</u></center></div>

<div class="email-container">
<p></p>
<div class="c"><img style="border:1px solid gold; border-bottom:none" src="Test NL/test.jpg"></div>

<div class="c"><img style="border:1px solid gold; border-top:none" src="Test NL/Test.gif"></div>

<div class="c"><img style="border:1px solid gold; border-top:none" src="Test NL/Test"></div>

<div class="email-container">

<div class="c"><img style="border:1px solid gold; border-bottom:none" src="Test NL/Test.jpg"></div>

<div class="c"><img style="border:1px solid gold; border-top:none" src="Test NL/Test.gif"></div>
<p>

</div>

<div class="footer-junk"; align="center">
Impressum| <a href="#"> Test </a>
</div>

</div>
</body>
</html>

Vielen Dank für eure Hilfe. Anbei noch ein Doc mit dem gedachten Aufbau von mir

MrMurphy · #2 (**permalink**) 02.06.2015, 13:50

Hallo,

ich würde das mit aktuellem HTML und CSS folgendermaßen lösen:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Layout 02</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      @media all {
         /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
         header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
            display: block;
         }
         * {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }
         html {
            font-size: 120%;
         }
         body {
            padding: 0;
            margin: 1rem;
         }
         header,
         nav,
         article,
         section,
         aside,
         div,
         h1 {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid silver;
            margin: 0;
         }
         header {
            margin-bottom: 0.5rem;
         }
         nav {
            margin-bottom: 1rem;
         }
         main {
            display: flex;
            flex-wrap: wrap;
         }
         aside {
            width: 50%;
         }
         article {
            width: 50%;
         }
      }
      @media only screen and (max-width: 750px) {
         aside {
            width: 100%;
         }
         article {
            width: 100%;
         }
      }
   </style>
</head>
<body>
   <header>
      <h2>Fullview</h2>
   </header>
   <nav>
      <h2>Navigation</h2>
   </nav>
   <main>
      <div>
         <h2>Bild</h2>
      </div>
      <h1>Artikelname</h1>
      <aside>
         <h2>Werblicher Text</h2>
      </aside>
      <article>
         <h2>Inhalt</h2>
      </article>
      <section>
         <h2>Versandkostenfrei Bild</h2>
      </section>
   </main>
</body>
</html>

Gruss

MrMurphy

cloned · #3 (**permalink**) 02.06.2015, 14:20

Aktuelles HTML und CSS ist leider nicht zielführend bei Newslettern.
Hier gibt es eine gute Liste an templates, (unter dem Punkt Frameworks & Templates)such dir eines davon aus und bau deine Newsletter auf diese auf. Es ist viel Arbeit einen funktionierenden responsive Newsletter zu erstellen.

Persönlich habe ich schon https://github.com/mailchimp/Email-Blueprints die hier verwendet, aber die anderen sind sicher auch gut.

Neuling123 · #4 (**permalink**) 03.06.2015, 07:28

Danke für den Hinweis.

Ich werde wohl ein Template davon benutzen.

Vielen Dank nochmal.

Gruß

Neuling123

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Gehversuche: DIV auf voller Länge bzw. DIV unten ausrichten	strohy	CSS	2	28.01.2012 18:47
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Myspace problem... Rechte Säule verschiebt sich im IE.	calledmarcel	CSS	1	27.02.2009 09:12
CSS ul li Problem	snowbound_ch	CSS	16	07.02.2008 12:14
CSS DIV Problem	invy	CSS	4	08.08.2005 11:44