Перейти к содержимому



Как убрать расстояние которое остается после смещение блока?

#1 lordamid

lordamid
  • Неактивные
  • 13 сообщений
  • Репутация: 0
1

Отправлено 16 Апрель 2013 - 14:49

Доброго времени суток. Мой вопрос пожалуй может показаться глупым но никак не могу его решить. Застрял на нем и все тут. Помогите пожалуйста.

Как убрать промежуток который остается после перемещения блока dynamic_content
На картинке желтая полоса.

Спасибо.

html файл
<html>

<head>
<link rel="stylesheet" title="screen style" type="text/css" href="style.css">
</head>
<body>
<div id="main_unit">
  <div id="main_unit_top"></div>
  <div id="main_unit_center">
   <div id="dynamic_content"></div>
  </div>
  <div id="main_unit_bottom"></div>
</div>
</body>
</html>


css файл
body	 {

	  background-color: #000000;
	  }
	 
#main_unit    {
	  width: 200px;
	  margin: 0 auto;
	  border: 1px solid red;
	  }
	 
#main_unit_top   {
	  background-color: #FFFFFF;
	  height: 100px;
	  border: 1px solid yellow;
	  }
	 
#main_unit_center  {
	  background-color: #FFFFFF;
	  border: 1px solid green;
	  }
	 
#main_unit_bottom  {
	  background-color: #FFFFFF;
	  height: 50px;
	  border: 1px solid purple;
	  }
#dynamic_content  {
	  position: relative;
	  top: -75px;
	  background-color: blue;
	  width: 150px;
	  height: 250px;
	  margin: 0 auto;
	  border: 1px solid red;
	  }

Результат на картинке

Прикрепленные изображения

  • Снимок.PNG

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. CSS как убрать границы в верстке!
  2. Как выйти из под ручного фильтра от Google за "искусственные входящие ссылки"?
  3. Изменение размера картинки при уменьшении окна браузера
  4. Как отключить один из div блоков, что бы он не загружался в html ?
  5. Что делать с Украинским трафиком после блокировки?

#2 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 16 Апрель 2013 - 15:34

задай фиксированную высоту для #main_unit_center , например вот так

#main_unit_center  {
		  background-color: #FFFFFF;
		  border: 1px solid green;
		  height: 180px;
		  }

  • 0

#3 lordamid

lordamid
    Topic Starter
  • Неактивные
  • 13 сообщений
  • Репутация: 0

Отправлено 16 Апрель 2013 - 15:48

Спасибо, за совет. Но дело в том что данный скрин это только схематическое изображение сайта.
Блок dynamic_content имеет динамическое наполнение и меняет свою высоту в зависимости от количества информации находящейся в нем.
И если я задам блоку main_unit_center фиксированную высоту а dynamic_content изменится на пару десятков строк в итоге получим примерно следующее...

Прикрепленные изображения

  • Снимок2.PNG

  • 0

#4 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 16 Апрель 2013 - 15:57

ну так вопрос же бы про отступы? :)

если хочешь динамическую структуру, попробуй вот с этими стилями


body	 {
		  background-color: #000000;
		  }
#main_unit    {
		  width: 200px;
		  margin: 0 auto;
		  border: 1px solid red;
		  overflow: hidden;
		  }
#main_unit_top   {
		  background-color: #FFFFFF;
		  height: 25px;
		  border: 1px solid yellow;
		  }
#main_unit_center  {
		  background-color: #FFFFFF;
		  border: 1px solid green;
		  overflow: hidden;
		  }
#main_unit_bottom  {
		  background-color: #FFFFFF;
		  height: 50px;
		  border: 1px solid purple;
		  }
#dynamic_content  {
		  background-color: blue;
		  width: 150px;
		  height: 250px;
		  margin: 0 auto;
		  border: 1px solid red;
		  overflow: hidden;
		  }

  • 0

#5 lordamid

lordamid
    Topic Starter
  • Неактивные
  • 13 сообщений
  • Репутация: 0

Отправлено 16 Апрель 2013 - 16:12

Наверное проще было сделать скрин сайта... :angry:
Блок main_unit_top имеет фиксированную высоту и ширину потому что на фоне у него картинка которая стартует с блока main_unit_top затем однопиксельная (по высоте) картинка делает фон для всего блока main_unit_center, и уже в блоке main_unit_bottom идет завершение этой картинки.
Если бы блок main_unit_top можно было уменьшить то у меня и голова наверное не болела бы :) уже вторую неделю бьюсь. Здался решил к более опытным людям обратиться нежели я ;)
  • 0

#6 isvetlichniy

isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 16 Апрель 2013 - 16:15

ну значит формулируй понятно вопрос, а гадать - эти к гадалке
давай адрес или скрин сайта
  • 0

#7 lordamid

lordamid
    Topic Starter
  • Неактивные
  • 13 сообщений
  • Репутация: 0

Отправлено 16 Апрель 2013 - 16:32

Я вот что думаю.
А что будет если разместить фон который должен быть в центре блока на фон блока main_unit.
В фон блоке main_unit_top фоном разместить картинку которая у него и должна быть. Только добавить параметр no-repeat.
Непосредственно в него запихнуть блок dynamic_content
А дальше уже после него пойдет main_unit_bottom.

Так прокатит?

ну значит формулируй понятно вопрос, а гадать - эти к гадалке
давай адрес или скрин сайта

сайт лежит дома на апаче а я на работе в пару свободных минут сижу размышляю как правильно сделать...
  • 0

#8 fedornabilkin

fedornabilkin
  • Модератор
  • 1 088 сообщений
  • Репутация: 171

Отправлено 16 Апрель 2013 - 16:35

Ссылку давай и что желаешь увидеть.
Я с начала темы не понял что ты хотел, а в конце ты еще и передумал :)
Я уверен, что твоя проблема решена несколько лет назад, поэтому не теряй зря время на пустяки. Давай ссыль и будем посмотреть что у тебя там.
  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#9 lordamid

lordamid
    Topic Starter
  • Неактивные
  • 13 сообщений
  • Репутация: 0

Отправлено 16 Апрель 2013 - 16:43

да я тоже уверен что проблема решена... просто найти ответ нигде не могу.
скрин выложу как доберусь с работы.
а в конце я не передумал, просто думаю каким образом можно решить эту бадягу...
Сори если не внятно изъясняюсь...
  • 0

#10 html-ka

html-ka
  • Неактивные
  • 455 сообщений
  • Репутация: 82

Отправлено 16 Апрель 2013 - 16:55

я конечно дико извеняюсь, но зачем тут нужно позиционирование, когда тут достаточно использовать отрицатеьный margin-top, что поднять вверх нужный блок...продолжать? а как растянуть колонку на всю высоты страницы в Интернете как грязи, и спосомшью фоновой каритнки и с помошью javascript и ccs выбирай на вкус.
ЗЫ - этот шаблон на коленке за 5 минут можно сверстать :)
  • 1

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85

Оформление форума – IPBSkins.ru