Firstly, could you please have a look at the website I am making for myself glennhall.net.au and you will get an idea of what I am trying to do.
I am no web master guru, don't know anyone locally to help me in person and I have done my best to explain things.
I am using picturefill.js to send appropriate sized images based on media queries. That's why the images in this test website are numbered for you to see what's happening.
I have removed nearly everything from the html to present the issue clearly, so there may be some fat in the ,css and .js side of things.
I have then combined picturefill.js to deliver images to a responsive slide show. The slideshow is using responsiveslides.js.
With the slideshow behaving properly, I then included a transparent border image to frame the slideshow. That's where I have been stuck for the past week.
I wish to have the slideshow position itself inside the inner frame of the transparent image and KEEP that position regardless of any change to window size or orientation of display (tablets etc).
I have come to the point where I am at a blank, where a simple fix to a simple problem now seems like a huge muddled mess. I simply need help.
To help you, here is the complete website, compressed into a zip file.
I have some relevant code for you here below.
Code:
<div class="article-row"><!-- just normal paragraph formatting and position -->
<img src="img/front-cover.png" class="image_overlay"><!-- this is the problem transparent border -->
<div class="rslides" id="slider1"><!-- this is the slideshow -->
<li><!-- each image to slideshow is enclose in a "li" tag -->
<div data-picture data-alt=""><!-- for browsers with no javascript -->
<div data-src="images_slider/1_180.jpg">
</div>
<div data-src="images_slider/1_375.jpg" data-media="(min-width: 400px)">
</div>
<div data-src="images_slider/1_480.jpg" data-media="(min-width: 800px)">
</div>
<div data-src="images_slider/1_768.jpg" data-media="(min-width: 1000px)">
</div>
</div>
</li><!-- following images removed for simplicity here -->
</div>
</article>
You will notice that
Code:
<img src="img/front-cover.png" class="image_overlay">
and
Code:
<div class="rslides" id="slider1">
both are enclosed by
Code:
<div class="article-row">
The position of the transparent border
Code:
<img src="img/front-cover.png" class="image_overlay">
is ABSOLUTE and the slideshow
Code:
<div class="rslides" id="slider1">
is RELATIVE (I think) to the div "article".
The CSS code defining the above html tags I believe to be relevant is here:
Code:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
#slider1 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.image_overlay {
position: absolute;
z-index: 5;
bottom: auto;
left: 0;
width: 100%;
height: auto;
}
I have sort of come up with something that works (but is not included in the demo I provide (I don't want to cloud you with my confusion) almost perfectly by enclosing
Code:
<div class="rslides" id="slider1">
in a div with padding, using percentage values rather than fixed pixel dimensions:
I have changed:
Code:
<div class="article-row"><!-- just normal paragraph formatting and position -->
<img src="img/front-cover.png" class="image_overlay"><!-- this is the problem transparent border -->
<div class="rslides" id="slider1"><!-- this is the slideshow -->
to
Code:
<div class="article-row"><!-- just normal paragraph formatting and position -->
<img src="img/front-cover.png" class="image_overlay"><!-- this is the problem transparent border -->
<div class="innerframe">
<div class="rslides" id="slider1"><!-- this is the slideshow -->
the CSS for "innerframe" class is set at
Code:
.innerframe {
padding: 9% 6% 9% 6%;
)
I will be forever grateful to be offered a working solution, that fits the slideshow inside the transparent border image and keep that position regardless of which display is used.
Bookmarks