позиционирование

Lobo · July 31, 2008

Здравтсвуйте.

Вставляю этот сss код :

.shef { 
	position: absolute;
	top:0;
	left: 600px;
}

html код:

<div class="shef"><img src="images/shef.jpg" alt="shef" width="160" height="220"/>
</div>

Все нормально пока не уменьшил окно браузера , это (все вроде ок) до уменьшения окна браузера :

http://smages.com/30/db/30db8bba757aedbdb7...4f24948.png.htm

а это после уменьшения окна браузера:

http://smages.com/cf/b3/cfb3e2283558117ba6...9258933.png.htm

Изображение не смещается а остается на месте .

Объясните пожалуйста , в чем может быть причина?!

Спасибо.

P.S. изображение вставил для примера, то что под руку попалось

rus · July 31, 2008

А куда оно должно смещаться?

Вы же ему дали отступ от левого края 600 px!

Lobo · July 31, 2008

А куда оно должно смещаться?
Вы же ему дали отступ от левого края 600 px!

Да точно .

А ведь если уберу отступ изображение не будет же занимать то место которое мне нужно(в центре)

Скажите пожалуйста как тогда быть , как его (изображение) разместить по центру да и к тому же что бы после уменьшения окна , оно (изображение) то же смещалось, т.е. оставалось на своем месте?!

rus · July 31, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<style>
.shef{
text-align:center;
)
</style>
</head>

<body>
<div class="shef"><img src="images/shef.jpg" alt="shef" width="160" height="220"/>
</div>
</body>
</html>

Lobo · July 31, 2008

Спасибо но после этого как это прописал, изображение встало в середине браузера.

А мне надо что бы оно (изображение) рассположилось ни в центре браузера а в центре шапки.

rus · July 31, 2008

Спасибо но после этого как это прописал, изображение встало в середине браузера.
А мне надо что бы оно (изображение) рассположилось ни в центре браузера а в центре шапки.

Истолковывайте правильно свои вопросы, а то задача неясна!

Добавьте св-во vertical-align:top;

Или вам нужно чтобы рисунок поверх всего был? Ну тогда это

+ свойство position: absolute; top:0;

Lobo · July 31, 2008

Добавьте св-во vertical-align:top;

Добавил, но после этого, изображение рассположилось слева по середине браузера.

...Или вам нужно чтобы рисунок поверх всего был?

Нужно что бы изображение рассположилось по середине шапки вот как здесь:

http://smages.com/30/db/30db8bba757aedbdb7...4f24948.png.htm

т.е .position: absolute; top:0;

left: 600px;

но это нормально смотрится пока не уменьшится окно...

...Ну тогда это
+ свойство position: absolute; top:0;
В этом случае изображение рассполагается слева, что тоже не нужно.

rus · July 31, 2008

ссылку на страничку пожалуйста, или код..., а так я не телепат.

Lobo · July 31, 2008

rus , я только начал верстать поэтому может это пока каша.

html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset= UTF-8" />
<title>редизайн</title>
<meta name="description" content=""/>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="container">
<div id="header">
<h1>Заголовок</h1>
<h2>описание</h2>
</div>
<div class="shef"><img src="images/shef.jpg" alt="шеф повар с салатом" width="160" height="220"/>
</div>
<div class="note"><img src="images/doska.jpg" alt="доска с овощами" width="200" height="195"/>
</div>
<div id="linkbar">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">главная</a></li>
<li><a href="frut.html">контакты</a></li>
<li><a href="frt1.html">вторая страница</a></li>
</ul>
</div>
</div>
<div id="left">
<div id="sub_left">
<h3>левая колонка</h3>
<p></p>
</div>
<div id="sub_right">
<h3>правая колонка</h3>
<p></p>
</div>
<div id="sub_content">
<h3>средняя колонка</h3>
<p></p>
</div>
<a class="pushLink" href="index.html">[ <span>на главную</span> ]</a>
<div id="footer">©2008<br/>домашняя коллекция
</div>
</div>
</div>
</body>
</html>

css :

* {margin: 0px;
   padding: 0px;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	background-image: url(images/shadow_left.jpg);
	background-repeat: no-repeat;
	position: relative;
}
#container {
	font-size: 1.2em;
	margin-left: 20px;
}
#left {
		margin-right: 221px;
}
.shef { 
	position: absolute;
	top:0;
   }
.note { 
	position: absolute;
	top:0;
	right:0;
}
div.expandable_note_box {
	width: 210px;
	min-height: 100px;
	background-image: url(images/top.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	padding-top: 20px;
	font-size: 100%;
	font-weight: normal;
}
div.expandable_note_box div.middle {
	width: 210px;
	background-image: url(images/middle.jpg);
	background-position: center;
	background-repeat: repeat-y;
}
div.expandable_note_box div.inside {
	padding-left: 20px;
	width: 167px;
	}
#sub_left {margin-left: 10px;
	width: 30.3%;
	float: left;
}
#sub_right {
	width: 30.3%;
	float: right;
}
#sub_content {
	margin-left: 33.4%;
	margin-right: 33.4%}	
