Jump to content
  • 0

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


Lobo
 Share

Question

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

Вставляю этот с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. изображение вставил для примера, то что под руку попалось:D

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

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

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

Да точно .

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

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

Link to comment
Share on other sites

  • 0
<!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>

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

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

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

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

+ свойство position: absolute; top:0;
Link to comment
Share on other sites

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

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

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

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

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

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

left: 600px;

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

...Ну тогда это
+ свойство position: absolute; top:0;

В этом случае изображение рассполагается слева, что тоже не нужно. :D

Link to comment
Share on other sites

  • 0

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;
}

Link to comment
Share on other sites

  • 0

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

Помогите разобраться с 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 by Master Belka
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy