Search code examples
htmlcssposition

Div's keep moving position?

My header should look like this.

enter image description here

but every hour or so it reverts to this.

enter image description here

I have it set up so that there are two divs behind the main image so that they can be repeated no matter how wide the user's browser is.

the problem is that the images change position (they move up or down) whether I'm working on the layout or not. I don't know what is causing it to change every so often, but it's driving me nuts!!

The website is www.rheanna.net (sorry i can't post more than 2 links right now) in case you need to check out anything that I forgot to provide here.

The applicable header HTML looks like this:

<div id="top1"></div><div id="top2"></div>
<div class="container">
<div id="logo-area">

My CSS looks like this:

#top1 {
    width:49%;
    position:absolute;
    top:91px;
    left:0;
    height:127px;
    background:url("http://rheanna.net/images/topLeft_bg.gif") repeat-x;
    z-index:-10;
    }
#top2 {
    width: 49%;
    position: absolute;
    top: 91px;
    right: 0;
    height: 141px;
    background: url("http://rheanna.net/images/topRight_bg.gif") repeat-x;
    z-index: -10;
}
.container { text-align: left; margin: 0 auto; width: 960px; position: relative; }
.container #logo-area { text-align: center; margin-bottom: 57px; }

If anybody has any ideas of why it would be changing position on me, I would greatly appreciate your input!! Thank you!

Solution

  • When you are setting elements have the position property of absolute and you try to align the with other elements you should wrap them in another element such as a div or section tag and give it the position over relative.

    Your current code seems a little messy therefore I've recoded your desired design element. Your Logo area will need to be moved outside of it's current container and left sitting on it's own after your header.

    CSS

    .LogoArea {
    position: relative;
    clear: both;
    display: block;
    width: 100%;
    min-width: 960px;
    margin-top: -60px;
    /* margin-bottom: 60px; */
    box-shadow: 0 0 7px rgba(0,0,0,0.05);
}
.LogoArea>.LeftStripe,
.LogoArea>.RightStripe {
    width: 49%!important;
    position: absolute;
    z-index: -10;
}
.LogoArea>.LeftStripe {
    background: url("/images/topLeft_bg.gif") repeat-x;
    background-position: 0 -72px;
    height: 35px!important;
    top: 72px;
}
.LogoArea>.RightStripe {
    background: url("/images/topRight_bg.gif") repeat-x;
    right: 0;
    height: 21px;
    background-position: 0 -120px;
    top: 120px;
}
.LogoArea>.Logo {
    background: url("/wp-content/uploads/2016/05/logo.jpg");
    width: 781px;
    height: 245px;
    margin: 0 auto;
}
.LogoArea>.DonateLink {
    width: 21px;
    overflow: hidden;
    left: 50%;
    margin-left: calc(-364px/2);
    position: absolute;
    top: 74px;
    opacity: 0;
    height: 27px;
}

    HTML

    <div class="LogoArea">
    <div class="LeftStripe"></div>
    <div class="RightStripe"></div>
    <div class="Logo"></div>
    <a href="YOUR DONATION LINK HERE" title="Donate using PayPal" class="DonateLink">Donate</a>
</div>

    The HTML part should be placed in your header file at the bottom. Before <!-- end #main-header --> as your logo makes up part of your header.

    I hope this improved answer makes more sense and overall works better.

    I have also provided additional mobile support

    MOBILE CSS

    @media (max-width: 960px) {
    .LogoArea {min-width:initial;}
    .LogoArea>.RightStripe,
    .LogoArea>.LeftStripe {display:none;}
    .LogoArea>.Logo {width: 100%;background-size:cover;height: 215px;}
    .container, .page #left-area, .single-post #left-area {width:100%;margin:0;}
    .LogoArea>.DonateLink {display: none;}
}
@media (max-width: 701px) {
    .LogoArea>.Logo {height: 190px}
}
@media (max-width: 625px) {
    .LogoArea>.Logo {height: 170px}
}

@media (max-width: 550px) {
    .LogoArea>.Logo {height: 145px}
}

@media (max-width: 459px) {
    .LogoArea>.Logo {height: 120px}
}

@media (max-width: 439px) {
    .LogoArea>.Logo {BACKGROUND-IMAGE: NONE;height: auto;}
    .LogoArea>.Logo:before {
   CONTENT:"RHEANNA DOT NET";
   font-size: 14px;
   DISPLAY:BLOCK;
   text-align:center;
   padding: 1em;
   font-family: cursive, sans-serif;
   color: #8BC34A;
   }.LogoArea>.Logo:after {
   CONTENT:"A collection of life, love and memories.";
   font-size: .35em;
   DISPLAY:BLOCK;
   text-align:center;
   padding: 1em;
   padding-top:0;
   color: #607D8B;
   margin-top: -10px;
   margin-bottom: 0px;
   padding-bottom: 2em;
   }
}