CODEWITHSUNDEEP
css
tirenweb
tirenweb

Reputation: 31739

Elements are moving while the page is loading

I have this site. When I load it, there is a time while the Facebook like button is loading, but just right before it is loaded, the phone numbers go down for a while, and then go up to the right position, why??

NOTE: maybe if you have a very fast connection you will not notice this.

This is the code: 

  header {
    border-top: 6px solid #9F9F9F;
    margin: 0 auto;
    background-color: $amarillo;
    width: 960px;
    padding: 19px 34px;
    @include box-sizing (border-box);
    .logo-h1 {
      float: left;
      .logo {
        width: 324px;
        height: 57px;
        a {
          width: 324px;
          height: 57px;
          display: block;
        }
      }
      h1 {
        font-size: 17px;
        font-family: Verdana, Verdana, Geneva, sans-serif;
        width: 491px;
        margin-left: 20px;
        color: #BC2758;
        margin-top: 6px;
      }
    }
    .garantia {
      display: inline-block;
      margin: 9px 24px 0 0;
      width: 145px;
      height: 91px;
    }
  }
  .telicon {
    display: inline-block;
    margin-right: 4px;
    width: 18px;
    height: 34px;
    margin-top: 4px;
  }
  .tel-fb {
    float: right;
    #tel {
      float: right;
      a {
        font-size: 29px;
        color: #009846;
        font-weight: bold;
      }
    }
    .fb-like {
      float: right;
      margin-top: 3px;
    }
  }

<header>
  <span class="logo-h1">
    <div class="logo my-icons-logo">
      <a href="/"></a>
    </div>
    <h1>Instalación de canalón en Madrid, Guadalajara, Cuenca, Toledo, Segovia, Soria y Ávila</h1>
  </span>
  <span class="garantia my-icons-garantia"></span>
  <span class="tel-fb">
    <div>
      <span class="telicon my-icons-telicon" style="float: left"></span>
      <span id="tel" itemscope itemtype="http://schema.org/HomeAndConstructionBusiness">
        <div itemprop="telephone" class="telephone">
          <a href="tel:+622585749">622 585 749</a>
        </div>
        <div itemprop="telephone" class="telephone">
          <a href="tel:+636740393">636 740 393</a>
        </div>
      </span>
    </div>
    <div class="fb-like" data-href="http://www.facebook.com/canalonesbastimar" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false">
    </div>
  </span>
  <div style="clear: both"></div>
  <!--<div class="fb-like" data-href="http://www.canalonesbastimar.es" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>-->
  <div style="clear: both"></div>
  <!-- navbar goes here -->
</header>

Upvotes: 4

Views: 3754

Answers (1)

Jasper
Jasper

Reputation: 76003

You should absolutely position the Facebook like widget. It's currently part of the regular flow of the document, so when it loads, it pushes other elements around (namely your navigation links). If you add position:absolute to the element (as well as top/left or right to correctly position it) you won't get a "jittery" load.

For example, adding this CSS to the widget:

position: absolute;
top: 75px;
right: 0;

and making it's parent position:relative should take care of your problem.

Upvotes: 2

Related Questions