Danke für die Erklärung und den Feinschliff, doch jetzt funktioniert da wieder was nicht die Kästchen unten sind jetzt nicht mehr gleich groß.. und könntest du vielleicht noch schnell den Balken worin steht "Artikelname" in die Mitte versetzen?
und könnte man die Überschrift vor der Tabelle mit dem Titel "Details" diese Überschrift vielleicht in den Rand integrieren? so schaut das ja nicht besonders schön aus.
Freue mich auf deine Anwort! 
Bist echt der beste ..
Top dank dir! Doch irgendwie funktioniert die Galerie jetzt nicht mehr wirklich, ich denke da muss man auch noch irgendwelche Prozent eingaben tätigen. Außerdem verfärbt sich irgendwie die Galerie mit den Kästchen unten .. Kannst du mir des schnell auch noch beheben?
Zitat
Doch was glaube ich schöner aussehen würde, wäre wenn die Ecken leicht abgerundet wären. Sollte mit diesem Befehl funktionieren:
#mywrapper table{
border-radius: 20px Black;
}Doch damit funktioniert es leider nicht .. kannst du mir damit vielleicht noch schnell helfen..
Außerdem denke ich wäre ein Rand um das ganze Dokument schön, doch das bekomme ich auch nicht hin..
#mywrappper body,html {
margin:0;
padding:0;
height: 100%;}
#mywrapper body {
border-left: 5x solid black;
border-right: 5x solid black;
border-top: 5x solid black;
border-bottom: 5x solid black;
}Uuuund wie kann ich die unteren Kästen umfärben ohne den großen oberen auch mit zu verfärben?
djheke und basti1012 Mit Prozent bekomme ich es irgendwie nicht wirklich hin.. Könntest du mir da schnell zur Hand gehen? 
Könnte mir einer von euch helfen vielleicht bei den "Details" einen dicken Rand um die Tabelle setzen?
table, caption{
border:30px double #aaa;
}Damit funktioniert es leider nicht.. Freue mich auf eure Antworten!
basti1012 Vielen lieben Dank! Wärst du vielleicht noch so gut die Galerie innerhalb der braunen Box zu zentrieren und vielleicht den Rahmen um die Galerie zu entfernen?
Sempervivum Trotzdem vielen Dank! schaue mir auch noch deine Galerie an!
Liebe Grüße!
Ich möchte das die Galere hier rechts neben der Artikelbeschreibung steht:
https://jsfiddle.net/2fersen/68yo8pzc/
MrMurphy Ja ich hab mir den Code für die Galerie stibitzt
Freue mich auf eure Antworten!
Hey Leute,
ich habe hier diesen fertigen Script für eine Galerie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Galerie 10 ohne Java Script mit transition:left</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">a
* {
margin:0;
padding:0;
list-style:none;
border:none;
outline:none;
}
html,body {
height:10000px;
width:100%;
}
#gal {
margin:30px;
width:4000px;
overflow:hidden;
border:3px double #aaa;
}
#gal #ausgabe {
width:2000px;
float:left;
position:relative;left:0;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
}
#gal a {
position:relative;
float:left;
}
#gal a + a + a + a + a img {
margin-right: 0;
width:80px;
height:59px;
}
#gal img {
width:400px;
float:left;
}
#gal a img {
width:79px;
margin: 0 1px 1px 0;
}
#gal a:hover:before , #gal a:focus:before {
content:"";
position:absolute;
top:0;left:0;right:1px;bottom:1px;
background:rgba(255,255,255,.3);
}
}
#gal a:hover ~ #ausgabe , #gal a:focus ~ #ausgabe {
left:0;
}
#gal a + a:hover ~ #ausgabe , #gal a + a:focus ~ #ausgabe {
left:-400px;
}
#gal a + a + a:hover ~ #ausgabe , #gal a + a + a:focus ~ #ausgabe {
position:relative;
left:-800px;
}
#gal a + a + a + a:hover ~ #ausgabe , #gal a + a + a + a:focus ~ #ausgabe {
position:relative;
left:-1200px;
}
#gal a + a + a + a + a:hover ~ #ausgabe , #gal a + a + a + a + a:focus ~ #ausgabe {
position:relative;
left:-1600px;
}
</style>
</head>
<body>
<h1>Galerie 10 ohne Java Script mit transition:left</h1>
<div id="gal">
<a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a2"><img src="./Galerie 10 ohne Java Script mit transition_left_files/loewe.jpg" alt="bild1"> </a>
<a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a2"><img src="./Galerie 10 ohne Java Script mit transition_left_files/zebra.jpg" alt="bild2"> </a>
<a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a3"><img src="./Galerie 10 ohne Java Script mit transition_left_files/ente.jpg" alt="bild3"> </a>
<a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a4"><img src="./Galerie 10 ohne Java Script mit transition_left_files/eisbaer.jpg" alt="bild4"> </a>
<a tabindex="0" href="http://www.gipspferd.de/CSS-Experimente/Galerie/galerie10/index.htm#a5"><img src="./Galerie 10 ohne Java Script mit transition_left_files/brunnen1.jpg" alt="bild5"> </a>
<div id="ausgabe">
<img src="./Galerie 10 ohne Java Script mit transition_left_files/loewe.jpg" alt="bild1">
<img src="./Galerie 10 ohne Java Script mit transition_left_files/zebra.jpg" alt="bild2">
<img src="./Galerie 10 ohne Java Script mit transition_left_files/ente.jpg" alt="bild3">
<img src="./Galerie 10 ohne Java Script mit transition_left_files/eisbaer.jpg" alt="bild4">
<img src="./Galerie 10 ohne Java Script mit transition_left_files/brunnen1.jpg" alt="bild5">
</div>
</div>
</body></html>Wie kann ich diese an eine andere Stelle positionieren?
Freue mich auf eure Antworten!
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.
Hey Leute,
ich möchte eine Beschreibung für mein Ebay-Shop zusammenbasteln. Jetzt bin ich auf diesen Script gestoßen:
<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;
">
</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;
">
</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;
">
</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: "
Open Sans"
;
">Titel<br></h2><p>Text<br></p><h1 style="color: rgb(51, 51, 51);
font-weight: 300;
font-size: 28px;
font-family: "
Open Sans"
;
">Text<br></p><div class="clearer"></div><br><h2 style="color: rgb(51, 51, 51);
font-weight: 300;
font-size: 28px;
font-family: "
Open Sans"
;
">Überschrift<br></h2>Text<br></div></div></div></div></div></div>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