Überschrift Button funktioniert nicht

2fersen · 5. Januar 2018

Hey Leute,

ich möchte eine Beschreibung für mein Ebay-Shop zusammenbasteln. Jetzt bin ich auf diesen Script gestoßen:

Code

<style>.drop-shadow {
    position:relative;
    padding:1em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}
.lifted {
    -moz-border-radius:4px;
    border-radius:4px;
}
.lifted:before, .lifted:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.lifted:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}
</style><div style="width: 950px;
margin: 20px auto;
"><div class="drop-shadow lifted" style="text-align: center;
"><label for="tab1-btn" class="tablinks" style="display: inline-block;
width: 150px;
text-transform: uppercase;
font-size: 16px;
font-family: Lato, sans-serif;
line-height: 40px;
transition: all 0.1s ease-in-out;
border-width: 1px;
border-style: solid;
border-color: rgb(214, 214, 214) rgb(214, 214, 214) rgb(255, 255, 255);
border-image: initial;
position: relative;
z-index: 2;
cursor: pointer;
top: 1px;
">BESCHREIBUNG</label><span style="font-family: Lato, sans-serif;
font-size: 15px;
text-align: start;
">&nbsp;
</span><input name="tab" id="tab2-btn" type="radio" style="visibility: hidden;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
height: 0px;
width: 0px;
position: absolute;
"><label for="tab2-btn" class="tablinks" style="display: inline-block;
width: 150px;
background-color: rgb(239, 240, 235);
color: rgb(102, 102, 102);
text-transform: uppercase;
font-size: 16px;
font-family: Lato, sans-serif;
line-height: 40px;
transition: all 0.1s ease-in-out;
border: 1px solid rgb(239, 240, 235);
position: relative;
">BEZAHLUNG</label><span style="font-family: Lato, sans-serif;
font-size: 15px;
text-align: start;
">&nbsp;
</span><input name="tab" id="tab3-btn" type="radio" style="visibility: hidden;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
height: 0px;
width: 0px;
position: absolute;
"><label for="tab3-btn" class="tablinks" style="display: inline-block;
width: 150px;
background-color: rgb(239, 240, 235);
color: rgb(102, 102, 102);
text-transform: uppercase;
font-size: 16px;
font-family: Lato, sans-serif;
line-height: 40px;
transition: all 0.1s ease-in-out;
border: 1px solid rgb(239, 240, 235);
position: relative;
">VERSAND</label><span style="font-family: Lato, sans-serif;
font-size: 15px;
text-align: start;
">&nbsp;
</span><input name="tab" id="tab4-btn" type="radio" style="visibility: hidden;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
height: 0px;
width: 0px;
position: absolute;
"><label for="tab4-btn" class="tablinks" style="display: inline-block;
width: 150px;
background-color: rgb(239, 240, 235);
color: rgb(102, 102, 102);
text-transform: uppercase;
font-size: 16px;
font-family: Lato, sans-serif;
line-height: 40px;
transition: all 0.1s ease-in-out;
border: 1px solid rgb(239, 240, 235);
position: relative;
">KONTAKT</label><span style="font-family: Lato, sans-serif;
font-size: 15px;
text-align: start;
"></span><input name="tab" id="tab5-btn" type="radio" style="visibility: hidden;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
height: 0px;
width: 0px;
position: absolute;
"><div id="tab1" style="font-family: Lato, sans-serif;
font-size: 15px;
text-align: start;
"><div class="contentBorder" style="border: 1px solid rgb(214, 214, 214);
padding: 25px 50px 55px;
"><div class="animated fadeInRight" style="animation-duration: 1s;
animation-fill-mode: both;
"><div class="tabContent" style="overflow: hidden;
margin: 0px;
padding: 0px;
color: rgb(85, 85, 85);
font-variant-numeric: normal;
font-variant-east-asian: normal;
font-stretch: normal;
font-size: 16px;
line-height: 1.5;
"><h2 style="color: rgb(51, 51, 51);
font-weight: 300;
font-size: 28px;
font-family: &quot;
Open Sans&quot;
;
">Titel<br></h2><p>Text<br></p><h1 style="color: rgb(51, 51, 51);
font-weight: 300;
font-size: 28px;
font-family: &quot;
Open Sans&quot;
;
">Text<br></p><div class="clearer"></div><br><h2 style="color: rgb(51, 51, 51);
font-weight: 300;
font-size: 28px;
font-family: &quot;
Open Sans&quot;
;
">Überschrift<br></h2>Text<br></div></div></div></div></div></div>

Alles anzeigen

Finde ich recht schön, doch leider passiert nichts, wenn man auf den Button: Bezahlung, Versand,... drückt. Wäre echt klasse, wenn dies jemand richten könnte.

Freue mich auf eure Antworten

Liebe Grüße

Oli

basti1012 · 5. Januar 2018

wo hast du den das gefunden? muss sagen das ist nicht wirklich schön gemacht. ich setze mich da gleich mal ran und kucken ob ich das besser hinbekomme. vieleicht ist auch einer schneller als ich das währe natürlich auch gut

djheke · 5. Januar 2018

Da fehlen ja auch die <input< Elemente und die dazugehöriegen CSS Angaben. Du solltest dich von diesewer Vorlage verabschieden.

Hier mal eine sehr einfache Vorlage

HTML

<!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="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="meinestyles.css">
<style type="text/css">


