WordPress.org

Forums

div tags not moing (8 posts)

  1. eolproductions
    Member
    Posted 1 year ago #

    Hi,

    I have this wesbite http://atp.leontomlinson.com/prebeta/# which is in very early beta. The picture of the dog at the top keeps moving based on screen resolution. How do I keep it in the same place?

    I have this as my HTML:

    '<div id="dogimg"></div>'

    and this for the CSS:

    #dogimg {
    content: url(http://atp.leontomlinson.com/prebeta/wp-content/uploads/2013/09/dog1.png);
    position: absolute;
    left: 840px;
    top: 44px;
    height: 437px;
    }

    Any ideas how to keep it in the right position or any other ways to get it there?

  2. Kacomp
    Member
    Posted 1 year ago #

    Hi there,

    I have had a look at your site but the dog image isn't loading in firefox but chrome its ok. Your image is positioned absolutely so its position wont change at the moment. You need to set the images size as percentage so it changes with screen size.

    Karen.

  3. eolproductions
    Member
    Posted 1 year ago #

    Ok thanks. And I also noticed that. All the Div tags that I have created wont show up in Firefox or IE but is fine in chrome.

  4. Kacomp
    Member
    Posted 1 year ago #

    Hi again,
    The CSS property content needs to be used with pseudo elements before or after so change your #dogimg to #dogimg:before
    I see it your dog image in firefox if I do that.

    Good luck.

    Karen

  5. eolproductions
    Member
    Posted 1 year ago #

    Thanks so much. It has worked. The only problem I have now is that the blue paw prints at the bottom of the page need to be aligned at equal widths apart from the text. I have used this code for the paws

    div.palogo:before {
    content: url(http://atp.leontomlinson.com/prebeta/wp-content/uploads/2013/09/petsitters.jpg);
    position: absolute;
    left: 84%;
    top: 20px;
    }

    It changed and sometimes overlaps onto the text on different screens.

  6. Kacomp
    Member
    Posted 1 year ago #

    The div that contains the paw prints and the Call Obligation Free text needs an id and width. Once you have added that I can have another look for you. Use percentage or em for the width.

    Karen.

  7. eolproductions
    Member
    Posted 1 year ago #

    I have. I am using this CSS:

    div.pawimg-left {
    content: url(http://atp.leontomlinson.com/prebeta/wp-content/uploads/2013/09/paw-bgdouble.png);
    position: absolute;
    top: 75%;
    }

    But still moves around and overlaps the text on different screen resolutions.

  8. Kacomp
    Member
    Posted 1 year ago #

    Your image of the double paw has a fixed width, you need to give it width that will change as a percentage or em value.

Topic Closed

This topic has been closed to new replies.

About this Topic