@GoldGoblin

Частичное отображение div, в чем проблема?

Добрый Вечер! Подкручиваю 1 сайт без детальных знаний css и столкнулся с проблемой, отображается только часть css стиля div в которой есть какой либо контент.

Код:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test board</title>
  <style type="text/css">
   body { margin: 0; }
   #sidebar, #content,#post1 { position: absolute; } 
   #sidebar, #content. #post1 { overflow: auto; padding: 10px; }
   #header {
    height: 180px; /* высота слоя */
	background: #FEDFC0; border-bottom: 2px solid #7B5427;
	z-index: 1;
   }
   #header h1 { padding: 20px; margin: 0; }
   #sidebar { 
    width: 250px; background: #ECF5E4; border-right: 1px solid #231F20;
    top: 182px; /* растояние от верхнего края */ 
    bottom: 0; /* растояние снизу  */
	z-index: 1;
   }
   #content {
    top: 182px; /* растояние от верхнего края */
    left: 250px; /* растояние от левого края */ 
    bottom: 0; right: 0;
	z-index: 1;
   }
   #post1 {
	top: 190px;
	left: 252px;
	background: #FEDFC0; border-bottom: 2px solid #7B5427;
	bottom: 2; riht: 2;
	z-index: 2;
   }
  </style>
 </head>
 <body>
  <div id="header"><h1>test board</h1></div>
  <div id="sidebar">
  </div>
  <div id="content">
	<div id="post1">
	<h1>test</h1>
	</div>
  </div>
 </body>
</html>


Скрин проблемы

997042e3ba78496ba16e9c6d9c99fa0b.jpg
  • Вопрос задан
  • 156 просмотров
Решения вопроса 1
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Да ну не надо же использовать id для стилей, пожалуйста. По этому вопросу объяснения тут

По вопросу:
1) Опечатка в #post1 - riGht, кроме того надо указывать px или % для свойств позиционирования - bottom, right, ...
2) Плохо лепить absolute там, где он не нужен. Из-за этого блоку content кажется, что в нём ничего нет и эго размеры - это padding. Вам надо либо задавать их вручную, либо сделать post с position: relative

Много чего можно ещё сказать, был бы пример на jsfiddle или codepen
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
semenovstyle
@semenovstyle
Вот ответы на все ваши вопросы.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы