#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0

    Center rollover images


    I would like to center some rollover images on one line, like on www.jansweijer.nl/home.

    I've managed to figure out codes for rollover images (www.jansweijer.nl) and I for centering images as I want them (http://www.jansweijer.nl/centered-images)

    Somehow, I cannot manage to combine the two. Could you help me do this?

    Thanks in advance!

    Code for rollover images:
    Code:
    <div id="parent"><img class="child1" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/IDE.jpg"/><img class="whitespace" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/white.jpg"/><img class="child2" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/Photography.jpg"/><img class="whitespace" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/white.jpg"/><img class="child3" src="http://www.jansweijer.nl/wp-content/uploads/2012/09/Graphic.jpg"/></div>
    Code:
    /**** Industrial Design ****/
    
    .rolloverIDbutton a
    {
    display: block;
    width: 165px;
    height: 165px;
    background: url('http://www.jansweijer.nl/wp-content/uploads/2012/09/IDbutton.jpg') no-repeat;
    text-decoration: none;
    float: left;
    }
    
    .rolloverIDbutton a:hover
    {
    background-position: -165px 0;
    }
    
    /**** Graphic Design ****/
    
    .rolloverGDbutton a
    {
    display: block;
    width: 165px;
    height: 165px;
    background: url('http://www.jansweijer.nl/wp-content/uploads/2012/09/GDbutton.jpg') no-repeat;
    text-decoration: none;
    float: left;
    }
    
    .rolloverGDbutton a:hover
    {
    background-position: -165px 0;
    }
    
    /**** Photography ****/
    
    .rolloverPHbutton a
    {
    display: block;
    width: 165px;
    height: 165px;
    background: url('http://www.jansweijer.nl/wp-content/uploads/2012/09/PHbutton.jpg') no-repeat;
    text-decoration: none;
    float: left;
    }
    
    .rolloverPHbutton a:hover
    {
    background-position: -165px 0;
    }
    Code for centering images:
    Code:
    <div class="rolloverIDbutton"><a href="http://www.jansweijer.nl/industrialdesign"> </a></div>
    <div class="rolloverGDbutton"><a href="http://www.jansweijer.nl/graphicdesign/"> </a></div>
    <div class="rolloverPHbutton"><a href="http://www.jansweijer.nl/photography/"> </a></div>
    Code:
    .whitespace
    {  
        width: 35px;  
        height: 165px;  
        border: none;  
        display: inline-block;  
        background: url('http://www.jansweijer.nl/wp-content/uploads/2012/09/white.jpg') no-repeat;
        vertical-align: middle;  
    }  
    
    #parent {  
        width: 100%;  
        border: solid 1px;  
        text-align: center;  
        font-size: 20px;  
        letter-spacing: 35px;  
        white-space: nowrap;  
        line-height: 12px;  
        overflow: hidden;  
    }  
      
    .child1 {  
        width: 165px;  
        height: 165px;  
        border: none;  
        display: inline-block;  
        vertical-align: middle;  
    }  
    
    .child2 {  
        width: 165px;  
        height: 165px;  
        border: none;  
        display: inline-block;  
        vertical-align: middle;  
    }  
    
    .child3 {  
        width: 165px;  
        height: 165px;  
        border: none;  
        display: inline-block;  
        vertical-align: middle;  
    }
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    250
    Rep Power
    86
    Hi there prikgek,

    and a warm welcome to these forums.

    Check out the attachment to see a possible solution.

    coothead
    Attached Files
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0
    Awesome! I've been trying to figure this out for the past week..

    Thanks a lot, I appreciate it!
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    250
    Rep Power
    86
    No problem, you're very welcome.

    coothead

IMN logo majestic logo threadwatch logo seochat tools logo