Показать сообщение отдельно
  #8 (permalink)  
Старый 23.05.2020, 15:11
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

<style>
@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
	font-size: .8rem;
	line-height: 160%;
}
.sidebar{
	width: 280px;
	height: 100vh;
	position: fixed;
	top:0;
	left: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	direction: rtl;
}
.zagalovok_nav{
	margin: 10px 10px 10px 10px;
	padding: 20px 20px 20px 20px;
	direction: ltr;
}
.zagalovok_nav > h3{
	color:cornflowerblue;
}
.zagalovok_nav > p{
	color: gray;
}
.zagalovok_nav_select {
	background-color: #e2e2e2;
	color: #fff;
}
.sidebar::-webkit-scrollbar{
    width: 10px;  
}
.sidebar::-webkit-scrollbar-track{
    border: 1px solid black;
    background-color: #F5F5F5;
}
.sidebar::-webkit-scrollbar{
    width: 10px;
    background-color: #F5F5F5;
}
.sidebar::-webkit-scrollbar-thumb{
    background-color: cornflowerblue;  
}
.soderzjaniya{
	max-width: 960px;
	margin: 0px 0px 0px 340px;
}
.soderzjaniya_statiya{
	margin: 40px 20px 40px 20px;
}
.soderzjaniya_statiya > h3{
	color: #3E62A5;
}
.soderzjaniya_statiya > p{
	
}
    </style>
</head>

<body>
<div class="sidebar">
	<div class="zagalovok_nav">
		<h3>1.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>1.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>1.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>2.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>2.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>2.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>3.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>3.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>3.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
	<h3>4.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>4.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>4.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>5.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>5.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>5.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>6.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>6.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>6.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>7.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>7.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>7.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>8.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>8.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>8.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>9.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>9.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>9.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
</div>
<div class="soderzjaniya">
<div class="soderzjaniya_statiya">
		<h3>1.1 Заголовок</h3>
		<p>Lorem ipsum dolor /p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>1.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>1.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>2.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet,  .</p>	
	</div>
	<div class="soderzjaniya_statiya"> 
		<h3>2.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet,</p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>2.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, similique  </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>3.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>3.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet,   </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>3.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.   </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>4.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet,  </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>4.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>4.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet,  </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>5.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>5.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>5.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet,  </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>6.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet.</p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>6.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>6.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit</p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>7.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>7.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>7.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quas recusandae ad  </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>8.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>8.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet,</p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>8.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit   </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>9.1 Заголовок</h3>
		<p>Lorem ipsum dolor </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>9.2 Заголовок</h3>
		<p>Lorem ipsum dolor  </p>
	</div>
	<div class="soderzjaniya_statiya">
		<h3>9.3 Заголовок</h3>
		<p>Lorem ipsum dolor .</p>
	</div>
</div>


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

С левого боку содержание, а с правого основные статьи

Последний раз редактировалось Сергей Ракипов, 23.05.2020 в 15:13.
Ответить с цитированием