Hey Leute,
ich habe hier diesen fast fertigen HTML bzw. CSS Script:
<a href="https://jsfiddle.net/69f6x8fx/">https://jsfiddle.net/69f6x8fx/</a>
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!
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ä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ür Sie. </p>
<p> </p>
<p>Die Ballons lassen sich mit Luft befüllen und dank des eingebauten selbstverschließenden Ventils, ist ein nach- und wiederauffüllen mehrmals möglich.</p>
<p> </p>
<p>Die Luft bleibt nach dem Auffüllen etwa <strong>5-7 Tagen</strong> im Ballon, was einen langen Spaß ermöglicht.</p>
<p> Außerdem befinden sich an jedem Ballon mehrere Aufhänglaschen, sodass sich der Schriftzug perfekt an einer Schnur aufhängen lässt. </p>
<br>
<h3><strong>Technische Daten:</strong></h3>
<p>
13 Teiliges Set
Größe: ca. 40 cm (pro Ballon)
Farbe: siehe Bild
mehrere Haltevorrichtungen an jedem Buchstaben
Material: Folie
Integriertes Automatikschließventil (nur Aufblasen - kein Knoten notwendig)
Wiederverwendbar durch leichtes Ablassen der Luft ( mit einem Strohhalm)
Anlass: Hochzeit, Geburtstag, Party, Silvester, Geschenk, uvm.
Befü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üllen ist ganz einfach:</strong></p>
<p>
Suchen Sie die silber-glänzende Stelle vom Ballon.
Durchstechen Sie diese mit einem Strohalm oder einem Auffüllaufsatz
Füllen Sie den Ballon auf und ziehen den Aufsatz heraus und der Verschluss verschließt sich wieder automatisch.
<strong>ACHTUNG: nicht für Kinder unter 3 Jahren geeignet!</strong></p> </div></div>
<div id="galerie">
<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>
</div>
</div>
<div id="tabelle">tabelle</div>
<div id="alles_box">
<div id="box1" class="grey box">
<h3> <b>Info</b></h3>
<li>✔ Großes Sortiment </li>
<li>✔ Faire Preise </li>
<li>✔ Kompetenter Kundenservice </li>
<li>✔ Schnelle Reaktion auf Nachrichten </li>
<li>✔ Kombiversand </li>
<li>✔ 30 Tage Rückgaberecht</li>
<li>✔ 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 src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" /> <p>verschicken wir Ihre Bestellung noch am gleichen Werktag.</p>
<img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
</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 src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
</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 src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
</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äufern.</p>
<img src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
</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 src="/image/Hauptbild-mit-Rand.jpg" alt="bild1" />
</div>
</div>
<div id="fuss" class="orange"><h3>
Andere Informationen</h3><p class="mittig">
Bl bla viel text
</p></div>
</div>