Images In CSS Columns

Discussion in 'Web Design and Development' started by oli2140, Jul 21, 2009.

  1. oli2140 macrumors 6502

    Jan 13, 2008
    Hi all,

    I'm trying to create a simple CSS website in a text editor for the first time and have come to a problem!

    I am wanting to create a layout like the following:


    In the image above, the three images act as hyperlinks to other pages, they are also required to act as rollover images where the image is changed as a cursor is placed over the image.

    The red and blue borders are 'div's i've added so far.

    So far, I've been able to add three divs to create what I want but with static images only (using the three columns method shown here:

    However, the difficulty with this is that I cannot create a CSS rollover image as the divs are much larger than the respective images. I've already tried adding another div (right floating in the left column etc.) the same size as the images and this has worked on the outside columns only.

    Any ideas on how to get the middle image to work without using javascript?

    Thanks for trying to read all of that ^ :p
  2. salvatore macrumors member

    Aug 26, 2007
    Although not a strict parallel based on your requirements, the CSS Zen Garden examples should give you some inspiration.
  3. oli2140 thread starter macrumors 6502

    Jan 13, 2008
    Yep I know how to do that using the '#id:hover {' command.

    The difficulty is that I can't make the div the same size as the image, meaning that the image changes when the cursor is close, but not over the central image.

    The reason for this problem is that CSS doesn't have a 'float:center' option.

    Agreed, I visited that site earlier today and was very impressed!
  4. memco macrumors 6502

    May 1, 2008
    If you post the code I might be able to help better. because the images are hyperlinks you can do this:

    div#id1 a {
     background : url('image/for/leftmost-colum.jpg');
     width : width-of-image;
     height : height-of-image;
     text-indent : -9999em;
    div#id1 a:hover {
     background : url('rollover-mage/for/leftmost-colum.jpg');
    Then, your code would look like this:

    <div id="id1">
     <a href="link1">Link</a>
    Read these two articles for an explanation of how you can optimize this technique:

Share This Page