html - Side Navigation styling issues -
would center paragraph content respect .main-contentdiv right of side navigation, when use margin: 0 autonothing happens. know wrote css wrong not sure of how fix it.i white background of link that's clicked span entire row of div holds navigation. doesn't reach far left side.
$(document).ready(function(){ var navelement = $('.nav-el'); $('.content-area').hide(); navelement.find('a').on('click', function(e){ e.preventdefault(); navelement.find('.current').removeclass('current'); $(this).addclass('current'); $(this.hash).show().siblings().hide(); }).first().click(); });.hide { display: none; } body { } .container { position: relative; } #contentbox { border: 1px solid grey; width: 960px; height: 1000px; border-radius: 5px; margin: 0 auto; } .side-nav { position: relative; float: left; width: 250px; background-color: green; height: 100%; } .nav-el { margin: 0; } .nav-el { text-decoration: none; display: block; padding: .5em 1em; } .nav-el a.current { background: white; color: orange; } .nav-el li { list-style-type: none; } .main-content { } .content-area { padding: 2em; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/samplestyle.css"> </head> <body> <div class="container"> <div id="contentbox"> <nav class="side-nav"> <ul class="nav-el"> <li><a href="#nav1">nav element 1</a></li> <li><a href="#nav2">nav element 2</a></li> <li><a href="#nav3">nav element 3</a></li> <li><a href="#nav4">nav element 4</a></li> <li><a href="#nav5">nav element 5</a></li> </ul> </nav> <div class="main-content"> <div id="nav1" class="content-area active"> <h2>section 1</h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris id quam eget risus vulputate posuere. duis rhoncus nunc nec quam consequat cursus. quisque aliquam arcu sed nibh suscipit hendrerit. integer nisi massa, venenatis id bibendum gravida, consequat sit amet elit. nulla rutrum, lectus ut fermentum vehicula, leo sem cursus libero, ut euismod velit turpis @ sapien. donec dui tellus, convallis non egestas lobortis, sodales nec massa. vivamus sit amet viverra odio. sed eget egestas libero, nec condimentum orci. </p> </div> <div id="nav2" class="content-area"> <h2>section 2</h2> <p> vestibulum gravida quam id sem sagittis, vel ornare sapien ultrices. morbi iaculis placerat metus, in placerat neque ultrices eu. duis laoreet, quam ac commodo hendrerit, nisi dolor bibendum urna, eu facilisis orci eros ac odio. fusce porta eros tristique, pellentesque mauris in, ullamcorper nisl. morbi sollicitudin in magna vel tempor. nullam placerat lorem quis orci dapibus efficitur. mauris tincidunt nisl ac sem dictum tempor. etiam molestie lorem. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. in fringilla ipsum id nisi ultricies, ac ornare urna pharetra. </p> </div> <div id="nav3" class="content-area"> <h2>section 3</h2> <p> vestibulum gravida quam id sem sagittis, vel ornare sapien ultrices. morbi iaculis placerat metus, in placerat neque ultrices eu. duis laoreet, quam ac commodo hendrerit, nisi dolor bibendum urna, eu facilisis orci eros ac odio. fusce porta eros tristique, pellentesque mauris in, ullamcorper nisl. morbi sollicitudin in magna vel tempor. nullam placerat lorem quis orci dapibus efficitur. mauris tincidunt nisl ac sem dictum tempor. etiam molestie lorem. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. in fringilla ipsum id nisi ultricies, ac ornare urna pharetra. </p> </div> <div id="nav4" class="content-area"> <h2>section 4</h2> <p> sed tempor sodales molestie. integer nec mauris varius, scelerisque turpis sagittis, tincidunt tellus. ut vehicula nec urna eu malesuada. donec nec lacinia mauris. sed elit mauris, vulputate nec tortor ut, ornare auctor nisl. cras lorem nunc. praesent vitae lorem velit. proin tempus felis sed tortor luctus feugiat. lorem ipsum dolor sit amet, consectetur adipiscing elit. curabitur feugiat interdum orci et varius. </p> </div> <div id="nav5" class="content-area"> <h2>section 5</h2> <p></p> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>
the paragraph centered if in console. it's menu hides can't see it.
to center text assume want can use text-align: center; on .main-content:
.main-content { padding: 50px; text-align: center; } i'd suggest throw in padding here make more readable , less ugly.
to allow link stretch full width need remove padding of ul:
ul { padding: 0; } 
Comments
Post a Comment