X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как слой <div> выровнить по середине
Orfei
Orfei
Topic Starter сообщение 26.8.2015, 17:17; Ответить: Orfei
Сообщение #1


Собирал сайт на ноуте где разрешение экрана 1360х768. Выравнивал строго прописывая отступы. При попытке открыть сайт на компе где вместо монитора стоит телевизор с разрешением 1920х1080, оказалось что весь сайт смещен влево. и даже картинка фона сползла влево!
Собственно от туда и вопрос: как выровнить слой по середине экрана независимо от разрешения экрана!
Для примера, как выглядят сейчас мои слои:
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Новая страница 1</title>
</head>

<body>

<div style="position: absolute; width: 470px; height: 348px; z-index: 1; left: 66px; top: 17px" id="layer1">
<img border="0" src="file:///C:/Users/Ogriv/rabstol_net_despicable_me_09.jpg" width="670" height="419"></div>

</body>

</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Дмитрий (Минск)
Дмитрий (Минск)
сообщение 27.8.2015, 18:03; Ответить: Дмитрий (Минск)
Сообщение #2


у вас ширина img больше чем ширина div-родителя, это первое. Второе, вы абсолютно позиционируете блок с позицией слева в 66px.
Вариантов решения масса, чтобы натолкнуть вас на мысль, сделайте: уберите ширину у div или уравняйте с шириной img, замените position: absolute на relative и уберите left, допишите margin: 0 auto.
Если вам по макету нужен absolute, то заменяете left на 50%; и добавляете margin-left: -235px;, где 235 - это ширина контейнера родителя.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arks
Arks
сообщение 27.8.2015, 23:52; Ответить: Arks
Сообщение #3


(' post='191905 @ 27.8.2015, 20:03)
Если вам по макету нужен absolute, то заменяете left на 50%; и добавляете margin-left: -235px;, где 235 - это ширина контейнера родителя.

так делать категорически нельзя и вас за такие советы надо на кол сажать(в виртуальном смысле конечно). Дело в том что chromium-based браузер будет вынужден двигать огромные растры после расчета ширины и рендеринга. Визуально это может быть при современных мощностях даже и незаметно(хотя порой заметно) - но браузер это не оптимизирует Вы этими инструкциями прям как бы говорите ему "мучайся"
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 28.8.2015, 0:01; Ответить: Degradator
Сообщение #4


задать left: 50% и margin-left: -(половина ширины)px единственное известное мне решение по выравниванию по центру блока с позишн абсолют. И да, браузеру немного пофиг на это в силу современного железа.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Дмитрий (Минск)
Дмитрий (Минск)
сообщение 28.8.2015, 10:11; Ответить: Дмитрий (Минск)
Сообщение #5


(Arks @ 28.8.2015, 01:52) *
так делать категорически нельзя и вас за такие советы надо на кол сажать(в виртуальном смысле конечно). Дело в том что chromium-based браузер будет вынужден двигать огромные растры после расчета ширины и рендеринга. Визуально это может быть при современных мощностях даже и незаметно(хотя порой заметно) - но браузер это не оптимизирует Вы этими инструкциями прям как бы говорите ему "мучайся"


предложите ему свой вариант с абсолютом, любой может сказать плохо, а предложить лучшее не может
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arks
Arks
сообщение 29.8.2015, 19:39; Ответить: Arks
Сообщение #6


Почти все что относится к макету когда Вы уже заранее знаете что выводите - можно сверстать без абсолюта исключительно с static и relative - я к этому вообще-то. Насчет попапов(когда пользователь может динамически менять ширину окна уже много раз перед вызовом попапа) пожалуй самый простой способ это абсолют(а еще лучше fixed) как Вы описали - но для макетов которые "открывают" сайт это полный БРЕЕЕД!
Что тут предложить и почему я должен предлагать вариант с абсолютом когда я предлагаю исключительно любые варианты без оного!
Пока наилучший способ это flex-box (display: flex) но его еще не приняли как стандарт браузеры. http://www.w3.org/TR/css3-flexbox/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Дмитрий (Минск)
Дмитрий (Минск)
сообщение 31.8.2015, 11:39; Ответить: Дмитрий (Минск)
Сообщение #7


согласен что вариант без абсолюта - самый лучший, но когда задается конкретный вопрос, с конкретной реализацией, то ответ дается к имеющемуся варианту. Какая-то пустая беседа получается, думаю лучше не оффтопить. А привести можно тысячу вариантов и потом сказать, ну их использовать нельзя потому как имеются ограничения в поддержке, отображении и тд и тп, только наврятли это поможет тс :rolleyes:

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Где и как обменять Приват24 на ЮМоней?
20 Wolfhound 616 Вчера, 18:48
автор: mspcontent
Открытая тема (нет новых ответов) Как заработать на аккаунтах?
14 Wolfhound 367 Вчера, 0:47
автор: MorKer
Открытая тема (нет новых ответов) В Госдуме предложили разблокировать Instagram**, так как соцсеть стала себя «хорошо вести»
19 VinogradOFF 2997 27.1.2023, 23:57
автор: Liudmila
Открытая тема (нет новых ответов) Как умудряются конвертить Popundrr и Clickunder трафик?
3 Boymaster 420 27.1.2023, 15:59
автор: anisa_1
Горячая тема (нет новых ответов) Атака клонов! Или как бороться с мультиаккаунтами.
157 Pelican_Program 61283 27.1.2023, 13:05
автор: Pelican_Program


 



RSS Текстовая версия Сейчас: 29.1.2023, 16:51
Дизайн