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>
<meta charset="utf-8">
<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="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
<a tabindex="0" href="#a2"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
<a tabindex="0" href="#a2"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
<a tabindex="0" href="#a2"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
<a tabindex="0" href="#a2"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> </a>
<div id="ausgabe">
<img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
<img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
<img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
<img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
<img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
</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önnten:</h1>
<ul>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
</ul>
<ul>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></a>
</li>
<li>
<a href="labtop.jpg"><img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /></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ä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="/image/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="/image/paypal.svg" 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äufern.</p>
</article>
</section>
</main>
</div>
</body>
</html>