Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertically centred images with slideshow

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #37971
    RobM_01
    Member

    Hi,

    I’m very new to CSS and just wanted see if someone could help me with a final problem I have please with the jCarousel that I have managed to get almost working on my test site.

    Slideshow

    If you follow the link you will see the slideshow working, the problem I have is the image is vertically aligned to the top and I need it to be the middle.

    I think i’ve tried everything but cannot get it to move to the centre at all. I just wondered if you have any ideas what it could be that’s preventing it.

    I have tried the vertical-align: middle; but it does not work

    Many thanks in advance

    Cheers Rob.



    /*
    jCarousel
    */
    #wrap
    {
    color: #2A3D4E;
    }

    .jcarousel-skin-tango .jcarousel-container
    {
    background: #2A3D4E;
    }

    .jcarousel-skin-tango .jcarousel-direction-rtl
    {
    direction: rtl;
    }

    .jcarousel-skin-tango .jcarousel-container-horizontal
    {
    padding: 10px 30px 10px 30px;
    width: 610px;
    }

    .jcarousel-skin-tango .jcarousel-clip
    {
    overflow: hidden;
    }

    .jcarousel-skin-tango .jcarousel-clip-horizontal
    {
    width: 610px;
    height: 610px;
    }

    .jcarousel-skin-tango .jcarousel-item
    {
    width: 610px;
    height: 610px;
    }

    .jcarousel-skin-tango .jcarousel-item-horizontal
    {
    margin-right: 60px;
    margin-left: 0px;
    }

    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal
    {
    margin-right: 0px;
    margin-left: 60px;
    }



    /*
    jCarousel Next Button
    */

    .jcarousel-skin-tango .jcarousel-next-horizontal
    {
    background: url("../SiteImages/Next-Up.png") no-repeat 0px 0px;
    top: 265px;
    width: 32px;
    height: 32px;
    right: -20px;
    position: absolute;
    cursor: pointer;
    }

    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal
    {
    background-image: url("../SiteImages/Next-Up.png");
    }

    .jcarousel-skin-tango .jcarousel-next-horizontal:hover
    {
    background: url("../SiteImages/Next-Down.png");
    }

    .jcarousel-skin-tango .jcarousel-next-horizontal:focus
    {
    background: url("../SiteImages/Next-Up.png");
    }

    .jcarousel-skin-tango .jcarousel-next-horizontal:active
    {
    background: url("../SiteImages/Next-Down.png");
    }



    /*
    jCarousel Prev Button
    */

    .jcarousel-skin-tango .jcarousel-prev-horizontal
    {
    background: url("../SiteImages/Prev-Up.png") no-repeat 0px 0px;
    top: 265px;
    width: 32px;
    height: 32px;
    left: -20px;
    position: absolute;
    cursor: pointer;
    }

    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal
    {
    background-image: url("../SiteImages/Prev-Up.png");
    }

    .jcarousel-skin-tango .jcarousel-prev-horizontal:hover
    {
    background: url("../SiteImages/Prev-Down.png");
    }

    .jcarousel-skin-tango .jcarousel-prev-horizontal:focus
    {
    background: url("../SiteImages/Prev-Up.png");
    }

    .jcarousel-skin-tango .jcarousel-prev-horizontal:active
    {
    background: url("../SiteImages/Prev-Down.png");
    }

    #102489
    RobM_01
    Member

    Any ideas please?

    #102490
    Anonymous
    Inactive

    If your landscape and portrait images are always the same height, then padding the landscape ones will give you the effect you need. Otherwise, you will need to use some javascript to calculate based on maximum height what the padding on each image needs to be.

    #102506
    RobM_01
    Member

    So you’re saying it can’t be done with CSS?

    #102507
    RobM_01
    Member

    the images will always be 600px on the longest side.

    #102509
    Anonymous
    Inactive

    You can do it with CSS if the height will be constant for the portrait *and* landscape images. For example, if portrait images are always 600px tall, and landscape 450px, then the difference in height is 150px and applying a padding-top of 75px to the landscape images will center them.

    #102517
    RobM_01
    Member

    ok i think i get the idea, i could have a different class for landscape images maybe.

    #102519
    RobM_01
    Member

    it sort of works :) but the border stays at the top… the 150px gap then the image. So in other words the top edge of the image has no border.

    but it does move the image down fine.

    #102520
    RobM_01
    Member
    #102500
    RobM_01
    Member

    Thanks for all your help Ben. Nice one.

    I used “margin-top: 100px;” in my CSS file and now it works fine.

    Cheers Rob.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.