Hallo,
ich erstelle hier gerade ein neues Template.
Die vorgesehene Slideshow wird Bilder in der Größe 860x430 enthalten. Wenn der Browser größer als 860 Pixel (bis max. 1600px) ist entstehen link und rechts neben der Slideshow weiße Ränder die jeweils mit einem IMG gefüllt werden sollen.
Code
<div class="row wrapper-slideshow"> <div class="slideshow"><img src="http://placehold.it/860x430"> <div class="slideshow-left"></div> <div class="slideshow-right"></div> </div> </div>Code
.wrapper-slideshow{
-webkit-box-shadow: 0px 5px 5px 0px rgba(120,120,120,0.75);
-moz-box-shadow: 0px 5px 5px 0px rgba(120,120,120,0.75);
box-shadow: 0px 5px 5px 0px rgba(120,120,120,0.75);
}
.slideshow{
margin: 0 auto;
max-width: 860px;
position: relative;
img {
max-width: 100%;
}
}
.slideshow-left, .slideshow-right{
display: none;
}
.slideshow-left{
background-image: url(templates/templateburgermetallbaugmbh/images/slidelinks.jpg);
}
.slideshow-right{
background-image: url(templates/templateburgermetallbaugmbh/images/sliderechts.jpg);
}
@media (min-width: 861px) {
.slideshow-left, .slideshow-right{
display: none;
width: 370px;
height: 430px;
position: absolute;
overflow: hidden;
}
.slideshow-left{
top: 0px;
left: -370px;
}
.slideshow-right{
top: 0px;
right: -370px;
}
}Wenn ich nun im CSS Zeile 31 die Eigenschaft display auf block setze, werden die IMG über den Rand rechts hinaus angezeigt.
Kann mir jemand helfen und mir einen Tipp geben?
teccrow
