SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Linking pictures

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

    Code HTML4Strict:
    <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>

    Code CSS:
    #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. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Is this CSS3 Image Slider the source for your code?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    Could we get a site to look at? Or at least full enoug hcode to replicate the issue on our end?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •