|
|||
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 |
Sponsored Links |
|
|||
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> MrMurphy |
Sponsored Links |
|
|||
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. |
Stichwörter |
css, div, html, newsletter |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |