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:
to this:
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
Post a Comment