Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    MrC
    MrC is offline
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS/jQuery Slider

    Hi i'm trying to code a slider within the centre box and it layering over the top of the image.

    This is coded within a HTML boilerplate, is this affecting what i am doing?

    I'm wanting an effect like what i have on my current site http://www.markcoffeyphotography.co.uk but with a better slider

    I'm redoing it with a boilerplate to learn best practice and so on. Its sitting over my divs like this http://www.markcoffeyphotography.co.uk/screenShot.png at the moment

    My HTML mark up is here:

    <div class="main_content">

    <div class="header">

    </div>


    <div class="images">




    <div id="slideshow">
    <img src="img/1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="img/2.jpg" alt="Slideshow Image 2" />
    <img src="img/3.jpg" alt="Slideshow Image 3" />
    <img src="img/4.jpg" alt="Slideshow Image 4" />
    </div>


    <div class="spacer">
    </div>


    <div class="menu">
    </div>


    <div class="footer">
    </div>



    </div>


    </div>


    and the CSS is here


    /* ==========================================================================
    Styles for image fade wrapper
    ========================================================================== */


    <!-- change size of div to image size -->


    #slideshow {
    width: 1040px;
    height:650px;

    }

    #slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    }

    #slideshow IMG.active {
    z-index:10;
    opacity:1.0;
    }

    #slideshow IMG.last-active {
    z-index:9;
    }


    /* ==========================================================================
    My Styles ========================================================================== */


    div.main_content {
    float:left;
    align:left;
    width:1040px;
    height:auto;
    color: white;
    margin:0px;
    padding:0px;
    }

    div.header {
    float:left;
    align:left;
    width:1040px;
    height:120px;
    color: white;
    margin:0px;
    padding:0px;
    }

    div.spacer {
    align:left;
    float:left;
    width:1040px;
    height:120px;
    color: white;
    margin:0px;
    padding:0px;
    }

    div.images {
    float:left;
    align:left;
    width:1040px;
    height:650px;
    color: white;
    margin:0px;
    padding:0px;
    }

    div.menu {
    float:left;
    align:left;
    width:300px;
    height:460px;
    color: white;
    margin-left:70px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding:0px;
    }

    div.footer {
    float:left;
    align:left;
    width:970px;
    height:70px;
    color: white;
    margin-left:70px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding:0px;
    }

    I'd really appreciate any help, i'm pretty new to coding.
    Last edited by MrC; 03-11-2013 at 07:42 PM.


 

Tags for this Thread

Posting Permissions

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