Проблема с размер страницы

143
25 ноября 2018, 06:10

моя проблема заключается в слудующем:при добавлении блока, изменяется высота страницы. Как вернуть нормальною высоту страницы? И как удлать часть где нет ничего?

Так же при изменении разрешения окна, текстовые ссылки стоят на месте а не двигаются. Что с этим сделать? Помогите!!]3]4[]5

/*Тело*/ 
 
body { 
  background: url(img/bg.png); 
  margin: 0; 
  padding: 0; 
} 
 
 
/* Шапка */ 
 
div.header { 
  height: 110px; 
  background: #101417; 
  position: relative; 
  top: 0px; 
} 
 
div.script 
/*Название в шапке*/ 
 
.name:hover .mid { 
  color: red; 
} 
 
div.mid { 
  position: relative; 
  top: -40px; 
  color: white; 
  left: 0px; 
  font-style: italic; 
  font-size: 20px; 
} 
 
 
/*Меню*/ 
 
div.topmenu { 
  float: right; 
} 
 
div.topmenu a { 
  margin: 0 0 0 10px; 
  position: relative; 
  bottom: -10px; 
} 
 
.mid:hover { 
  color: red; 
} 
 
a { 
  font: 16px/24px Arial, Tahoma, sans-serif; 
  position: relative; 
  left: -570px; 
  top: -10px; 
  color: black; 
  /* Цвет обычной ссылки */ 
  text-decoration: none; 
  /* Убираем подчеркивание у ссылок */ 
} 
 
a:visited { 
  color: red:; 
  /* Цвет посещённой ссылки */ 
} 
 
a:hover { 
  color: white; 
  /* Цвет ссылки при наведении на нее курсора мыши */ 
  text-decoration: none; 
} 
 
 
/*Часы*/ 
 
div.clock { 
  position: relative; 
  bottom: 110px; 
} 
 
 
/*Menu fon*/ 
 
div.menu { 
  background: red; 
  border: 14px solid red; 
  position: relative; 
  top: -50px; 
} 
 
 
/*block*/ 
 
div.block { 
  width: 200px; 
} 
 
div.left { 
  background: #101417; 
  border: 1px solid grey; 
  padding: 20px; 
  border-radius: 1px; 
  height: 460px; 
  position: relative; 
  top: -10px; 
} 
 
div.right { 
  background: #101417; 
  border: 1px solid grey; 
  padding: 20px; 
  border-radius: 1px; 
  height: 460px; 
  position: relative; 
  top: -512px; 
  left: 1150px; 
} 
 
div.center { 
  background: #101417; 
  border: 1px solid grey; 
  padding: 20px; 
  border-radius: 1px; 
  height: 460px; 
  position: relative; 
  top: -1014px; 
  left: 250px; 
  width: 811px; 
} 
 
#content { 
  width: 500px; 
  /* Ширина слоя */ 
  margin: 0 auto 50px; 
  /* Выравнивание по центру */ 
} 
 
#footer { 
  position: fixed; 
  /* Фиксированное положение */ 
  left: 0; 
  bottom: 0; 
  /* Левый нижний угол */ 
  padding: 10px; 
  /* Поля вокруг текста */ 
  background: #39b54a; 
  /* Цвет фона */ 
  color: #fff; 
  /* Цвет текста */ 
  width: 100%; 
  /* Ширина слоя */ 
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <title>rob1nz</title> 
  <link href="style.css" rel="stylesheet" media="all"> 
</head> 
 
<body> 
 
  <div class="header"> 
    <header> 
      <div class="topmenu"> 
      </div> 
    </header> 
  </div> 
 
 
 
  <div class="clock"> 
    <iframe src="http://free.timeanddate.com/clock/i6e1neb0/n367/tlua41/fn15/fs22/tcff0/pc009/ftb/th1" frameborder="0" width="83" height="28"></iframe> 
 
    <div class="mid"> 
      <header> 
        <h1 align="center">Tunika7</h1> 
      </header> 
    </div> 
 
    <div class="menu"> 
      <div class="topmenu"> 
        <aside> 
          <a href="index.html">Главная</a> 
          <a href="#">Создатели</a> 
          <a href="#">Login</a> 
        </aside> 
      </div> 
    </div> 
 
 
    <div class="content"> 
      <div class="mid"> 
        <div class="fon"> 
          <div class="block"> 
            <div class="left"></div> 
            <div class="right"></div> 
            <div class="center"></div> 
          </div> 
        </div> 
      </div> 
    </div> 
 
 
 
</body> 
 
</html>

Answer 1

1) Я вижу у тебя незакрытый div.clock (нарушается последовательность - нужно закрыть на 20 строке)

2) У тебя начинается какая-то странная структура (как по мне), Я бы порекомендовал сделать следующее:

<div class="content">
<div class="mid">
    <div class="fon">
        <div class="block">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center"></div>
        </div>
    </div>
</div>

Заменить на

<div class="content">
<div class="mid">
   <div class="left"></div>
   <div class="right"></div>
   <div class="center"></div>
</div>

3) У div.center есть параметр top: -1125px на 125 строке - Он и вызывает твою проблему. Позиционировать нужно по другому. - Здесь я ответил на вопрос почему пустое пространство у тебя снизу. Дальше уже идут тонкости верстки. Нужно понимать задачу

Рассказываю исходя из предложенной мной структуры: Добавляешь div.mid (он у тебя используется в меню), по этому в CSS обратись к нему через .content 

.content>.mid { display: flex; justify-content:space-between; }
READ ALSO
codemirror. подсветка ошибок(lint, анализ кода) в htmlmixed
HTML

codemirror. подсветка ошибок(lint, анализ кода) в htmlmixed

Я создаю textarea с такими параметрами:

 175
Overflow: auto не работает для дочернего элемента
HTML

Overflow: auto не работает для дочернего элемента

Есть вертикальное менюПри его открытии на мобильном устройстве оно не помещается на экран по высоте:

 179
fadeOut нативными средствами React с выполнением логики по завершению
jQuery

fadeOut нативными средствами React с выполнением логики по завершению

Есть, скажем, такая кнопка:

 165
Как реализовать анимацию CSS
jQuery

Как реализовать анимацию CSS

При клике на кнопку 'добавить в корзину',как я понял копия картинки улетает в корзину и исчезаетВот пример

 175