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


Пользователь месяца
OlgaGetman OlgaGetman 1-й за Декабрь
Очков активности: 2100 10 тем, 170 сообщений, 7 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Ixman
    #1

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

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

    BLIK
    Очков активности: 165 0 тем, 22 сообщения, 5 баллов репутации

  • Фотография Андрей WPMasterKZ
    #3

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 153 Вне конкурса за определение пользователя месяца

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

    OlgaGetman
    Очков активности: 105 Вне конкурса за определение пользователя месяца

  • Фотография Cheaplinks
    #5

    Cheaplinks (cheaplinks.pro)
    Очков активности: 63 0 тем, 21 сообщение, 2 балла репутации

  • Фотография Mandarin
    #6

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

  • Фотография magnet
    #7

    magnet (rbfxdirect.com)
    Очков активности: 58.5 0 тем, 13 сообщений, 3 балла репутации

  • Фотография TimurR
    #8

    TimurR
    Очков активности: 54 Вне конкурса за определение пользователя месяца

  • Фотография Ilya74
    #9

    Ilya74
    Очков активности: 51 0 тем, 17 сообщений, 2 балла репутации

  • Фотография r0mZet
    #10

    r0mZet (rz-style.ru)
    Очков активности: 49.5 0 тем, 11 сообщений, 3 балла репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.12.2018
  • Яндекс выдача: 22.01.2019
Топ 5 участников по репутации


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

#1 lordamid

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

Отправлено 16 April 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 April 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 April 2013 - 15:48

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

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

  • Снимок2.PNG

  • 0

#4 isvetlichniy

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

Отправлено 16 April 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 April 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 April 2013 - 16:15

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

#7 lordamid

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

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

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

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

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

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

#8 fedornabilkin

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

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

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

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



#9 lordamid

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

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

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

#10 html-ka

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

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

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

#11 lordamid

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

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

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

#12 html-ka

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

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

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

#13 lordamid

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

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

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

#14 html-ka

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

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

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

#15 lordamid

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

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

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

#16 html-ka

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

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

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

#17 lordamid

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

Отправлено 18 April 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К   Количество загрузок: 79

  • 0

#18 html-ka

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

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

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

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

#19 yury

yury
  • Пользователь
  • 645 сообщений
  • Репутация: 190

Отправлено 19 April 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 April 2013 - 18:09

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

robot

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


Похожие темы

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

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