Skip navigation
hcblue
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

359 Views   8 Replies   Latest reply: hcblue, Feb 16, 2013 10:05 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Feb 16, 2013 6:46 PM   in reply to hcblue
    Report

    A link to the page would be very helpful

     
    |
    Mark as:
  • hcblue
    Currently Being Moderated
    2. hcblue,
    Feb 16, 2013 6:55 PM   in reply to Ben Pleysier
    Report

    But I'm not ready to update my site yet because of this problem, that's why I asked if I should send an attachment of the code in textedit.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    Feb 16, 2013 7:22 PM   in reply to hcblue
    Report

    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:
  • hcblue
    Currently Being Moderated
    4. hcblue,
    Feb 16, 2013 7:54 PM   in reply to Ben Pleysier
    Report

    Ok did that, but...dumb question...was I suppose to delete the index.html file from filezilla?

     

    Here's the link to my site: http://turtlecell.com

     

    I hope filezilla shows the updated site soon. Why does it take a while for them to update stuff?

     

    Thanks.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    5. Ben Pleysier,
    Feb 16, 2013 8:31 PM   in reply to hcblue
    Report

    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:
  • hcblue
    Currently Being Moderated
    6. hcblue,
    Feb 16, 2013 9:35 PM   in reply to Ben Pleysier
    Report

    Thank you so much!! That worked for the image, but now the border is missing on the right side of the newsletter section.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    7. Ben Pleysier,
    Feb 16, 2013 9:56 PM   in reply to hcblue
    Report

    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:
  • hcblue
    Currently Being Moderated
    8. hcblue,
    Feb 16, 2013 10:05 PM   in reply to Ben Pleysier
    Report

    You're awesome. Thank you again. Some of this stuff (especially the answer to this one) are so simple, but I find myself so overwhelmed sometimes trying to figure something out, that I'm not thinking of the "simple". Now onto trying to figure out how to link the "submit" button to the newsletter email list!

     

    Thanks again for all of your help.

     
    |
    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