Header image jumps

  • Resolved brackenfellgemeente

    (@brackenfellgemeente)


    10 years ago

    I’m very new to web design and I’ve been sitting with this issue for longer than I care to admit, so I’m hoping someone can help.

    When my pages initially load, the header image or div sits to the left and only jumps into the correct position when the page is completely loaded.

    https://www.saf1.co.za

    From my stylesheet:

    .art-shapes
{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: 0;
}
.art-object0
{
    display: block;
    left: 50%;
    margin-left: -900px; \\This bit allows me to position it horizontally
    position: absolute;
    top: 0px;
    width: 900px;
    height: 400px;
    background-image: url('images/logo.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    z-index: 1;
}

    Does anybody have an idea of why this would be and perhaps suggestions on how I can fix it?

    Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Mizagorn

    (@mizagorn)

    Since it looks like you are trying to go with a responsive site, try to stay away from absolute positioning and fixed margins.. things like that. Unless for a specialty element, like a ribbon or something.

    Try the following updates to your classes above. The margin-left and margin-right auto should make your image center itself within its containing div. If this doesn’t completely fix it, let me know after the updates are done and we can go from there!

    .art-shapes
{
   z-index: 0;
}

.art-object0
{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    height: 400px;
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    z-index: 1;
}
    Thread Starter brackenfellgemeente

    (@brackenfellgemeente)

    Perfect, your suggestion did the job!

    Thanks Mizagorn!

    Mizagorn

    (@mizagorn)

    You’re very welcome. Best wishes on your site. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header image jumps’ is closed to new replies.