Jump to content
  • 0

Свойство CSS position

jas0n

Asked by jas0n,

 Share

Question

jas0n Explorer

jas0n

Posted
Posted (edited)

Вот здесь соответственно указывается, что значение выставляется только в писеклях. Можно ли ставить проценты? Я пробовал — не работает. Возникает вопрос как сохранить пропорциональное позиционирование элементов друг относительно друга при смене разрешения экрана?

Edited by jas0n
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
jas0n Explorer

jas0n

Posted
  • Author
Posted (edited)

Ой да, извиняюсь. Перепутал. Все дело в том, что у меня есть значение для top: -280px, но ни Файрфокс, ни Опера, не понимают отрицательного значения, когда вместо пикселей я ставлю проценты. Понимает только IE7. Как быть?

Также хотелось бы спросить вот о чём. У меня возникла проблема, когда нужно замостить бэкграудной картинкой шириной 5 пискелей и высотой 280, до правой границы экрана. Но вся проблема в том, что в в Файрфрксе до границы экрана остаётся 14 писеелей, у IE — 10, а у Оперы — 13. Етественно нужно брать наименьшее значение, чтобы не вылазила горизонатальная полоса прокрутки. Но ведь в ФФ и Опере останутся зазоры в 3 и 2 пикселя соотв-но, мелочь, а не приятно. Что в этом случае можете посоветовать?

Edited by jas0n
Link to comment
Share on other sites
  • 0
Vlad Explorer

Vlad

Posted
Posted

Проценты вычисляются от родителя, а если его нет, то браузер не понимает, что означает 50%. От какого значения половину считать?

Почему в браузерах разный размер получается?

Link to comment
Share on other sites
  • 0
jas0n Explorer

jas0n

Posted
  • Author
Posted (edited)

Если слой вложен внутрь структуры <body></body>, то позиция элемента при абсолютном позиционировании будет остчитываться от 0,0 левого верхнего края браузера, так? Если уже внтури слоя какие-то дочерные элементы, тогда позиция будет рассчитываться от координат родительского элемента, как я это понимаю. Так почему же так поносимый IE понимает свойство: -(значение)% слоя вложенного в <body></body>, который должен рассчитываться от 0,0, а Лиса с Оперой нет?

Что касается зазоров. То прина в следующем. В каждом из треёх браузеров размер рабочего поля различен, а выражается это в том, что если при абсолютном позиционировании рамещать слои с изображениями от 0,0, то в IE зазора нету, в ФФ — он 3 пикселя, в Опере — 2. Одна и та же страница с одним тем же CSS-листом, открыта 3-мя разными браузерами Я сделал скриншоты.

Файрфокс (зазор 3 писеля):

L5WtUgYE1K.png

Ослик (зазаора нет):

VVOpW4k3ln.png

Опера (зазор 2 писеля):

5X8u4T4uVy.png

Меня беспокоит такой момент. Как написать CSS-код так (или в связке с XTML) чтобы нужная мне картинка мостилась только до полосы прокрутки (т.е. до границы экрана). Более того это мне важно, т.к. при увеличении разрешения экрана я справа получу соотв-но большой белый осттуп, который нужно точно таким же образом замостить. Хочется по возможности сделать универсальный код.

Edited by jas0n
Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted (edited)

Некоторые браузеры по умолчанию для body ставят отступы. В CSS такой код должен помочь.

body {
  background: url("fon.jpg") 0px 0px repeat-x #1B1C3A;
  padding: 0; 
  margin: 0;
}

Про описание фона для элементов в CSS следует читать тут.

Про размножение рисунка фона следует прочесть здесь.

Вообще этот справочник по html и css очень хороший. Просто пройдитесь по тэгам и свойствам, почитайте, найдете много полезного.

Edited by Searcher
Link to comment
Share on other sites
  • 0
jas0n Explorer

jas0n

Posted
  • Author
Posted

Про padding: 0 и margin: 0 я знаю, у меня это правило первым в CSS-листе стоит =) Что касается справочной информации, то ваши старания были излишними, я сам неплохо ориентируюсь на сайте, благо XTML-теги и CSS-свойства наглядно представлены на главной странице. Ваш код для меня не подходит, т.к. мне не нужно мостить весь фон, а только фон отстоящий вправо от верхнего слоя выстой в 280px, причём сделать это только до правой границы экрана. Спасибо за помощь.

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted (edited)

