Skip navigation
Jeffrey54 Lane
Jeffrey54 Lane
Currently Being Moderated

Spaces under images

Sep 15, 2012 1:25 PM

Hi, I have a column of two rotator and two images down the right side of the page (in the link below), the first rotator is just where I want it to be but as I go down the gaps get to wide, but I only want about 10px between them, I've tried doing -10px and -20px but this don't seem to make any difference, can some one help me please. Thanks Jeff

 

http://www.http://thecarpetandflooringconsultant.co.uk/residential-dom estic_carpet_and_flooring.php

609 Views   6 Replies   Latest reply: Jeffrey54 Lane, Sep 20, 2012 12:25 PM
 
Replies
  • Ken Binney
    Currently Being Moderated
    1. Ken Binney,
    Sep 15, 2012 2:09 PM   in reply to Jeffrey54 Lane
    Report

    Not sure where images are getting their top margins from but increasing their negative top margins seems to work

     

      

    #rotator-two {
        float: right;

        height: auto;

        margin-right: 7px;

        margin-top: -80px;

        width: 370px;

    }

     

    #third_level_image {
        float: right;

        height: auto;

        margin-right: 60px;

        margin-top: -140px;

        width: 210px;

    }

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Sep 15, 2012 3:32 PM   in reply to Jeffrey54 Lane
    Report

    Quick design tip:  Open your CSS file and at the top add this:

     

    * {border: 1px dotted blue}

     

    This will put borders around every element in your page so you can see why your images are aligned this way.   That's how floats work.

     

    Try removing float:right from your images and use margin-left (adjust values to suit):

     

    #rotator-one {

        margin-left:600px;

        margin-top: 0px;

        margin-right: 7px;

        height: auto;

        width:370px;

    }

    #rotator-two {

        margin-left: 600px;

        margin-top: 10px;

        margin-right: 7px;

        height: auto;

        width:370px;

    }

    #third_level_image {

        margin-left: 700px;

        margin-top: 10px;

        margin-right: 60px;

        height: auto;

        width:210px;

    }

    #fouth_level_image {

        margin-left: 740px;

        margin-top: 15px;

        margin-right: 110px;

        height: auto;

        width:120px;

    }

     

    Don't forget to remove the * borders.

     

     

    Nancy O.

     
    |
    Mark as:
  • Jeffrey54 Lane
    Currently Being Moderated
    3. Jeffrey54 Lane,
    Sep 16, 2012 4:29 AM   in reply to Nancy O.
    Report

    Hi Nancy I’ve done what you said, and I can see where you are going with it, but when the first rotator go’s to the top the photos disappear from view, so what I have done is, I’ve tried applying the same CSS method to the main image in the top left hand corner, but this has made the image and the two rotators drop further down the page, I think I’m almost there with this, hope you can help Jeff

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Sep 16, 2012 8:48 AM   in reply to Jeffrey54 Lane
    Report

    I’ve done what you said, and I can see where you are going with it, but when the first rotator go’s to the top the photos disappear from view,

    Can you show us that?

     

     

    so what I have done is, I’ve tried applying the same CSS method to the main image in the top left hand corner,

    Wasn't that image originally up higher on the page and floated left?

     

    Put it back where it was.  Incidentally, floats must come first in the markup.

    http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • Jeffrey54 Lane
    Currently Being Moderated
    5. Jeffrey54 Lane,
    Sep 16, 2012 11:22 AM   in reply to Nancy O.
    Report

    Hi Nancy I’ve Started work on this now but it’s getting late and I’m going away for three days tomorrow, I will get back to it then. Thanks for your help Jeff

     
    |
    Mark as:
  • Jeffrey54 Lane
    Currently Being Moderated
    6. Jeffrey54 Lane,
    Sep 20, 2012 12:25 PM   in reply to Nancy O.
    Report

    Hi Nancy, I’m back on it now, I’ve got the main image and main text to fit roughly where I want it, but everything below it seems to be held out of position by the div next to it, Jeff

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points