html - Box not vertically aligned with I add a navigation bar on top -


upd : take @ snippe below please

i trying create homepage navigation bar on top , box in center of homepage screen. took idea template.

my problem cannot make box in center.

the original script inspired me :

* {    margin: 0;    padding: 0;   }  #wrapper {    position: absolute;    width: 100%;    height: 100%;    overflow: hidden;  }    .label {    cursor: pointer;    &:focus      outline: none;  }    .menu{    position: absolute;    top: 0;    left: 0;    background: #fff;    width: 240px;    height: 100%;    transform: translate3d(-240px, 0, 0);    transition: transform 0.35s;  }        .menu-toggle  {      position: absolute  ;        right: -60px;      width: 60px;      height: 60px;      line-height: 0px  ;        display: block;      padding: 0;      text-indent: -9999px;      background: #fff url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50% / 25px 25px no-repeat    }    ul      li        > .label          background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50% / 16px 16px no-repeat        a, .label          display: block          text-align: center          padding: 0 20px          line-height: 60px          text-decoration: none          color: #000          &:hover            color: #666    /* hide inputs */            .menu-checkbox {    display: none;   }  /* hide navigation icon sublabels */      .menu .menu label.menu-toggle{    background: none;  }    /* fade in checked menu */      .menu-checkbox:checked + .menu{    transform: translate3d(0, 0, 0);   }              /* show */  html, body{    height: 100%   }  body{    background: url(http://37.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsmk41st5lhmo1_1280.jpg) 50% 50% / cover   }  p{    margin-bottom: 15px   }  #info{    display: table;    background: rgba(0,0,0,0.4);    height: 100%;    width: 100%;  }    #info-content{      display: table-cell;      vertical-align: middle;      text-align: center;      text-transform: uppercase;      color: #fff;      font-size: 12px;    }      h1     {         color: #fff;        border: 3px solid #fff;        text-align: center;        background: rgba(0,0,0,0.1);        font-size: 22px;        font-weight: normal;        padding: 20px;        margin: 10px;        display: inline-block   ;      }        strong{          display: block;          font-size: 26px;        }
<div id="wrapper">  <div id="info">  <div id="info-content">  <h1>multi level <strong>css-only push menu</strong></h1>  </div>  </div>  <div class="menu">  <div class="menu-toggle">toggle  <ul>  <li><a href="#">menu-1</a></li>  <li><a href="#">menu-2</a></li>  <li>  <div class="label">menu-3  <div class="menu">  <div class="menu-toggle">toggle  <ul>  <li><a href="#">menu-3-1</a></li>  <li>  <div class="label">menu-3-2  <div class="menu">  <div class="menu-toggle">toggle  <ul>  <li><a href="#">menu-3-2-1</a></li>  <li><a href="#">menu-3-2-2</a></li>  <li>  <div class="label">menu-3-2-3  <div class="menu">  <div class="menu-toggle">toggle  <ul>  <li><a href="#">menu-3-2-3-1</a></li>  <li><a href="#">menu-3-2-3-2</a></li>  <li><a href="#">menu-3-2-3-3</a></li>  <li><a href="#">menu-3-2-3-4</a></li>  </ul>  </div>  </div>  </div>  </li>  <li><a href="#">menu-3-2-4</a></li>  </ul>  </div>  </div>  </div>  </li>  <li><a href="#">menu-3-3</a></li>  <li><a href="#">menu-3-4</a></li>  </ul>  </div>  </div>  </div>  </li>  <li>  <div class="label">menu-4  <div class="menu">  <div class="menu-toggle">toggle  <ul>  <li><a href="#">menu-4-1</a></li>  <li><a href="#">menu-4-2</a></li>  <li><a href="#">menu-4-3</a></li>  <li><a href="#">menu-4-4</a></li>  </ul>  </div>  </div>  </div>  </li>  <li>  <div class="label">menu-5  <div class="menu">  <div class="menu-toggle">toggle  <ul>  <li><a href="#">menu-5-1</a></li>  <li><a href="#">menu-5-2</a></li>  <li><a href="#">menu-5-3</a></li>  <li><a href="#">menu-5-4</a></li>  </ul>  </div>  </div>  </div>  </li>  <li><a href="#">menu-6</a></li>  </ul>  </div>  </div>  <!-- #wrapper --></div>

