zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden CSS / HTML Newsletter responsive - Problem mit 2 Div classes

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.06.2015, 12:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2015
Beiträge: 2
Neuling123 befindet sich auf einem aufstrebenden Ast
Standard 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 &raquo;</u>&nbsp;&nbsp;&nbsp;&nbsp; <u>Navi 2 &raquo;</u>&nbsp;&nbsp;&nbsp;&nbsp; <u>Navi 3 &raquo;</u>&nbsp;&nbsp;&nbsp;&nbsp; <u>Navi 4 &raquo;</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
Angehängte Dateien
Dateityp: doc NL Aufbau.doc (27,5 KB, 3x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.06.2015, 14:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.06.2015, 15:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 03.06.2015, 08:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2015
Beiträge: 2
Neuling123 befindet sich auf einem aufstrebenden Ast
Standard

Danke für den Hinweis.

Ich werde wohl ein Template davon benutzen.


Vielen Dank nochmal.

Gruß

Neuling123
Mit Zitat antworten
Antwort

Stichwörter
css, div, html, newsletter

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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 19:47
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Myspace problem... Rechte Säule verschiebt sich im IE. calledmarcel CSS 1 27.02.2009 10:12
CSS ul li Problem snowbound_ch CSS 16 07.02.2008 13:14
CSS DIV Problem invy CSS 4 08.08.2005 12:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:44 Uhr.