Zwei kleine Korrekturen an dem Script

Hey Leute, ich habe hier diesen fast fertigen HTML bzw. CSS Script: https://jsfiddle.net/69f6x8fx/ Zwei kleine Änderungen fehlen hier noch das ich dies einsetzen kann, die ich aber nicht hinbekommen. 1. Die obere Spalte „Artikelbeschreibung“ und die Galerie sollten gleich breit sein 2. und die Schriftart von den Kästchen ganz unten etwas kräftiger. Freue mich auf eure Antworten!

Der hier verwendete Code

<!DOCTYPE HTML> <html> <head> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> <meta charset="utf-8"> <link rel="stylesheet" href="meinestyles.css"> <style> #mywrapper main * { margin: 0; padding: 0; } #mywrapper main, header, footer { width: 100%; margin: 0px auto; padding: 10px; font-family: 'Poiret One'; line-height: 20px; letter-spacing: 1px; box-sizing: border-box; } #mywrapper main { background:white; width:100%; } #mywrapper header { background:orange; color: Black; padding: 1em; width:calc(100% - 1em); font-weight: bold; text-align: center; border:0px solid grey; } #mywrapper section { padding: 10px 0; text-align: center; width:100%; } #mywrapper article { text-align: center; background:lightgrey; padding: 2px; margin-right: 10px; width:50%; } #mywrapper article h1 { font-size: 2vw; border: 1px solid grey; } #mywrapper article:last-child { margin-right: 0; } #mywrapper article a { color: #8B4513; font-weight: bold; } #mywrapper .descripe h3 { padding: 10px; font-weight: bold; font-size: 1.5em; width:100%; } #mywrapper h3 { padding: 10px; font-weight: bold; font-size: 1.5em; } #mywrapper p { padding: 10px; } #mywrapper footer { padding: 10px; background: transparent; text-align: right; color: #8B4513; } #mywrapper footer a { color: #8B4513; text-decoration: none; font-family: sans-serif; } #mywrapper caption { background:lightgrey; color: #fff; padding: 5px; text-align: left; } #mywrapper .gal { margin: 5px 0; border-top: 2px solid #eee; border-bottom: 2px solid lightgrey; } #mywrapper .gal ul { list-style: none; display: flex; } #mywrapper .gal li { width: 30%; margin: 1px; display: flex; align-items: center; } #mywrapper .gal a { display: block; padding: 2px; outline: none; } #mywrapper .flex { display: flex; width:100%; } #mywrapper .descripe { padding: 1em; text-align: left; width:100%; } #mywrapper .info { background:lightgrey; font-weight: bold; color: #fff; display: flex; align-items: center; font-family: sans serif; } #mywrapper .col-66 { width: 50%; } #mywrapper .col-34 { width: 49%; } #mywrapper .col-38 { width: 49%; } #mywrapper #ausen2, #mywrapper #ausen5{ background:orange; } #mywrapper .fa { color: black; } #mywrapper .weiss { color: #fff; } #mywrapper .none { display: none; } @media (max-width: 800px) { #mywrapper main, #mywrapper header, #mywrapper footer, section { /*width: 100px;*/ } #mywrapper .flex, #mywrapper .info, #mywrapper .col-66, #mywrapper .col-34, .gal ul, .gal li { flex-direction: column; margin: 5px 0; border: none; box-sizing: border-box; } } .gal li { width: 20%; } li img { width: 100%; border: 2px solid lightgrey; } #mywrapper .flex .col-33 { background:lightgrey; background:none; } #mywrapper .flex .col-38 { background:lightgrey; } * { font-weight:900; margin: 0; padding: 0; list-style: none; border: none; outline: none; box-sizing: border-box; } body { padding: 10px; float: left; background:white; border: 15px solid #999; } #gal { float: left; height: auto; overflow: hidden; width:100%; } #gal #ausgabe { width: 500%; float: left; position: relative; left: 0; -moz-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; } #gal a { position: relative; float: left; width: 20%; } #gal img { float: left; width: 100%; } #ausgabe img { width: 20%; float: left; } #gal a img { padding: 0 0 1px 1px; } #gal a:focus:before { content: ""; position: absolute; top: 0; left: 0; right: 1px; bottom: 1px; background: rgba(255, 255, 255, .3); } #gal a:focus ~ #ausgabe { left: -0%; } #gal a + a:focus ~ #ausgabe { left: -100%; } #gal a + a + a:focus ~ #ausgabe { left: -200%; } #gal a + a + a + a:focus ~ #ausgabe { left: -300% } #gal a + a + a + a +a:focus ~ #ausgabe { left: -400% } #bild1{ position:relative; top: 30px; left: 120px; } #bild2{ position:relative; top: 0px; left: 120px; } #Sterne{ position:relative; width: 190px; height: 36px; } #Haende{ position:relative; top: 0px; left: 0px; width: 190px; height: 200px; } #Zahlungsarten{ position:relative; top: 0px; left: 0px; width: 190px; height: 200px; } #Versand{ position:relative; top: 0px; left: 0px; width: 145px; height: 153px; } </style> </head> <body> <div id="mywrapper"> <header> <h1>Artikelname</h1></header> <main> <section class="flex"> <article class="descripe col-66 "> <h3>ARTIKELBESCHREIBUNG</h3> <p>Beschreibung</p> </article> <article class="col-33 info"> <div> <div id="gal"> <a tabindex="0" href="#a2"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild1" /> </a> <a tabindex="0" href="#a2"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild2" /> </a> <a tabindex="0" href="#a3"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild3" /> </a> <a tabindex="0" href="#a4"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild4" /> </a> <a tabindex="0" href="#a5"><img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild5" /> </a> <div id="ausgabe"> <img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild1" /> <img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild2" /> <img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild3" /> <img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild4" /> <img src="https://picload.org/image/ddclipga/hauptbild.jpg" alt="bild5" /> </div> </div> </div> </article> </section> <p> </p> <section class="gal"> <h1>Artikel die Sie auch interessieren k&ouml;nnten:</h1> <p> </p> <ul> <li> <a href="labtop.jpg"><img alt="" src="https://picload.org/image/ddclipga/hauptbild.jpg" height="100%" width="100%"></a> </li> <li> <a href="labtop.jpg"><img alt="" src="https://picload.org/image/ddclipga/hauptbild.jpg" height="100%" width="100%"></a> </li> <li> <a href="labtop.jpg"><img alt="" src="https://picload.org/image/ddclipga/hauptbild.jpg" height="100%" width="100%"></a> </li> <li> <a href="labtop.jpg"><img alt="" src="https://picload.org/image/ddclipga/hauptbild.jpg" height="100%" width="100%"></a> </li> </ul> <ul> <li> <a href="labtop.jpg"><img alt="" src="https://picload.org/image/ddclipga/hauptbild.jpg" height="100%" width="100%"></a> </li> <li> <a href="labtop.jpg"><img alt="" src="https://picload.org/image/ddclipga/hauptbild.jpg" height="100%" width="100%"></a> </li> <li> <a href="labtop.jpg"><img alt="" src="https://picload.org/image/ddclipga/hauptbild.jpg" height="100%" width="100%"></a> </li> <li> <a href="labtop.jpg"><img alt="" src="https://picload.org/image/ddclipga/hauptbild.jpg" height="100%" width="100%"></a> </li> </ul> </section> <section class="flex"> <article class="col-38 " id="ausen1"> <h3 class="fa fa-5x fa-info-circle"><b>Info</b></h3> <p> <li>&#10004; Gro&szlig;es Sortiment </li> <li>&#10004; Faire Preise </li> <li>&#10004; Kompetenter Kundenservice </li> <li>&#10004; Schnelle Reaktion auf Nachrichten </li> <li>&#10004; Kombiversand </li> <li>&#10004; R&uuml;cknahme innerhalb von 30 Tagen </li> <li>&#10004; Ausstellen einer Rechnung <br /><br /><br /><br /><br /><br /></li> </p> </article> <article class="col-38" id="ausen2"> <h3 class="fa fa-5x fa-truck"><b>Versand</b></h3> <p><strong>Versand am selben Tag</strong><br> <p> Bei Bestellungseingang bis <strong>15:45 Uhr </strong>verschicken wir Ihre Bestellung noch am gleichen Werktag.</p> <img id="Versand" alt="" src="https://picload.org/image/ddwlllcl/delivery.png"> </article> <article class="col-38" id="ausen3"> <h3 class="fa fa-5x fa-euro"><b>Zahlungsarten</b></h3> <p style="text-align:left;margin-right:10px;"></p> <p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-bank"></i><img id="Zahlungsarten" alt="" src="https://picload.org/image/ddwllwci/alle.png">> </article> </section> <section class="flex"> <article class="col-38" id="ausen4"> <h3 class="fa fa-5x fa-question-circle ausen"><b>Kontakt</b></h3> <p>Wir antworten auf Nachrichten von Montag bis Samstag innerhalb von wenigen Stunden.<p>Haben Sie eine Frage? Senden sie uns eine<a style="display:block;" href="https://contact.ebay.de/ws/eBayISAPI.dll?ShowSellerFAQ&requested=Kopper-24">Nachricht</a></p> <img id="Haende" alt="" src="https://picload.org/image/ddwlllir/haendeschuetteln.png"> </article> <article class="col-38" id="ausen5"> <h3 class="fa fa-5x fa-eye "><b>Ihre Bewertung</b></h3> <p><p>Sie sind zufrieden mit Ihrer Bestellung und unserem Service?</p> <p>Dann freuen wir uns über Ihre positive Bewertung auf unserem eBay-Profil.</p> Hie finden Sie meine aktuellen <a style="display:block;" href="https://feedback.ebay.de/ws/eBayISAPI.dll?ViewFeedback2&userid=kopper-24">Bewertungen</a> von anderen K&auml;ufern.</p> <img id="Sterne" alt="" src="https://picload.org/image/ddwladgr/sterne.png" height="100%" width="100%"></p> </article> <article class="col-38" id="ausen6"> <h3 class="fa fa-5x fa-star"><b>Weitere Artikel</b></h3> <p>Hier finden Sie noch <a style="display:block;" href="https://www.ebay.de/sch/kopper-24/m.html?_nkw=&_armrs=1&_ipg=&_from=">weitere Artikel</a> von unserem Shop.</p> </article> </section> </main> </div> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!