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



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

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

#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. Html верстка на конкретном примере
  2. Как правильно разбить макет на блоки для div верстки
  3. Наложение картинки на картинку?
  4. Проблема вёрстки адаптивной страницы на divах
  5. Ширина блока div относительно размера страницы

#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 AcidPrice

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

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

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

#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 AcidPrice

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

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

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

#6 Matt

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

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

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

#7 AcidPrice

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

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

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

#8 surfer

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

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

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

#9 AcidPrice

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

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

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

#10 gaaarfild

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

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

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

robot

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


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