Guten Tag !
Ich habe in meinem Projekt zur Zeit ein kleines Problem, was ich nicht gelöst kriege. Es geht um den folgenden Code:
<div id="homepage-slider-wrap" class="clr flexslider-container">
<div class="imageBox">
<div class="imageBoximage4"></div>
<div class="figure tr-slideIn">
<div class="text">
<div class="textinner"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
</div>
<div class="imageBox">
<div class="imageBoximage5"></div>
<div class="figure tr-slideIn">
<div class="text">
<div class="textinner"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
</div>
</div>Das CSS dazu:
.imageBoximage4 {
position: relative;
width: 1280px;
height: 557px;
margin: 0;
-webkit-animation: animation linear 20s; /* Chrome, Safari, Opera */
animation: animation linear 20s;
background-image: url(http://wallalay.com/wp-content/uploads/2014/08/Backgrounds-44.jpg);
}
.imageBoximage5 {
position: relative;
width: 1280px;
height: 557px;
margin: 0;
-webkit-animation: animation linear 20s; /* Chrome, Safari, Opera */
animation: animation linear 20s;
background-image: url(http://www.realrock993.com/wp-content/uploads/2014/03/3d-black-cubes-backgrounds-wallpapers1.jpg);
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animation {
from {right:0px;}
to {right:250px;}
}
/* Standard syntax */
@keyframes animation {
from {right: 0px;}
to {right: 250px;}
}
.text {
float:left;
width: 313px;
height: 557px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
.textinner {
transform:translateX(-75px);
}
.imageBox {
position: relative;
overflow: hidden;
width: 313px;
height: 557px;
float: left;
float:left;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
.figure {
position: absolute;
bottom: 0; left: 0;
padding: 5px;
margin:5px;
background: white;
}
.imageBox .tr-slideIn {
left: -330px;
width: 313px;
height: 557px;
margin: 0;
padding-top: 85px;
opacity: 0.7;
background:grey;
color: white;
-webkit-transition: all 0.5s;
}
.imageBox:hover .tr-slideIn {
left: 0;
}Allgemein geht es um zwei animierte DIV Links <imageBox> die per CSS mit einem Hintergrund und Animationen versehen sind. Diese befinden sich in einer anderen DIV <homepage-slider-wrap>.
Das Ziel:
Im Moment, wenn man die Größe der Seite verändert (Mit der Maus die Größe des Fensters), verdrängen sich die Elemente <imageBox> wenn der Platz nicht mehr ausreicht und die Formatierung der Seite wird unbrauchbar. Was erreicht werden soll, ist dass das DIV <homepage-slider-wrap> sich bei verkleinern des Fensters samt Inhalt verkleinert und dabei das Seitenverhältnis beibehalten wird.
Hat jemand vielleicht einen Tipp wie ich das mit CSS schaffen kann ? Falls nicht, kann mir jemand mit Java weiterhelfen ?
Vielen Dank !!!
S.