#mywrapper { background:#222;}
#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: #fff;}
#mywrapper header { background:#0c9;padding:1em ; color:#fff; font-weight:bold;}
#mywrapper section { padding:10px 0; text-align:center;}
#mywrapper article { text-align:center; background:#eee; padding:20px; margin-right:10px;}
#mywrapper article:last-child { margin-right:0;}
#mywrapper article a { color:#FA335F; font-weight:bold;}
#mywrapper .descripe h3 { padding:10px; font-weight:bold; font-size:1.5em;}
#mywrapper h3 { padding:10px; font-weight:bold; font-size:5em;}
#mywrapper p { padding:10px;}
#mywrapper h3 b { display:none;}
#mywrapper footer { padding:10px; background:transparent; text-align:right; color:#aaa;}
#mywrapper footer a { color:#aaa; text-decoration:none; font-family:sans-serif;}
#mywrapper table { margin-top:30px;width:100%; border-collapse:collapse; font-family:arial; border:1px solid #999; background:#fff;}
#mywrapper th,#mywrapper td { text-align:left;padding:5px; border:1px solid #999;}
#mywrapper th { width:30%;}
#mywrapper caption{background:#0c9; color:#fff; padding:5px; text-align:left;}
#mywrapper .gal { margin:50px 0; border-top:2px solid #eee; border-bottom:2px solid #eee;}
#mywrapper .gal ul { list-style:none; display:flex;}
#mywrapper .gal li { margin:10px; background:#eee; display: flex; align-items: center;}
#mywrapper .gal img { width:100%;display:block;}
#mywrapper .gal a { display:block;  padding:22px; outline:none;}
#mywrapper .flex { display:flex;}
#mywrapper .descripe { padding:1em ; text-align:left;}
#mywrapper .info {  background:#FA335F; font-weight:bold; color:#fff; display: flex; align-items: center; font-family:sans serif;}
#mywrapper .col-66 { width:66%;}
#mywrapper .col-33 { width:33%;}
#mywrapper .fa { color:#0c9;}
#mywrapper .weiss { color:#fff;}
#mywrapper .none { display:none;}




@media (max-width: 800px) {
#mywrapper main , #mywrapper header,#mywrapper footer,section{ width:100%;}
#mywrapper .flex , #mywrapper .info , #mywrapper .col-66 , #mywrapper .col-33 , .gal ul , .gal li { width:100%; flex-direction: column; margin:5px 0;border:none;box-sizing:border-box;}
}
</style>
<title></title>


</head>
<body>
<div id="mywrapper">
<header><h1>Willkommen auf meiner Technik Auktion</h1></header>
<main>
<section class="flex">
<article class="descripe col-66 ">


<h3>ARTIKELBESCHREIBUNG</h3>
<p>
Hallo ich biete hier ein <b>HP Pavilion</b>. Das Notebook geht nicht, dass <b>Display ist gebrochen.</b> Da wir keine Ersatzteile für das Gerät haben, verkaufen wir es als defekt! DVD/RW Laufwerk, RAM sind dabei, Netzteil und HDD fehlt. Gewährleistung, Reparatur und Umtausch defekten Geräten leider nicht möglich.
</p>






</article>


<article class="col-33 info">


<div>
<h3 class="fa fa-5x fa-info-circle weiss"><b>Info</b></h3>
<p>Gerät ist defekt und dient der Ersatzteilgewinnung</p>
</div>


</article>
</section>


<table>
<caption>Techniche Daten</caption>
<tr><th>Hersteller</th><td>HP</td></tr>
<tr><th>Modell</th><td>Pavilion</td></tr>
<tr><th>Prozessor</th><td>Celeron 1GHz</td></tr>
<tr><th>Arbeitsspeicher</th><td>4 GB DDR3</td></tr>
<tr><th>Festplatte</th><td>nicht vorhanden</td></tr>
<tr><th>Netzteil</th><td>nicht vorhanden</td></tr>
</table>


<section class="gal">
<ul>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
</ul>


<ul>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
<li><a href="labtop.jpg"><img alt="" src="labtop.jpg"></a></li>
</ul>
</section>


<section class="flex">
<article class="col-33">
<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-33">
<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-33">
<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>Banküberweisung.</p>
<p style="text-align:left;margin-right:10px;"><i style="margin-right:10px;" class="fa fa-paypal"></i>Paypal.</p>
</article>
</section>


<section class="flex">
<article class="col-33">
<h3 class="fa fa-5x fa-question-circle"><b>Frage</b></h3>
<p>Wenn Sie Fragen zum Artikel haben, können Sie mir gerne eine <a style="display:block;" href="#pfadzurnachricht">Nachricht</a> zukommen lassen.</p>
</article>


<article class="col-33">
<h3 class="fa fa-5x fa-eye"><b>Meine Artikel</b></h3>
<p>Hier gibt es noch <a style="display:block;" href="#pfadzuweiterenartikel">weitere Artikel</a> von mir.</p>
</article>


<article class="col-33">
<h3 class="fa fa-5x fa-star"><b>Meine Bewertungen</b></h3>
<p>Hie finden Sie meine aktuellen <a style="display:block;" href="#pfadzudeinenbewertungen">Bewertungen</a> von anderen Käufern.</p>
</article>


</section>


</main>
<footer>
Weitere Vorlagen auf <a href="http://www.gipspferd.de">gipspferd.de</a>
</footer>
</div>
</body>
</html>

Alles anzeigen

Brauchst Dir aber nur den relevanten Teil kopieren.

2fersen · 5. Januar 2018

Der Code den ich da gefunden habe, sollte halt nur die Beschreibung des Artikels sein. Wollte noch einen einen schöneren Teil für die Vorschau vom Bild suchen, am besten eine Bilder Galerie.

@djheke Danke für den Code schaut schon mal ganz gut aus ist vielleicht ne Überlegung wert.

Überschrift Button funktioniert nicht

Jetzt mitmachen!

Teilen

Tags