Galerie an andere Position verschieben

Hey Leute, ich habe hier diesen fertigen Script für eine Galerie: https://jsfiddle.net/2fersen/68yo8pzc/ Wie kann ich diese an eine andere Stelle positionieren? 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: 90%; margin: 0px auto; padding: 10px; font-family: 'Poiret One'; line-height: 20px; letter-spacing: 1px; box-sizing: border-box; } #mywrapper main { background:white; } #mywrapper header { background:lightgrey; color: Black; padding: 1em; width:calc(90% - 1em); font-weight: bold; text-align: center; border:0px solid grey; } #mywrapper section { padding: 10px 0; text-align: center; } #mywrapper article { text-align: center; background:lightgrey; padding: 2px; margin-right: 10px; } #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; } #mywrapper h3 { padding: 10px; font-weight: bold; font-size: 2em; } #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 table { margin-top: 30px; width: 100%; font-family: arial serif; background:lightgrey; border-collapse: collapse; } #mywrapper td { text-align: left; padding:5px; border-bottom:2px solid black; width:50%; } #mywrapper .td{ padding-top:42px; } #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; } #mywrapper .descripe { padding: 1em; text-align: left; } #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: #8B4513; } #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 { width: 100%; flex-direction: column; margin: 5px 0; border: none; box-sizing: border-box; } } .gal li { width: 20%; } /*Crosselling;*/ li img { width: 100%; border: 2px solid lightgrey; } /*Details Tabelle;*/ #mywrapper table { border: 10px solid lightgrey; } #mywrapper .flex .col-33 { background:lightgrey; background:none; } #mywrapper .flex .col-38 { background:lightgrey; } * { 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; } header { padding: 10px; background: lightgrey; border:1px solid #999; } #gal { float: left; height: auto; overflow: hidden; } #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% } legend { width:95%; position: relative; top: 65px; left:10px; text-align: center; font-family: arial; font-size:25px; font-weight:bold; font-weight: 100; color:black; border-bottom:2px solid black; } .col-38{ } #bild1{ position:relative; top: 30px; left: 120px; } #bild2{ position:relative; top: 0px; left: 120px; } </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> <table style="padding-top:20px;"> <legend> Details </legend> <tr> </tr> <tr> <td class="td">Merkmal1</td> <td class="td">Text1</td> </tr> <tr> <td>Merkmal2</td> <td>Text2</td> </tr> <tr> <td>Merkmal3</td> <td>Text3</td> </tr> <tr> <td>Merkmal4</td> <td>Text4</td> </tr> <tr> <td>Merkmal5</td> <td>Text5</td> </tr> <tr> <td>Merkmal6</td> <td>Text6</td> </tr> </table> <p> </p> <section class="gal"> <h1>Artikel die Sie auch interessieren k&ouml;nnten:</h1> <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> <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> <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> Wegen der Gesetzesbestimmungen erfolgt die Auktion unter Ausschluss jeglicher Gewährleistung, Garantie und Rücknahme. Da es sich um Privatverkauf handelt. Ich hoffe potenzielle K&auml;ufer sind damit einverstanden. </p> </article> <article class="col-38" id="ausen2"> <h3 class="fa fa-5x fa-truck"><b>Versand</b></h3> <p>Schnelle Bearbeitung Ihrer Bestellung. Täglicher Versand außer Sonntags und Feiertags Top Kundenservice.</p> </article> <article class="col-38" id="ausen3"> <h3 class="fa fa-5x fa-euro"><b>Zahlung</b></h3> <p style="text-align:left;margin-right:10px;">Ich akzeptiere folgende Zahlungsarten:</p> <p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-bank"></i><img id="bild1" alt="" src="http://www.mamamotion.de/media/wysiwyg/payment-in-advance.png" height="100%" width="30%">Banküberweisung.</p> <p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-paypal"></i><img id="bild2" alt="" src="https://www.softengine.de/files/logo_paypal.jpg" height="100%" width="30%">Paypal.</p> </article> </section> <section class="flex"> <article class="col-38" id="ausen4"> <h3 class="fa fa-5x fa-question-circle ausen"><b>Frage</b></h3> <p>Wenn Sie Fragen zum Artikel haben, können Sie mir gerne eine <a style="display:block;" href="https://contact.ebay.de/ws/eBayISAPI.dll?ShowSellerFAQ&requested=Kopper-24">Nachricht</a> zukommen lassen.</p> </article> <article class="col-38" id="ausen5"> <h3 class="fa fa-5x fa-eye "><b>Meine Artikel</b></h3> <p>Hier gibt es noch <a style="display:block;" href="https://www.ebay.de/sch/kopper-24/m.html?_nkw=&_armrs=1&_ipg=&_from=">weitere Artikel</a> von mir.</p> </article> <article class="col-38" id="ausen6"> <h3 class="fa fa-5x fa-star"><b>Meine Bewertungen</b></h3> <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> </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!