#header {
	height: 206px;

}
#linkbar {
	background-image: url(images/linkbar_bg.jpg);
	background-repeat: repeat-x;
	height: 43px;
}
#navcontainer ul
{
	background-color: #036;
	float: right;
	width: 100%;
	font-family: arial, helvetica, sans-serif;
	background-image: url(images/linkbar_bg.jpg);
	background-repeat: repeat-x;
	height: 20px;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
	padding: 16px 20px 0px 10px;
	color: #fff;
	text-decoration: none;
	float: right;
	font-weight: bold;
}
#navcontainer ul li a:hover
{
	background-image: url(images/hover_link_bg.jpg);
	background-repeat: repeat-x;
	height: 22px;
	color: #FFF;
	font-weight: bold;
}
h1 {
	font-size: 3.4em;
	padding-top: 30px;
	padding-left: 350px;
	color: #FEB01C;
	font-style: italic;
	font-weight: bold;
}
h2 {
	font-size: 1.6em;
	padding-left: 820px;
	color: #FEB01C;
	font-style: italic;
	font-weight: bold;
}
h3 {
	font-size: 1.6em;
	margin-bottom: 10px;
	margin-left: 15px;
	color: #940;
}
.navcontainer {
	width: 190px;
	height: 500px;
	padding-top: 4px;
}
.navcontainer ul
{
	list-style-type: none;
	margin-left: 4px;
}
.navcontainer a
{
	display: block;
	padding: 3px;
	width: 160px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #eee;
	color: #940;
}
.navcontainer a:link, #navlist a:visited
{
	text-decoration: none;
}
.navcontainer a:hover
{
	background-color: #fdb01b;
	color: #fff;
}
a.pushLink { clear: both;
	float:right;
	padding: 0 3px; 
	font-weight: bold; 
	text-decoration: none; 
}
a:hover.pushLink { 
	padding: 0; 
}
a:hover.pushLink span { 
	margin: 0 3px; color: red; 
}
#footer {
	clear: both;
	padding: 10px;
	text-align: center;
	border-top: 1px solid #CCCCCC;
}

rus · July 31, 2008

единственное что пришло на ум так это вот изменение этих двух id:

#container {
	position:absolute;
	font-size: 1.2em;
	margin-left: 20px;
}

и

#header {
	position:relative;
	height: 206px;

}

Более ни чем помочь не могу.

Lobo · August 1, 2008

единственное что пришло на ум так это вот изменение этих двух id:
.

rus, не работает особенно если делаю:container position:absolute;.

Спасибо за уделенное внимание.

Пока.

Master Belka · October 15, 2008

Здравствуйте!

Помогите разобраться с position! Структура страницы такая:


<div></div>
<div></div>

<div absolute> </div>                  /* 0 */

<div relative>                         /* 1 */
  <div absolute> </div>                /* 2 */
  <div relative>                       /* 3 */
    <div> </div> /* кстати, так можно делать с точки зрения грамотности написания кода? в позиционные divы вставляю простые divы */
    <div> </div>
    <div> </div>
    <div> </div>
  </div>
</div>

дальше у меня идет простой div, который наезжает на /* 1 */ приблизительно на 20-30px и отображается под /* 1 */. Почему так происходит?

Когда используешь float, то применяешь clear:left, а есть ли что-то подобное у position?

Edited October 16, 2008 by Master Belka

Elendor · October 15, 2008

не буду помогать пока не обернете свой код в тег code

Edited October 15, 2008 by Elendor

Master Belka · October 22, 2008

Можно ли и как после позиционных дивов использовать простые дивы (без применения position) ? При этом нужно чтобы простой див не наезжал на позиционный, а шел четко под ним (какбуд-то позионных дивов и нет вовсе). Если нет, то чем позиционный способ отличается от float, если float имеет параметр clear, а position - нет. Смысл использовать тогда position, если надо сделать две или три колонки + какое-то количество строк в этих колонках.

yuri201 · October 29, 2008

Как вообще расположить DIV относительно другого DIV на 10 пикселов вправо и на 20 пикселов вниз?

Master Belka · November 16, 2008

Как вообще расположить DIV относительно другого DIV на 10 пикселов вправо и на 20 пикселов вниз?

Вот тут можно посмотреть http://www.htmlbook.ru/content/?id=98

Положительные значения параметра left сдвигают слой вправо, отрицательные ? влево. С параметром right дело обстоит наоборот, положительные значения этого атрибута смещают слой влево, а отрицательные ? вправо. Аналогичная ситуация и с парой top/bottom. Значения со знаком минус параметра top поднимают слой вверх, а положительные значения опускают слой вниз. Аргумент bottom же действует с точностью наоборот.

Sign In

позиционирование

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information