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

Сервис обмена электронных валют

Партнерская программа Kredov

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

#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

#2 isvetlichniy

isvetlichniy
  • Пользователь
  • 619 сообщений
  • Репутация: 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
  • Пользователь
  • 619 сообщений
  • Репутация: 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
  • Пользователь
  • 619 сообщений
  • Репутация: 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
  • Пользователь
  • 696 сообщений
  • Репутация: 91

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

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


#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