Created
October 15, 2013 02:50
Revisions
-
hucklesby created this gist
Oct 15, 2013 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,64 @@ /** * Full-width vertically centered menu bar * Addendum to solutions from Roger Johansson * http://www.456bereastreet.com/archive/201310/full-width_justified_vertically_centered_navbar/ */ body { margin: 3em 0 0; background-color: #f0f0f0; color: #000; } .nav-main ul { display:table; /* Make the ul behave like a table */ border-collapse:collapse; /* Collapse touching borders */ width:100%; /* Make it full-width */ margin:0 0 20px; /* Some bottom margin (also resets browser default margin for ul in case there isn’t already a reset for that) */ padding:0; /* Remove any browser default padding */ list-style:none; /* No list bullets, please */ } .nav-main li { display:table-cell; /* Make the li elements behave like table cells */ width:1%; /* By giving them a small width they will magically be stretched to fill the width of the table */ border:1px solid #ddd; background:#eee; vertical-align:middle; /* Vertically center their content */ text-align:center; /* Horizontally center their content */ } .nav-main a { display:block; padding:10px; color:#000; text-decoration:none; } .nav-main a:hover,.nav-main a:focus { outline:none; color:#fff; background:#000; } .nav-main.active li:hover { cursor:pointer; } .nav-main.active li:hover,.nav-main.active li.focus { background:#000; } .nav-main.active li:hover a { color:#fff; } /* Following code added to make all links full height */ .nav-main li { overflow-y: hidden; } .nav-main a { padding: 2.5em .5em; margin: -2em 0; } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,13 @@ <!-- content to be placed inside <body>…</body> --> <div class="nav-main" role="navigation"> <ul> <li><a href="#void">Home</a></li> <li><a href="#void">Section two</a></li> <li><a href="#void">Section three</a></li> <li><a href="#void">Another section</a></li> <li><a href="#void">A section with a longer name</a></li> <li><a href="#void">Section six</a></li> <li><a href="#void">This is section seven</a></li> <li><a href="#void">Section 8</a></li> </ul> </div> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ // alert('Hello world!'); This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}