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



  • Закрытая тема Тема закрыта

При наложении div блоков, появляется рамочка

#1

Поделиться сообщением #1



AcidPrice

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

Отправлено 29 Июнь 2010 - 09:54

Вот ради тренировки так сказать, решил я склепать обычную страничку. Естественно решил все раполагать div блоками, все было хорошо, пока не приспичило мне украсить центральный контентовый блок разными картиночками, так как я совсем не профи, решил все картиночки опять засунуть в div блоки и размещать их параметром
z-index. Вот тогда то и при наложении блоков друг на друга появилась эта непонятная рамочка.
Изображение
Выслушаю ваши советы по коду, где было бы лучше по другому, где вообще руки из попы. В общем страждуще ищу помощи)) И спасибо админу что снял запрет на необходимость 10 сообщений)
<html>
<head>
<title>
Abstact
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<div id="head">
</div>
<div id="left">
</div>
<div id="content">
<div id="flower">
</div>
</div>
</head>
<body>
<div id="bottom">
</div>
</body>
</html>

* {
margin: 0;
padding: 0;
}
#head {
float: left;
background: black url(top.jpg) no-repeat left top;
height: 285px;
width: 100%;
border-width: 0px;
}
#left {
float: left;
background: black url(left.jpg) no-repeat;
height: 1295px;
width: 286px;
}
body {
background-color: black;
}
#bottom {
float: left;
background: black url(bottom.jpg) no-repeat left bottom;
height: 428px;
width: 100%;
}
#content {
border-width: 1px;
border-style: solid;
border-color: #291d0d;
position: absolute;
top: 285px;
left: 285px;
background: #140f09;
height: 1300px;
width: 70%;
z-index: 1;
}
#flower {
	float: left;
	background: url(flower.jpg) no-repeat;
	height: 153px;
	width: 176px;
	z-index: 2;
}

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Плавное открытие/скрытие блоков
  2. Помогите с расположением блоков на сайте
  3. Помогите сверстать "рамку" для картинки
  4. Html верстка на конкретном примере
  5. Как правильно разбить макет на блоки для div верстки

#2

Поделиться сообщением #2



Matt

Matt
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 29 Июнь 2010 - 10:09

У вас в стиле блока content прописана рамка (border):

#content {
border-width: 1px;
border-style: solid;
border-color: #291d0d;
position: absolute;
top: 285px;
left: 285px;
background: #140f09;
height: 1300px;
width: 70%;
z-index: 1;
}
Просто уберите её (напишите 0 px или цвет сделайте как у фона)
  • 0

#3

Поделиться сообщением #3



AcidPrice

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

Отправлено 29 Июнь 2010 - 10:29

Дак в блоке #content мне и нужна рамка, а вот в блоке #flower - нет. Если я к примеру напишу в блоке flower рамку, то их станет каким-то образом две) Я ж на картинке показал расположение всех блоков)
  • 0

#4

Поделиться сообщением #4



admin

admin
  • Пользователь PRO
  • 5 275 сообщений
  • Репутация: 55

Отправлено 29 Июнь 2010 - 10:36

#flower {
	float: left;
	background: url(flower.jpg) no-repeat;
	height: 153px;
	width: 176px;
	z-index: 2;
}
У вас прописана картинка, а её нет. Думаю поэтому и рамка появляется или у меня руки от туда же :blink:
  • 0

#5

Поделиться сообщением #5



AcidPrice

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

Отправлено 29 Июнь 2010 - 10:43

Ахах, нет. Картинка есть, и прекрасно отображается
Изображение
Это можно убедиться на первом скрине, без нее был бы просто коричневый блок #content в рамочке :blink:
  • 0

#6

Поделиться сообщением #6



Matt

Matt
  • Неактивные
  • 774 сообщений
  • Репутация: 2

Отправлено 29 Июнь 2010 - 10:44

Может она наследуется как раз от блока content? Вот бы страничку глянуть, есть проги, которые показывают, что от чего зависит и откуда появляется.
  • 0

#7

Поделиться сообщением #7



AcidPrice

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

Отправлено 29 Июнь 2010 - 10:54

Не должно быть, я ведь сначала content поставил, никакой рамочки небыло. Добивил flower и вот появилась. Но все же вот ссыль на страничку Не удивляйтесь ее кривости :blink: Делал под свой монитор))
  • 0

#8

Поделиться сообщением #8



surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 29 Июнь 2010 - 11:39

картинки прикрепи вечером гляну, отображается во всех браузерах? какой доктайп?
  • 0

#9

Поделиться сообщением #9



AcidPrice

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

Отправлено 29 Июнь 2010 - 11:47

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

#10

Поделиться сообщением #10



gaaarfild

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

Отправлено 29 Июнь 2010 - 15:26

А для чего z-index, не поделишься секретом?
У тебя же не абсолютное позиционирование. z-index - это слои.
Попробуй убрать их.
  • 0

robot

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


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