Zwei kleine Korrekturen an dem Script Lösung 2

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

<style> *{ border:0px solid red; margin:0; padding:0; } #alles{ width:100%; border:5px solid grey; background:white; } #kopf{ width:calc(100% - 34px - 10px); border:1px solid grey; margin:15px; } h1{ font-size:35px; color:black; text-align:center; text-decoration:underline; } h3{ font-size:20px; color:black; text-align:center; text-decoration:underline; } /* KLASSEN */ .mittig{ text-align:center; font-size:16px; font-weight:500; color:black; } .orange{ background:orange; } .grey{ background:lightgrey; } #alles_kopf{ width:calc(100% - 38px - 10px); display:flex; flex-direction: row; margin:15px; } #alles_links{ width:49%; display:flex; flex-direction: column; } #links1{ width:100%; flex: 1; } #links2{ margin-top:15px; width:100%; flex: 1; } #galerie{ width:49%; flex: 3; } #tabelle{ display:block;/*Tabelle ein und aus blenden*/ width:calc(100% - 38px - 10px); margin:0px 15px 0px 15px; background:grey; } /*@media only screen and (min-width: 400px) {*/ #alles_box{ background:red; display: flex; flex-wrap: wrap; width:calc(100% - 42px - 10px); margin:15px 15px 0 15px; align-items:flex-start; list-style:none; justify-content:center; } #alles_box div{ margin-top:10px; flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.3% - 20px); } #box1,#box2,#box4,#box5{ margin-right:10px; } #alles_box img{ width:50%; } #alles_box div:nth-of-type(1), #alles_box div:nth-of-type(2), #alles_box div:nth-of-type(3){ order: 1; } #alles_box div:nth-of-type(4), #alles_box div:nth-of-type(5), #alles_box div:nth-of-type(6){ order: 2; } #fuss{ width:calc(100% - 34px - 10px); margin:15px 15px 20px 15px; } /* } @media only screen and (min-width: 1200px) { #alles_box div{ flex-basis: calc(33.333% - 5px); } #alles_box div:nth-of-type(1), #alles_box div:nth-of-type(2), #alles_box div:nth-of-type(3) { order: 1; } #alles_box div:nth-of-type(4), #alles_box div:nth-of-type(5), #alles_box div:nth-of-type(6) { order: 2; } } */ #gal { float: left; height: auto; overflow: hidden; width:100%; border:5px solid grey; } #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% } </style> <div id="alles"> <div id="kopf" class="orange"><h1>Artikelname</h1></div> <div id="alles_kopf"> <div id="alles_links"> <div id="links1" class="grey"> <h3>Happy Birthday - Schriftzug aus Folienballons 40 cm</h3><p>Feiern Sie demn&auml;chst einen Geburtstag oder eine Party und sind noch auf der Suche nach einer passenden Dekoration oder einem Geschenk?</p> <p>Dann sind diese tollen Luftballons genau die richtigen f&uuml;r Sie.&nbsp;</p> <p>&nbsp;</p> <p>Die Ballons lassen sich mit Luft bef&uuml;llen und dank des eingebauten selbstverschlie&szlig;enden Ventils, ist ein nach- und wiederauff&uuml;llen mehrmals m&ouml;glich.</p> <p>&nbsp;</p> <p>Die Luft bleibt nach dem Auff&uuml;llen etwa&nbsp;<strong>5-7 Tagen</strong> im Ballon, was einen langen Spa&szlig; erm&ouml;glicht.</p> <p> Au&szlig;erdem befinden sich an jedem Ballon mehrere Aufh&auml;nglaschen, sodass sich der Schriftzug perfekt an einer Schnur aufh&auml;ngen l&auml;sst.&nbsp;</p> <br> <h3><strong>Technische Daten:</strong></h3> <p> 13 Teiliges Set Gr&ouml;&szlig;e: ca. 40 cm (pro Ballon) Farbe: siehe Bild mehrere Haltevorrichtungen an jedem Buchstaben Material: Folie Integriertes Automatikschlie&szlig;ventil (nur Aufblasen - kein Knoten notwendig) Wiederverwendbar durch leichtes Ablassen der Luft ( mit einem Strohhalm) Anlass: Hochzeit, Geburtstag, Party, Silvester, Geschenk, uvm.&nbsp; Bef&uuml;llbar nur mit Luft (die Ballons fliegen nicht mit Helium) </p></div> <div id="links2" class="grey"><h3><strong>Lieferumfang</strong></h3> je nach Auswahl: 1x 13 teiliges Happy Birthday-Folienballon Set <p> <strong>Das Auff&uuml;llen ist ganz einfach:</strong></p> <p> Suchen Sie die silber-gl&auml;nzende Stelle vom Ballon. Durchstechen Sie diese mit einem Strohalm oder einem Auff&uuml;llaufsatz&nbsp; F&uuml;llen Sie den Ballon auf und ziehen den Aufsatz heraus und der Verschluss verschlie&szlig;t sich wieder automatisch. <strong>ACHTUNG: nicht f&uuml;r Kinder unter 3 Jahren geeignet!</strong></p> </div></div> <div id="galerie"> <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> </div> </div> <div id="tabelle">tabelle</div> <div id="alles_box"> <div id="box1" class="grey box"> <h3> <b>Info</b></h3> <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; 30 Tage R&uuml;ckgaberecht</li> <li>&#10004; Ausstellen einer Rechnung</li> </div> <div id="box1"class="orange box"> <h3 class="fa fa-5x fa-truck"><b>Versand</b></h3> <p>Der Versand erfolgt in der Regel innerhalb eines Werktages.<br></p> <p>Bei Bestellungseingang bis <p><img alt="" src="https://picload.org/image/ddwwowri/15.45.png" width="45%"><p>verschicken wir Ihre Bestellung noch am gleichen Werktag.</p> <img id="Versand" alt="" src="https://picload.org/image/ddwlllcl/delivery.png" width="55%"> </div> <div id="box1"class="grey box"> <h3><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"> </div> <div id="box1"class="grey box"> <h3><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/ddwwowow/haendeschuetteln.png" width="70%"> </div> <div id="box1"class="orange box"> <h3><b>Ihre Bewertung</b></h3> <p>Sie sind zufrieden mit Ihrer Bestellung und unserem Service? Dann freuen wir uns über Ihre positive Bewertung auf unserem eBay-Profil.</p><p> Hier 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/ddwwldcw/sterne.png" height="100%"> </div> <div id="box1"class="grey box"> <h3><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> <img id="Punkte" alt="" src="https://picload.org/image/daggawww/next.png" height="100%"> </div> </div> <div id="fuss" class="orange"><h3> Andere Informationen</h3><p class="mittig"> Bl bla viel text </p></div> </div>

Add Comment

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

Comments

No comments yet. Be the first!