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


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

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

#11 lordamid

lordamid
    Topic Starter
  • Пользователь
  • 13 сообщений
  • Репутация: 0
1

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

  • 0

#18 html-ka

html-ka
  • Пользователь
  • 455 сообщений
  • Репутация: 82

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

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

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

#19 yury

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

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


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