Hallo,
ich möchte gerne einen Banner auf meine Website erstellen mit responsive Design, sodass der Banner in width und height immer an den Bildschirm angepasst wird.
Der Quellcode lautet:
[HTML]
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1000px; height: 545px;
overflow: hidden;">
<div>
<img u=image src="./images/banner_1.jpg" />
</div>
<div>
<img u=image src="./images/banner_2.jpg" />
</div>
<div>
<img u=image src="./images/banner_3.jpg" />
</div>
<div>
<img u=image src="./images/banner_4.jpg" />
</div>
</div>
<!--#region Thumbnail Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html -->
<!-- thumbnail navigator container -->
<div u="thumbnavigator" style="position: absolute; bottom: 0px; left: 0px; height:45px; width:1300px;">
<!-- Thumbnail Item Skin Begin -->
<div u="slides">
<div u="prototype" style="position: absolute; width: 600px; height: 45px; top: 0; left: 0;">
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!--#endregion ThumbnailNavigator Skin End -->
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
<style>
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 7px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb01" style="bottom: 130px; left: 80px;">
<!-- bullet navigator item prototype -->
<div u="prototype"></div>
</div>
<!--#endregion Bullet Navigator Skin End -->
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
<style>
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05l.jssora05ldn (mousedown)
.jssora05r.jssora05rdn (mousedown)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url(../img/a17.png) no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="top: 123px; right: 8px;">
</span>
<!-- Trigger -->
<script>
jssor_sliderb_starter('sliderb_container');
</script>
</div>
[/HTML]
Wenn ich von diesen beiden Div’s:
und
Die Höhe und breite ändere wird auch der Banner größer oder kleiner.
Das Problem ist was ich habe, dass ich die größen gerne Auflösungsabhängig beeinflussen möchte wie ich es auch schon mit anderen Elementen gemacht habe:
[HTML]
@media only screen and (max-width: 1199px) {
#header #camera01 {
height: 522px !important;
}
}
@media (max-width: 979px) {
#header .bg-header {
min-height: 155px;
}
#header .bg-header .logo-caption {
margin-bottom: 0;
background-image: url(„./images/logo.png“)
}
#header .header-menu,
#header .logo-caption,
#header .social-list {
float: none;
text-align: center;
}
}
@media (min-width: 768px) and (max-width: 979px) {
#header #camera01 {
height: 620px !important;
}
}
@media only screen and (max-width: 767px) {
#header #camera01 {
height: 520px !important;
}
}
@media only screen and (max-width: 479px) {
#header #camera01 {
height: 420px !important;
}
}
[/HTML]
Wenn ich aber die CSS Eigenschaften in eine CSS Datei hineinschreibe dann funktioniert der Banner nicht mehr.
Also z.B.
in der Style.css steht dann:
#sliderb_container{
position: relative;
top: 0px;
left: 0px;
width: 1000px;
height: 545px;
overflow: hidden;
}