and 1 works navigation bar box not aligned vertically in center of content :

* {    margin: 0;    padding: 0;   }    html, body{    height: 100%;   }     body {     overflow:hidden;    background: url(http://37.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsmk41st5lhmo1_1280.jpg) 50% 50% / cover  }    #wrapper {    position: absolute;    width: 100%;    height: 100%;    overflow: hidden;  }    #menu,  #menu ul,  #menu ul li,  #menu ul li {    margin: 0;    padding: 0;    border: 0;    list-style: none;    display: block;    position: relative;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }  #menu:after,  #menu > ul:after {    content: ".";    display: block;    clear: both;    visibility: hidden;    line-height: 0;    height: 0;  }    #menu {    width: 20px;    background-color: transparent;      }    #menu > ul > li {    float: left;  }    #menu > ul > li > {    padding: 20px;    font-size: 12px;    text-decoration: none;    text-transform: uppercase;    color: #fff;    -webkit-transition: color .2s ease;    -moz-transition: color .2s ease;    -ms-transition: color .2s ease;    -o-transition: color .2s ease;    transition: color .2s ease;  }  #menu > ul > li:hover > a,  #menu > ul > li.active > {    color: #46545d;    background: #15a6dd;  }    .has-sub {  background: #fff;  }    .has-sub img {  max-width:34px;  max-height:34px;  padding:20px;  }      #menu > ul > li.has-sub > {    padding-right: 25px;  }  #menu > ul > li.has-sub > a::after {    position: absolute;    top: 21px;    right: 10px;    width: 4px;    height: 4px;    border-bottom: 1px solid #000000;    border-right: 1px solid #000000;    content: "";    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);    -webkit-transition: border-color 0.2s ease;    -moz-transition: border-color 0.2s ease;    -ms-transition: border-color 0.2s ease;    -o-transition: border-color 0.2s ease;    transition: border-color 0.2s ease;  }  #menu > ul > li.has-sub:hover > a::after {    border-color: #8fc647;  }  #menu ul ul {    position: absolute;    left: -9999px;  }  #menu li:hover > ul {    left: auto;  }  #menu ul ul li {    height: 0;    -webkit-transition: height .2s ease;    -moz-transition: height .2s ease;    -ms-transition: height .2s ease;    -o-transition: height .2s ease;    transition: height .2s ease;  }  #menu ul li:hover > ul > li {    height: 32px;  }  #menu ul ul li {    padding: 10px 20px;    width: 500px;    font-size: 12px;    background: #333333;    text-decoration: none;    color: #dddddd;    -webkit-transition: color .2s ease;    -moz-transition: color .2s ease;    -ms-transition: color .2s ease;    -o-transition: color .2s ease;    transition: color .2s ease;  }  #menu ul ul li:hover > a,  #menu ul ul li a:hover {    color: #ffffff;  }    #info{    display: table;    height: 100%;    width: 100%;  }    #info-content{      display: table-cell;      vertical-align: middle;      text-align: center;      text-transform: uppercase;      color: #fff;      font-size: 12px;    }            h1     {         color: #fff;        border: 3px solid #fff;        text-align: center;        font-size: 22px;        font-weight: normal;        padding: 20px;        margin: 10px;  	  margin-top:-54px;        display: inline-block   ;      }        strong{          display: block;          font-size: 26px;        }
<div id="wrapper">  <div id="menu">  <ul>  <li class="has-sub"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="" />  <ul>  <li><a href="#" target="_blank">subfield 1</a></li>  <li><a href="#" target="_blank">subfield</a></li>  </ul>  </li>  </ul>  </div>  <div id="info">  <div id="info-content">  <h1>all channels <strong>display ppc social</strong></h1>  </div>  </div>  </div>

i tried adding margin-top:-54px; h1 because navigation button 54px of height.

below posted image of how original looks , underneath how mine looks (after adding margin-top:-54px)

enter image description here

i guess problem relies here :

original :

.menu{   position: absolute;   top: 0;   left: 0;   background: #fff;   width: 240px;   height: 100%;   transform: translate3d(-240px, 0, 0);   transition: transform 0.35s; }   

mine :

#menu {   width: 20px;   background-color: transparent; } 

snippet works when in fullscreen button dissapears if change screen size :

* {    margin: 0;    padding: 0;   }    html, body{    height: 100%;   }     body {     overflow:hidden;    background: url(http://37.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsmk41st5lhmo1_1280.jpg) 50% 50% / cover  }    #wrapper {    position: absolute;    width: 100%;    height: 100%;    overflow: hidden;  }    #menu,  #menu ul,  #menu ul li,  #menu ul li {    margin: 0;    padding: 0;    border: 0;    list-style: none;    display: block;    position: relative;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }  #menu:after,  #menu > ul:after {    content: ".";    display: block;    clear: both;    visibility: hidden;    line-height: 0;    height: 0;  }    #menu {    position: absolute;    top: 0;    right: 75%;    width: 240px;    height: 100%;    transform: translate3d(-240px, 0, 0);    transition: transform 0.35s;  }    #menu > ul > li {    float: left;  }    #menu > ul > li > {    padding: 20px;    font-size: 12px;    text-decoration: none;    text-transform: uppercase;    color: #fff;    -webkit-transition: color .2s ease;    -moz-transition: color .2s ease;    -ms-transition: color .2s ease;    -o-transition: color .2s ease;    transition: color .2s ease;  }  #menu > ul > li:hover > a,  #menu > ul > li.active > {    color: #46545d;    background: #15a6dd;  }    .has-sub {  background: #fff;  }    .has-sub img {  max-width:34px;  max-height:34px;  padding:20px;  }      #menu > ul > li.has-sub > {    padding-right: 25px;  }  #menu > ul > li.has-sub > a::after {    position: absolute;    top: 21px;    right: 10px;    width: 4px;    height: 4px;    border-bottom: 1px solid #000000;    border-right: 1px solid #000000;    content: "";    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);    -webkit-transition: border-color 0.2s ease;    -moz-transition: border-color 0.2s ease;    -ms-transition: border-color 0.2s ease;    -o-transition: border-color 0.2s ease;    transition: border-color 0.2s ease;  }  #menu > ul > li.has-sub:hover > a::after {    border-color: #8fc647;  }  #menu ul ul {    position: absolute;    left: -9999px;  }  #menu li:hover > ul {    left: auto;  }  #menu ul ul li {    height: 0;    -webkit-transition: height .2s ease;    -moz-transition: height .2s ease;    -ms-transition: height .2s ease;    -o-transition: height .2s ease;    transition: height .2s ease;  }  #menu ul li:hover > ul > li {    height: 32px;  }  #menu ul ul li {    padding: 10px 20px;    width: 500px;    font-size: 12px;    background: #333333;    text-decoration: none;    color: #dddddd;    -webkit-transition: color .2s ease;    -moz-transition: color .2s ease;    -ms-transition: color .2s ease;    -o-transition: color .2s ease;    transition: color .2s ease;  }  #menu ul ul li:hover > a,  #menu ul ul li a:hover {    color: #ffffff;  }    #info{    display: table;    height: 100%;    width: 100%;  }    #info-content{      display: table-cell;      vertical-align: middle;      text-align: center;      text-transform: uppercase;      color: #fff;      font-size: 12px;    }            h1     {         color: #fff;        border: 3px solid #fff;        text-align: center;        font-size: 22px;        font-weight: normal;        padding: 20px;        margin: 10px;        display: inline-block   ;      }        strong{          display: block;          font-size: 26px;        }
<div id="wrapper">  <div id="menu">  <ul>  <li class="has-sub"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="" />  <ul>  <li><a href="#" target="_blank">subfield 1</a></li>  <li><a href="#" target="_blank">subfield</a></li>  </ul>  </li>  </ul>  </div>  <div id="info">  <div id="info-content">  <h1>all channels <strong>display ppc social</strong></h1>  </div>  </div>  </div>

and problem relies here :

#menu {   right: 75%; } 

add following css menu:

#menu {   position: absolute;   left: 0;   top: 0; } 

and remove negative margin h1.

note: position: absolute excess in styles of #wrapper.

* {    margin: 0;    padding: 0;  }    html, body{    height: 100%;  }    body {    overflow:hidden;    background: url(http://37.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsmk41st5lhmo1_1280.jpg) 50% 50% / cover  }    #wrapper {    width: 100%;    height: 100%;    overflow: hidden;  }    #menu,  #menu ul,  #menu ul li,  #menu ul li {    margin: 0;    padding: 0;    border: 0;    list-style: none;    display: block;    position: relative;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }  #menu:after,  #menu > ul:after {    content: ".";    display: block;    clear: both;    visibility: hidden;    line-height: 0;    height: 0;  }    #menu {    width: 20px;    background-color: transparent;    position: absolute;    left: 0;    top: 0;  }    #menu > ul > li {    float: left;  }    #menu > ul > li > {    padding: 20px;    font-size: 12px;    text-decoration: none;    text-transform: uppercase;    color: #fff;    -webkit-transition: color .2s ease;    -moz-transition: color .2s ease;    -ms-transition: color .2s ease;    -o-transition: color .2s ease;    transition: color .2s ease;  }  #menu > ul > li:hover > a,  #menu > ul > li.active > {    color: #46545d;    background: #15a6dd;  }    .has-sub {    background: #fff;  }    .has-sub img {    max-width:34px;    max-height:34px;    padding:20px;  }      #menu > ul > li.has-sub > {    padding-right: 25px;  }  #menu > ul > li.has-sub > a::after {    position: absolute;    top: 21px;    right: 10px;    width: 4px;    height: 4px;    border-bottom: 1px solid #000000;    border-right: 1px solid #000000;    content: "";    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);    -webkit-transition: border-color 0.2s ease;    -moz-transition: border-color 0.2s ease;    -ms-transition: border-color 0.2s ease;    -o-transition: border-color 0.2s ease;    transition: border-color 0.2s ease;  }  #menu > ul > li.has-sub:hover > a::after {    border-color: #8fc647;  }  #menu ul ul {    position: absolute;    left: -9999px;  }  #menu li:hover > ul {    left: auto;  }  #menu ul ul li {    height: 0;    -webkit-transition: height .2s ease;    -moz-transition: height .2s ease;    -ms-transition: height .2s ease;    -o-transition: height .2s ease;    transition: height .2s ease;  }  #menu ul li:hover > ul > li {    height: 32px;  }  #menu ul ul li {    padding: 10px 20px;    width: 500px;    font-size: 12px;    background: #333333;    text-decoration: none;    color: #dddddd;    -webkit-transition: color .2s ease;    -moz-transition: color .2s ease;    -ms-transition: color .2s ease;    -o-transition: color .2s ease;    transition: color .2s ease;  }  #menu ul ul li:hover > a,  #menu ul ul li a:hover {    color: #ffffff;  }    #info{    display: table;    height: 100%;    width: 100%;  }  #info-content{    display: table-cell;    vertical-align: middle;    text-align: center;    text-transform: uppercase;    color: #fff;    font-size: 12px;  }    h1     {     color: #fff;    border: 3px solid #fff;    text-align: center;    font-size: 22px;    font-weight: normal;    padding: 20px;    margin: 10px;    display: inline-block   ;  }  strong{    display: block;    font-size: 26px;  }
<div id="wrapper">    <div id="menu">      <ul>        <li class="has-sub"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="" />          <ul>            <li><a href="#" target="_blank">subfield 1</a></li>            <li><a href="#" target="_blank">subfield</a></li>          </ul>        </li>      </ul>    </div>    <div id="info">      <div id="info-content">        <h1>all channels <strong>display ppc social</strong></h1>      </div>    </div>  </div>


Comments

Popular posts from this blog

account - Script error login visual studio DefaultLogin_PCore.js -

xcode - CocoaPod Storyboard error: -