XHTMLforum - CSS / HTML Newsletter responsive

XHTMLforum (http://xhtmlforum.de/index.php)

- (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)

- - CSS / HTML Newsletter responsive - Problem mit 2 Div classes (http://xhtmlforum.de/showthread.php?t=72080)

CSS / HTML Newsletter responsive - Problem mit 2 Div classes

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

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

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.

Danke für den Hinweis.

Ich werde wohl ein Template davon benutzen.

Vielen Dank nochmal.

Gruß

Neuling123