Skip navigation
hcblue
Currently Being Moderated

Image not postioned correctly

Feb 16, 2013 4:55 PM

I have 2 images inserted on either side of this portion of my site, but the image on the right side is showing up too low. I've inserted an image of this, because I'm not ready to upload the changes to my site yet. If you need to see the code, do I just copy it into TextEdit and attach it?

 

I've validated this file through validator.w3.org but it comes up with no errors.

 

Thank you for any assisstance, you've all been a huge help to this newbie!

Screen Shot 2013-02-16 at 7.45.06 PM.png

 
Replies
  • Currently Being Moderated
    Feb 16, 2013 6:46 PM   in reply to hcblue

    A link to the page would be very helpful

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2013 7:22 PM   in reply to hcblue

    Rename the file junk.html or similar and upload it. It is better to see the page in context rather than view a bit of code.

     

    After the question has been answered, you can remove junk.html

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2013 8:31 PM   in reply to hcblue

    What you have got is a container with 3 columns. Problem is that you have not assigned a centre column.

     

    1. On or about line 430 add

    <div id="main3Center">

    2. On or about line 452 add

    </div>

     

    Now we need to adjust the CSS

     

    Have a look at the following and adjust yours accordingly

    #main3 {

        width: 1100px;

        /*height: 640px;*/

        float: left;

        background-color: #556c70;

    }

    #main3Center {

        width: 500px;

        float: left;

    }

    #main3left {

        width: 300px;

        /*height: 640px;*/

        float: left;

        background-color: #556c70;

    }

    .main3leftimage img {

        /*display: inline;*/

        /*float: left;*/

        padding-top: 120px;

       /*padding-left: 50px;*/

       display: block;

        margin: auto;

    }

    #main3right {

        width: 300px;

       /*height: 640px;*/

        /*float: left;*/

        float: right;

        background-color: #556c70;

    }

    .main3rightimage img {

        /*display: inline;*/

        /*float: right;*/

        padding-top: 120px;

       /*padding-right: 50px;*/

        display: block;

        margin: auto;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 16, 2013 9:56 PM   in reply to hcblue

    Change the width on line 192 to compensate for the border as in

    #main3middle {

        width: 498px;

        height: 260px;

        float: left;

        background-color: #1176BC;

        font-family: Georgia, "Times New Roman", Times, serif;

        font-size: 24px;

        color: #FFF;

        text-align: center;

        vertical-align: middle;

        border: thin solid #000;

    }

     
    |
    Mark as:

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