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



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

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

Обновлено 26 апреля 2013 - 08:27  Отправлено 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
  • Неактивные
  • 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 188 сообщений
  • Репутация: 206

Отправлено 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

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

Отправлено 16 апреля 2013 - 17:07

о... оно... если прикинуть сколько потеряно времени это капец...
мог бы поставить пивас поставил бы безоговорочно...
растягивание на высоту страницы и т.д. не нужно...
Огромное спасибо... :)
  • 0

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

Отправлено 16 апреля 2013 - 17:09

рад, что ты понял :)
  • 0

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

Отправлено 16 апреля 2013 - 17:10

что значит опыта маловато... :)
  • 0

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

Отправлено 16 апреля 2013 - 17:16

это дело наживное, а то, что голова работает, это самое важное, ведь понял с полуслова :)
  • 0

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

Отправлено 16 апреля 2013 - 17:18

Еще раз спасибо. Что получилось в итоге покажу через пару дней...
  • 0

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

Отправлено 16 апреля 2013 - 17:24

с удовольствием оценю, сам вспоминаю бессоные ночи в поиске решений, да и щас бывает )))))))))))))
  • 0

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

Отправлено 18 апреля 2013 - 23:45

ЗЫ - этот шаблон на коленке за 5 минут можно сверстать :)

как-то так подумал и я пока не пришел домой и не проверил... Еще день бился головой о стенку... В итоге с одной проблеммы перелез на другую и можно сказать остался на том же месте что и был.
Помогите дельным советом как с этим бороться... А описание ЭТОГО ниже.

Собственно говоря действительно, начальную проблемму с отступом внизу margin решил... Но появилась другая.

Суть в том, что по дизайну фон блоков имеет прозрачность. И вот когда центральный блок поднимается в верх, получается накладывание одного фона на другой.

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

Код html страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="javascript/jquery-1.5.min.js" type="text/javascript"></script>
  <script src="/equalHeight.js" type="text/javascript"></script>
  <link rel=stylesheet type=text/css href='resset.css'>
  <link rel=stylesheet type=text/css href='style.css'>
</head>
<body>
<div id="content_box">
  <div id="content_box_top"></div>
  <div id="content_box_center">
   <div id="content">баба яга против</div>
  </div>
  <div id="content_box_bottom"></div>
</div>
</body>
</html>

Код CSS

body	 {
	  background-color: #000000;
	  }
#content_box   {
	  margin: 10px auto;
	  width: 685px;
	  }
#content_box_top  {
	  background-image: url(content-box-top-transparency70.jpg);
	  filter: alpha(Opacity=70);
	  opacity: 0.7;	
	  width: 685px;
	  height: 268px;
	  }
#content_box_center  {
	  background-image: url(content-box-repit-vertical-transparency70.jpg);
	  filter: alpha(Opacity=70);
	  opacity: 0.7;	
	  width: 685px;
	  }
#content_box_bottom  {
	  background-image: url(content-box-bottom-transparency70.jpg);
	  filter: alpha(Opacity=70);
	  opacity: 0.7;	
	  width: 685px;
	  height: 49px;
	  }
#content	{
	  filter: alpha(Opacity=100);
	  opacity: 1.0;
	  width: 650px;
	  height: 250px;
	  margin: -200px auto 0;
	  color: #FFFFFF;
	  }

Картинка scr1.png так должно быть в идеале только текст должен быть в верху.
Картинка scr2.png так получается если использовать маргин... ;)
Ну и архив с моим творчеством...

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

  • scr1.png
  • scr2.png

Прикрепленные файлы

  • Прикрепленный файл  www.rar   5,06К   Количество загрузок: 81

  • 0

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

Отправлено 18 апреля 2013 - 23:59

не до конца понимаю, что ты хочешь, а что тебе мешает положить content-box-repit-vertical-transparency70.jpg под все слои т.е. вот Прикрепленный файл  Desktop.rar   5,09К   Количество загрузок: 89

зы было бы неплохо, чтоб ты более яснее излагал свои мысли :)
  • 0

#19 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 19 апреля 2013 - 14:16

lordamid,
есть подозрение, что вам подойдет примерно такая структура верстки (на всякий случай: отрицательный margin-top неадекватно воспринимается в ИЕ6):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.main{
  position: relative;
  background: #999;
}
.wrapper{
  padding: 50px 50px 0 50px;
}
.content{
  position: relative;
  background: #969;
  min-height: 150px;
  //height: 150px;
  z-index: 2;
}
.top{
  position: absolute;
  width: 100%;
  height: 100px;
  background: #ccc;
  z-index: 1;
}
.bot{
  height: 100px;
  background: #666;
}
</style>
</head>
<body>
<div class="main">
  <div class="top"></div>
  <div class="wrapper"><div class="content">Dynamic content goes here</div></div>
  <div class="bot"></div>
</div>
</body>
</html>

  • 0

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

Отправлено 19 апреля 2013 - 18:09

а как быть с прозрачностью в этом случае? будет накладываться?
  • 0

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


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
albedo albedo 1-й за Май
Очков активности: 198 5 тем, 29 сообщений, 3 балла репутации
Сайт: online24news.ru
ТОП самых активных за этот месяц
  • Фотография NewBlade
    #1

    NewBlade
    Очков активности: 4.5 1 тема, 0 сообщений, 1 балл репутации

  • Фотография albedo
    #2

    albedo (online24news.ru)
    Очков активности: 1.5 Вне конкурса за определение пользователя месяца

  • Фотография NataliaAntalia
    #3

    NataliaAntalia (zdorovemedicina.ru)
    Очков активности: 1.5 0 тем, 1 сообщение, 1 балл репутации

  • Фотография gakrus1
    #4

    gakrus1
    Очков активности: 1.5 0 тем, 1 сообщение, 1 балл репутации

Поддержите форум! =)
Топ 5 участников по репутации

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