1. Выложите код, чтобы не было напрасных стараний.

2. Может я что-то не понимаю... Вы делаете страницу под какое-то конкретное разрешение или конкретный размер окна браузера? Тогда это очень странно... Разрешение экрана у всех разное, браузер можно раскрывать не на все окно и т.п.

3. Зачем отрицательные проценты совершенно непонятно, возможно Вашу задачу можно решить другим способом.

4. Что там у Вас в верхнем блоке? Если рисунок - одно решение, если текст - другое.

Замостить можно как угодно если использовать плавающие наложенные друг на друга блоки с бэкграундом и разным z-index. Подложите блок с фоном, которым нужно замостить, под верхний блок.

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

Вообще вариантов много. Честно говоря совершенно не понятна первоначальная задача и причины, того что там у Вас происходит. Дайте больше информации. Ссылку на сайт или код html и css.

Edited by Searcher
Link to comment
Share on other sites
  • 0
jas0n Explorer

jas0n

Posted
  • Author
Posted (edited)

Может я что-то не понимаю... Вы делаете страницу под какое-то конкретное разрешение или конкретный размер окна браузера? Тогда это очень странно... Разрешение экрана у всех разное, браузер можно раскрывать не на все окно и т.п

Естественно я не ставил задачи сверстать страницу под какое-то конкретное разрешение, это совершенно не рационально, бессмысленно.

Зачем отрицательные проценты совершенно непонятно, возможно Вашу задачу можно решить другим способом

На данный момент проблема отрицательных процентов не стоит, меня в общем техническом смысле волнует проблема: почему ФФ и Опера не понимают отрицательных процентов.

Что там у Вас в верхнем блоке? Если рисунок - одно решение, если текст - другое

У меня в верхнем блоке изображение, это, вполне можно было заметить по выложенным мной выше скриншотам.

Замостить можно как угодно если использовать плавающие наложенные друг на друга блоки с бэкграундом и разным z-index. Подложите блок с фоном, которым нужно замостить, под верхний блок

Я именно так и делал. Но всё дело в том, что при абсолютном позиционировании у каждого браузера своя граница окна (до полосы прокрутки), тем более когда увеличивается разрешение.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

Edited by jas0n
Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

Рад был помочь! )

Но вот про границу окна я так и не понял... Откуда у Вас она берется. У меня не возникало таких проблем, всегда помогали margin и padding. Может так еще попробовать:

body, html {
  padding: 0; 
  margin: 0;
}

Link to comment
Share on other sites
  • 0
jas0n Explorer

jas0n

Posted
  • Author
Posted (edited)
Не дает мне покоя этот отступ от границы окна ))А если указываете координаты заголовка от правого верхнего угла (top: 0; right:0;), отступ тоже есть?

Вы видимо несколько меня не допоняли. Слева всё «по нулям», т.е. слой чётко начинается от самой границы в верху окна браузера. Раньше отступ был, но body {margin: 0} эту проблему исправил. Пробелема (которую я исправил мощением фоновой картинки) существует в том, что справа до границы прокрутки в пикселях размер страницы разный.

Ну вот смотрите. Если уже хотите точных данных данных. У меня три слоя, в каждом из них по картинке. Слои начинаются соотв-но с 0,0 левого верхнего края как и положено. Подстраивал я размер самой крайней картинки под IE, т.к. лучше иметь недобор с краю, чем горизонатальную полосу прокрутки, не так ли? Так вот общая ширина 3-х картинок находящихся в слоях (больше кроме этих картинок в слоях ничего не находится, т.е. их размеры совпадают с размерами картинок) 1003 пикселя. При таком размере в IE ширина идёт «в край» т.е. до самой полосы прокрутки, пиксель в пиксель. Горизонатальной прокрутки естественно нет. Но, в ФФ остаётся зазор, в 4 пикселя до края страницы, до полосы прокрутки, в Опере — 3 пикеля. Т.е., как видите, размер рабочей области у всех браузеров разный.

Edited by jas0n
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
Go to question listing
×
×
  • 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

  I accept