Проблемы с кодом рамки построенной с использованием z-index

marinka906090 · 03.05.2011, 17:59

Здрасте всем!
Помогите пожалуйста разобраться почему между этими двумя рамками такое большое расстояние (мне надо одну под другой в столбец таблицы ), я не знаю в чем дело.
Так же думаю, что код рамки мог бы быть и покороче.
с уважением,

Код:

<html>
<head><style type="text/css">
#reldiv1 {
    z-index: 3;
width=220; 
height: 100px;
   position: relative;
   border: 1px solid;
   padding: 10px, 10px, 30 px, 10px;
background-color: #ffffff;
  }
#reldiv2 {
  width=220; 
 height: 195px;
   position: relative;
   top: -180px;
   left: 17px;
   border: 1px solid;
   background-color: #ffffff;
  }
#reldiv3 {
      width=220; 
height: 197px;
position: relative;
top: -385px;
   left: 10px;
border: 1px solid;
   background-color: #ffffff;
   }
</style></head>
<body>
<div id="reldiv1"><img src="dsc00006.jpg" width="200" height="156"></div>
<div id="reldiv2"></div>
<div id="reldiv3"></div>
</body></html>

<html>
<head><style type="text/css">
#reldiv1 {
    z-index: 3;
width=220; 
height: 100px;
   position: relative;
   border: 1px solid;
   padding: 10px, 10px, 30 px, 10px;
background-color: #ffffff;
  }
#reldiv2 {
  width=220; 
 height: 195px;
   position: relative;
   top: -180px;
   left: 17px;
   border: 1px solid;
   background-color: #ffffff;
  }
#reldiv3 {
      width=220; 
height: 197px;
position: relative;
top: -385px;
   left: 10px;
border: 1px solid;
   background-color: #ffffff;
   }
</style></head>
<body>
<div id="reldiv1"><img src="dsc00006.jpg" width="200" height="156"></div>
<div id="reldiv2"></div>
<div id="reldiv3"></div>
</body></html>

vladendark · 04.05.2011, 11:33

Цитата:

width=220;

это что-то из черной магии, видимо.

marinka906090 · 04.05.2011, 15:05

исправила на width: 220px;
все равно не ничего не поменялось, вот вам и черная магия.
41 просмотр и никто не пишет, ребята помогите, хоть какие-то идеи выскажите, всем миром разберемся, плиз.

Niemans · 04.05.2011, 15:33

что вы в итоге хотите получить?

marinka906090 · 04.05.2011, 15:52

такие рамки одна под другой в колонку без километрового пробела между ними

Niemans · 04.05.2011, 16:14

Код HTML:

<html>
<head>
<style type="text/css">
.ramka {float: left;}
.ramka, .ramka div, .ramka img {border: 1px solid #000; padding: 2px; margin: 2px; display: block;}
</style>
</head>
<body>
<div class="ramka">
  <div>
    <img src="history.png" width="200" height="156">
  </div>
</div>
</body>
</html>

marinka906090 · 04.05.2011, 18:10

я застряла. я скопировала ваш код, но он не работает у меня, это выглядет как обычная тройная рамочка вокруг фото, а мне надо ступенчато. но все равно спасибо

Niemans · 04.05.2011, 18:59

нарисуйте как хотите, я думал вам так нужно)

marinka906090 · 05.05.2011, 05:49

нарисовать как хочу не могу,
посмотрите, пожалуйста, тут http://www.petersfamily*.narod.ru/*news.html глядный пример рамочки для фото и как они будут расположены, с моим начальным кодом рамки не распологались одна под другой, а был между ними огромный пробел почему-то (я уже поняла, что цифры "_.." дают такой эффект, но никак по другому у меня не получается)
помогите пожалуста

vladendark · 05.05.2011, 09:12

боже к чему городить огороды
<div class="ramka"><img src="foto.jpg"></div>

<style type="text/css">
.ramka{
width:200px;/*к примеру*/
height:300px;/*к примеру*/
background:#fff url(fon.jpg);
}
.ramka img{
width:185px;
height:250px;
padding:5px 10px 20px 5px;
border:0
}
</style>
размеры уже подгоните сами. fon.jpg - картинка сразу с 3-мя рамками

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Требуется разработать карту с использованием Google API	sanchez911	Вакансии	4	17.08.2011 13:02
Помогите с кодом счетчика	slax	Технологии Flash	0	03.03.2011 18:43
Помогите пожалуйста с кодом	-cRow-	ASP, Perl, PHP и MySQL	0	23.02.2011 08:59
Проблема с использованием CSS Sprites	Eugen2k	HTML, CSS, JavaScript	11	23.12.2009 19:57
Интернет проект с использованием php?	moUse_	HTML, CSS, JavaScript	9	29.12.2004 13:26

04.05.2011, 15:05	#3
marinka906090	исправила на width: 220px; все равно не ничего не поменялось, вот вам и черная магия. 41 просмотр и никто не пишет, ребята помогите, хоть какие-то идеи выскажите, всем миром разберемся, плиз.

04.05.2011, 15:33	#4
Niemans	что вы в итоге хотите получить?

04.05.2011, 15:52	#5
marinka906090	такие рамки одна под другой в колонку без километрового пробела между ними

04.05.2011, 18:10	#7
marinka906090	я застряла. я скопировала ваш код, но он не работает у меня, это выглядет как обычная тройная рамочка вокруг фото, а мне надо ступенчато. но все равно спасибо

04.05.2011, 18:59	#8
Niemans	нарисуйте как хотите, я думал вам так нужно)

05.05.2011, 05:49	#9
marinka906090	нарисовать как хочу не могу, посмотрите, пожалуйста, тут http://www.petersfamily.narod.ru/news.html глядный пример рамочки для фото и как они будут расположены, с моим начальным кодом рамки не распологались одна под другой, а был между ними огромный пробел почему-то (я уже поняла, что цифры "_.." дают такой эффект, но никак по другому у меня не получается) помогите пожалуста

05.05.2011, 09:12	#10
vladendark	боже к чему городить огороды <div class="ramka"><img src="foto.jpg"></div> <style type="text/css"> .ramka{ width:200px;/к примеру/ height:300px;/к примеру/ background:#fff url(fon.jpg); } .ramka img{ width:185px; height:250px; padding:5px 10px 20px 5px; border:0 } </style> размеры уже подгоните сами. fon.jpg - картинка сразу с 3-мя рамками

03.05.2011, 17:59
Ссылки