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)
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
Post a Comment