Image Alignment

Community Forums Forums Design Tips and Tricks Image Alignment

This topic is: resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Jon Weiss 1 year, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #370

    Robin
    Participant
    Post count: 38

    I have been trying to align two images on top of each other for the Save and Print Recipe Buttons.

    It aligns differently on different screen sizes.

    http://afarmgirlsdabbles.com/screenshot.png

    http://www.afarmgirlsdabbles.com/2012/11/16/turtle-yum-yum-bars-recipe/

    Is there any way to get it to align on all screen sizes.

    Here is my CSS code
    #zlrecipe-container .zlrecipe-print-link a.butn-link {
    background: url(images/print-aqua.png) no-repeat scroll transparent;
    cursor: pointer;
    padding: 0 0 0 20px;
    margin-top: 40px;
    height: 28px;
    width: 105px;
    text-indent: -9999px;
    float: right;
    }

    .zl-recipe-link a.butn-link {
    background-image: url(images/save-aqua.png) !important;
    background-repeat:no-repeat;
    position: absolute;
    height: 28px !important;
    width: 105px !important;
    float: right;
    }

    Thanks

    • This topic was modified 1 year, 5 months ago by  Robin.
    • This topic was modified 1 year, 5 months ago by  Robin.
    #374

    Jon Weiss
    Moderator
    Post count: 14

    I notice you have the images in two separate divs.. If possible, I’d suggest creating a main div, and then having both of them within it. for example:


    <div id="buttons">

    <div id="button-one">

    Image code

    </div>

    <div id="button-two">

    Image code

    </div>

    </div>


    Hope that helps!


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.