Вопрос по блочной верстке...

Stock · January 9, 2009

В общем нашел симпатичный *psd решил его сверстать, проблемма в том что в одной ячейки у меня шапка и блок меню....Я шапку поставил на место, а блок должен быть кусочком под шабкой, а он залезает на неё, как мне загнать блок под шапку...

ВОт так у меня(ссылка на фото хостинг!)

Так должно быть!(ссылка на фото хостинг!)

Вот такой у меня код:

index.html

<body>
<div id="bd_sait">
<div id="header">
<img class="login" src="login.png" alt="введите логин" > 
<img class="pass" src="pass.png" alt="введите пароль" >  
<img class="ok" src="ok.png" alt="OK" >
</div>
<div id="container">
<img class="h_1" src="h_1.png" alt="Личная страницы">(вот шапка)
<img class="block_1" src="block_1.png" alt="Меню">(вот блок который лезет на шапку!)
</div>
<div id="footer">
</div>
</div>

style.css

#container {
background: url(tex1.jpg) repeat-y;
width: 930px;
height: 0 auto;
margin: 0 auto;
border: 1px solid #e8e0be;
}
.h_1 {
margin: -5% 0 0 2px;
}
.block_1 {
margin: -25% 0 0 15px;
}

Думаю что не хватает каких-то тегов еще, а я их не знаю, потому что новичок еще, подскажите, желательнно с исправленными фрагментами моего кода, чтобы было понятно где и что не так! Заранее спасибо!

Edited January 9, 2009 by Stock

woofs · January 9, 2009

Можешь изображения подкрепить? Для наглядности, я посмотрю но... сам новичек))

Stock · January 9, 2009

Так по ссылкам есть изображения, кникни ссылки!

woofs · January 9, 2009

придаёшь хедеру z-index: 1; почитай про него на сайте, разберешься... но здесь с позиционированием....

Вот пример девствия Z-INDEX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Новый Документ</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head> 


<body>
<div id="container">
<div id="f"></div>
<div id="sec"></div>
<div id="free"></div>
</div>
</body>
</html>

css

#container {
width: 930px;
height: 0 auto;
margin: 0 auto;
border: 1px solid #e8e0be;
}
#f {
width: 100%;
height:150px;
background:#000099;
position:relative;    
/*!!!!!!!если придать значение z-index: 3 то перекроет все слои!!!!!!*/

}
#sec {
	width:200px;
	height:500px;
	background:#990000;
	margin-top: -50px;
	margin-left:-10px;
	z-index:2;/*слой перекроет 2 слоя*/
	position:absolute;
}
#free {
	position:absolute;
	width:100px;
	height:100px;
	z-index:1;/*перекроет один слой*/
	left: 195px;
	top: 91px;
	background:#006600;
}

Если что-то не понятно пиши.

Edited January 9, 2009 by woofs

Stock · January 9, 2009

Спасибо, все отлично, я так понил, что надо дописать было всего 2 строчки в css

z-index:2;
position:absolute;

и у меня все получилось

Sign In

Вопрос по блочной верстке...

Question

Stock

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

woofs

Link to comment

Share on other sites

Stock

Link to comment

Share on other sites

woofs

Link to comment

Share on other sites

Stock

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information