Проблемы с навигацией по боковой навигации

Хотелось бы сосредоточить содержимое абзаца относительно div .main-content, который находится справа от боковой навигации, но когда я использую margin: 0 auto, ничего не происходит. Я знаю, что, вероятно, неправильно написал CSS, но я не уверен, как его исправить. Мне также понравится белый фон ссылки, на которую нажимается, чтобы охватить всю строку div, которая содержит навигацию. Я не добираюсь до левого края.Проблемы с навигацией по боковой навигации

$(document).ready(function(){ 
 
\t var navElement = $('.nav-el'); 
 
\t $('.content-area').hide(); 
 
\t \t navElement.find('a').on('click', function(e){ 
 
\t \t e.preventDefault(); 
 
\t \t navElement.find('.current').removeClass('current'); 
 
\t \t $(this).addClass('current'); 
 
\t \t $(this.hash).show().siblings().hide(); 
 
\t }).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 a { 
 
    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 at 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 a 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 a 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 
 
      a 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>

источник

2015-07-08 web-dev

Абзац центрированной, если вы смотрите в консоли. Просто это меню скрывает его, поэтому вы не можете его увидеть.

Чтобы центрировать текст, который является то, что я предполагаю, что вы хотите сделать, вы можете использовать text-align: center; на вашем .main-content:

.main-content { 
    padding: 50px; 
    text-align: center; 
}

Я также предлагаю вам бросить в некоторой прокладке здесь, чтобы сделать его более удобным для чтения и менее некрасиво.

Чтобы разрешить ссылку, чтобы растянуть всю ширину вам нужно удалить прокладку из ul:

ul { 
    padding: 0; 
}

источник

2015-07-08 20:18:37 Chrillewoodz

Я хотел бы центровки Div вместо текста внутри DIV –

@ веб-Dev выравнивания текста центров изображений. Проверьте консоль, чтобы увидеть, как это влияет на нее, но, скорее всего, вам придется это сделать. – Chrillewoodz

Проблемы с навигацией по боковой навигации

ответ

Смежные вопросы