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 3 years ago.

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


    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.

    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;
    position: absolute;
    height: 28px !important;
    width: 105px !important;
    float: right;


    • This topic was modified 3 years ago by  Robin.
    • This topic was modified 3 years ago by  Robin.

    Jon Weiss

    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 id="button-two">

    Image code



    Hope that helps!

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

The topic ‘Image Alignment’ is closed to new replies.