Grow your CSS skills. Land your dream job.

Image in div, down simultaneously

  • # September 29, 2012 at 3:05 am

    I have this: http://kosler.vacau.com/Blanq%20Template/

    Why when you give “margin-top: px;” in that picture “.logo” I go down, the wallpaper automatically and “# header” ?

    I tried to insert images using “

    ” but experiencing the same issue

    How can I solve this problem?

    # September 29, 2012 at 3:20 am

    im sorry I cant see all of your code. have you tried to padding-top: 10px; ??????????if so and that does not work I would need to see your css so I can take a look at whats going on. maybe some type of container holding you back. if the padding-top doesnt help post your css code for me to look at please

    # September 29, 2012 at 3:42 am

    Adding

    padding-top:10px;

    to your #logo will fix it.

    # September 29, 2012 at 4:10 am

    Yes, thank you

    It seems that “padding-top: 20px;” + “overflow: hidden;” not to repeat the image worked.

    However, where is the problem with “margin-top: px;” and how to solve?

    HTML + CSS: http://jsfiddle.net/xMfbq/

    # September 29, 2012 at 4:32 am

    i dont understand i thought we solved the problem with the padding? are you saying why wont the margin work? this could have to do with many things,

    some browsers ignore margins. or look diff in each browser.
    some times depending on other divs could make a diff etc. we would need to see all your code to understand the current situation. but like i said i thought the padding worked?

    # September 29, 2012 at 9:02 am

    As I recall, because the header is the first element and the logo is the first element inside that the margin has nothing to push against inside the header and so it forces the margin to be applied to the header against the body.

    Does that make sense…am I striking a chord somewhere…have I expressed it baldy?

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".