html - Elements moving around for some unknown reason -


whenever change id of first subheading aulas_subheading_2 aulas_subheading_1. strange things happen layout, aulas_heading_1 heading seems disappear!

it goes this: before

to this: after

i inspected elements firebug , identified behind divider, aulas_heading1_band, in position:relative

what's going on here?

the relevant markup:

html

 <section id="aulas_container">   <div id="aulas_container_top">     <h1 id="aulas_heading_1"><span class="highlight1">aulas de inglês</span></h1>      <h2 id="aulas_subheading_2">práticas imersivas</h2>     <div id="aulas_heading_band_1"></div>   </div>   <div id="aulas_container_bottom">     <h1 id="aulas_heading_1">aulas</h1>     <h2 id="aulas_subheading_2"><span class="highlight2">com professores nativos</span></h2>     <div id="aulas_subheading_band">a</div>   </div> 

css

#aulas_container {   background-position: center top;   width: 100%;   float: left;   margin-left: 0;   margin-right: 0;   height: 910px; }  #aulas_container_top {   width: 100%;   float: left;   margin-left: 0;   margin-right: 0;   height: 50%;   position: relative;   background-image: url("http://i.imgur.com/6tv6r7f.png"); }  #aulas_container_bottom {   height: 50%;   width: 100%;   float: left;   margin-left: 0;   margin-right: 0;   background-image: url("http://i.imgur.com/yfxspwu.jpg"); }  /*                       */ /*         text          */ /*                       */ #aulas_heading_1 {   width: 100%;   float: left;   margin-left: 0;   margin-right: 0;   font-size: 50px;   text-align: center;   color: white; }  #aulas_subheading_1 {   width: 100%;   float: left;   margin-left: 0;   margin-right: 0;   text-align: center;   vertical-align: bottom;   color: white; }  #aulas_heading_2 {   color: black; }  #aulas_subheading_2 {   font-size: 60px;   text-align: center;   vertical-align: bottom;   color: black; }  /*                       */ /*  dividers , shapes  */ /*                       */ #aulas_heading_band_1 {   width: 100%;   float: left;   margin-left: 0;   margin-right: 0;   height: 35%;   position: relative;   top: -40%;   background-color: black; }  *#aulas_heading_band_1:before {   content: "";   position: relative;   top: -30%;   background-color: white;   width: 100%;   float: left;   margin-left: 0;   margin-right: 0;   height: 50%;   display: block;   position: relative; }  #aulas_subheading_band {   background-color: white;   height: 10%;   position: relative;   bottom: 0%; }   #aulas_subheading_2_band{   background-color: $binarycolor0;   height: 5%;   } 


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -