позиционирование блока

binare · January 19, 2011

моего сообщения не увидели в другой теме, потому пришлось создавать новую.

у меня три блока, но третий съехал чуть вниз, не могу понять в чём ошибка.

#block_1 {
background-color: #808080;
float: left;
width: 190px;
}

#block_2 {
background-color: #808080;
margin: 0 195px 0 195px;
width: 190px;
}

#block_3 {
background-color:#808080;
position: inherit;
float: right;
width: 190px;
}

P.S: эти три блока сидят ещё в одном. объясните в чём проблема, вёрсткой занялся недавно, потому строго не судите.

Great Rash · January 19, 2011

position: inherit;

А у родителя какой position?

binare · January 19, 2011

#wrapper {
position: relative center;
width: 600px;
margin: 0 auto;
}

#binare_header {
position: fixed; top:0;
background: url(картинко) no-repeat;
width: 600px;
height: 80px;

а вот атрибуты блока, в котором те три сидят:

#blocks {
background: #606070;
height: auto;
padding: 5px;
margin: 5px;
font: 8px Tahoma #FFF;
}

лично я нигде ошибки не увидел, и сверстал валидно, но результат не сходится с замыслом.

psywalker · January 19, 2011

#wrapper {
position: relative center;
width: 600px;
margin: 0 auto;
}

#binare_header {
position: fixed; top:0;
background: url(картинко) no-repeat;
width: 600px;
height: 80px;
а вот атрибуты блока, в котором те три сидят:
#blocks {
background: #606070;
height: auto;
padding: 5px;
margin: 5px;
font: 8px Tahoma #FFF;
}
лично я нигде ошибки не увидел

А я увидел

binare · January 19, 2011

А я увидел

валидатор тоже матерится на ошибки, исправил возможные, но он ругается на пробелы в имени, которых нет.

исправления ничего не изменили

binare · January 19, 2011

долго думал и экспериментировал. сделал вывод:

на margin браузеры реагируют по-разному, не важно какими единицами пользоваться.

изменение атрибутов родительского блока только портят вид.

эксперименты с positionне дали положительного результата.

psywalker · January 19, 2011

Вот это штука что делает? position: relative center;

binare · January 20, 2011

Вот это штука что делает? position: relative center;

честно говоря ничего толкового она не делает, испытывал всё что можно как с position так и с margin. меня интересует вертикальное позиционирование, а блок наследует атрибуты позиционирования будто с потолка.

я хоть и тормоз, но хочу понять почему этот блок съезжает вниз, откуда он берёт своё позиционирование?

Edited January 20, 2011 by binare

psywalker · January 20, 2011

Сделай мне отдельную страницу с примером и кинь ссылку.

binare · January 20, 2011

Сделай мне отдельную страницу с примером и кинь ссылку.

я не выбрал себе хостинг, могу или постом выложить код, или через файлхостинг, но это гемор.

или просто назови любой бесплатный хостинг для тестов (только не на PHP).

есть способ поставить третий блок на задуманное место, но я не хочу жертвовать валидностью вёрстки.

Great Rash · January 20, 2011

Ладно, играем в телепатов...

position: relative center;

Такого позиционирования нет в природе.

#block_1, #block_2, #block_3

В каком порядке стоят эти блоки в коде?

#wrapper, #binare_header, #blocks

Что во что вложено?

Вы вообще собираетесь нам HTML продемонстрировать или так кусками CSS и будете кидаться?

или просто назови любой бесплатный хостинг для тестов (только не на PHP)

narod.ru

binare · January 20, 2011

Ладно, играем в телепатов...
position: relative center;
Такого позиционирования нет в природе.
В каком порядке стоят эти блоки в коде?
Что во что вложено?
Вы вообще собираетесь нам HTML продемонстрировать или так кусками CSS и будете кидаться?
narod.ru

вот он HTML, знаю что немного инвалидный, не окончательная вёрстка.

!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=utf-8">
<link type="text/css" rel="stylesheet" href="styles.css">
<title>[TITLE]</title>
</head>
<body>
<div id="stat"></div>
<!-- <header> -->
<!--wrapper start -->
<div id="wrapper">
<div id="binare_header"></div>
<div id="menu">main menu</div>
<!-- </header> -->
<div id="binare_body">
<div id="blocks">
<div id="block_1">one</div>
<div id="block_2">two</div>
<div id="block_3">three</div>
</div>
<div class="clear"></div>
<div id="binare_content">[BODY]</div>
</div>
<!-- <footer> -->
<div id="binare_footer">copyright</div>
<!-- </footer> -->
</div>
<!-- wrapper end -->
</body>
</html>

вот CSS, тоже не доработан, и немного инвалиден.

body {
background-color: #1f3659;
background: url(/img/bg.png)top-center no-repeat;
font: 8px Tahoma #fff;
}
#wrapper {
width: 600px;
margin: 0 auto;
}
#binare_header {
position: fixed;
top: 0;
background: url(/img/head.png) no-repeat;
width: 600px;
height: 80px;
}
#binare_body {
margin-top: 93px;
margin-bottom: 39px;
background: #808080;
width: 600px;
height: 100%;
} 
#blocks { 
background: #606070;
height: auto;
padding: 5px;
margin: 5px;
font: 8px Tahoma #fff;
} 
#block_1 { 
background-color: #808080;
float: left;
width: 190px;
} 
#block_2 { 
background-color: #808080;
margin: 0 195px 0 195px;
width: 190px;
} 
#block_3 { 
background-color: #808080;
position: relative center;
float: right;
width: 190px;
} 
#binare_content { 
background: #606070;
margin: 5px;
padding: 5px;
font: 8px Tahoma #fff;
} 
#binare_footer { 
width: 600px;
height: 39px;
position: fixed;
bottom: 0;
background: #606070;
}

в narod.ru нет возможности редактирования вёрстки, только работа со стандартными шаблонами. гуглил - отключена мастерская.

Great Rash · January 20, 2011

в narod.ru нет возможности редактирования вёрстки, только работа со стандартными шаблонами. гуглил - отключена мастерская.

Хм, чё это они мастерскую отключили... Буквально месяц назад делал там страничку...

Блоки должны идти в таком порядке:

<div id="block_1">one</div>
<div id="block_3">three</div>
<div id="block_2">two</div>

Vlad · January 20, 2011

FTP на Народе никто не отменял, через него проще изменять файлы.

binare · January 20, 2011

для ранее созданных сайтов мастерская доступна, но не для новых.

за ответ спасибо, я что-то и не подумал о перестановке блоков, всё в CSS ошибку искал...

Протуберанец · January 20, 2011

для ранее созданных сайтов мастерская доступна, но не для новых.
за ответ спасибо, я что-то и не подумал о перестановке блоков, всё в CSS ошибку искал...

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

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