Linking pictures

HTML & CSS
1

Hi there… a quick question. Howcome the picure dissapears when I wrap an anchor around it… Isn´t this pretty basic stuff?

<div id="images">
    <a href="my.url"><img id="image1" src="/themes/cleanmachine/images/alfasoft_preview.jpg" alt="Alfasoft"/></a>
    <img id="image2" src="2.jpg" />
    <img id="image3" src="3.jpg" />
    <img id="image4" src="4.jpg" />
    <img id="image5" src="5.jpg" />
</div>
<div id="slider">
    <a href="#image1">1</a>
    <a href="#image2">2</a>
    <a href="#image3">3</a>
    <a href="#image4">4</a>
    <a href="#image5">5</a>
</div>

#images {
    width: 500px;
    height: 200px;
    overflow: hidden;
    position: relative;

    margin: 15px;
}
#images img {
    width: 500px;
    height: 200px;

    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 0;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}
#images img:first-child {
    left: 0;
}
#slider  {
    margin-left: 30%;

}
#slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;

}
#slider a:hover {
    background: #C6E4F2;
}
2

I can’t see anything in that CSS that would be causing the problem - can you either give us your whole CSS file, or a link to a live page where it’s happening?

3

Is this CSS3 Image Slider the source for your code?

4

hello boys… problem solved… Yup, it WAS image slider. Found a better one, though…

Now I have a new issue… When “activating” the slider (have my own terminology here ;)) meaning pushing a nav button the page jumps and sort of centers the slider element in the browser. It´s not quite visually pleasing, so how do you prevent that from happening?

Got 64px of whitespace until header, so basically the page jumps more or less down to the beginning of the header

Any ideas?

5

Could we get a site to look at? Or at least full enoug hcode to replicate the issue on our end?