За последние 24 часа нас посетили 62072 программиста и 1740 роботов. Сейчас ищет 851 программист ...

расположить посередине экрана

Тема в разделе "HTML и CSS", создана пользователем V-ampire, 26 фев 2012.

  1. V-ampire

    V-ampire Активный пользователь

    С нами с:
    10 фев 2012
    Сообщения:
    24
    Симпатии:
    0
    Есть страничка шириной 960рх, как сделать чтобы она располагалась посередине? просто сделать родительский для всех блок?
     
  2. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    У странички ведь есть общий контейнер? Обычно всегда есть. Вот этому контейнеру маргин авто поставить:
    Код (Text):
    1. <div style="width:960px;margin:auto;">
    2. контент страницы
    3. </div>
    Можно и боди также сделать:
    Код (Text):
    1. <body style="width:960px;margin:auto;">
    Если внутри будут контейнеры с абсолютным позиционированием, то не забыть добавить стиль
    Код (Text):
    1. position:relative;
     
  3. TrueTrue

    TrueTrue Активный пользователь

    С нами с:
    1 мар 2012
    Сообщения:
    10
    Симпатии:
    0
    Вопрос по теме:
    Задача похожая!

    Есть общий DIV container, в нём DIVшапка, DIVтело и DIVноги, по сути весь сайт,
    необходимо что бы контейнер принимал ширину окна браузера
    и разместить все дивы внутри контейнера по центру(горизонтально)

    заказчик, сам шарит, сказал, что margin не использовать, потому что он не со всеми браузерами корректно работает.

    и писать в css
    Подскажите пожалуйста решение, неполучается, замучался...
     
  4. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Не встречал проблем со стилем margin:auto; (или не помню).
    Тут написано о совместимости в разных браузерах и о проблеме в IE6:
    IE6 сделан в 2001 году к WindowsXP. По данным проекта ie6countdown сейчас его популярность в мире 7.7% (на 6% меньше, чем в прошлом году) и то за счет Китайских пользователей.
    ИМХО: только самые вредные заказчики со старой закалкой, занимающиеся спамом и ориентированные на незнаек, требуют совместимость с этим браузером.

    UPD: из страницы Вики
     
  5. TrueTrue

    TrueTrue Активный пользователь

    С нами с:
    1 мар 2012
    Сообщения:
    10
    Симпатии:
    0
    - и что же мне делать, если мне такой попался? :D
     
  6. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    TrueTrue, убедить, что он немного не прав. Никакой проблемы не будет даже если какой-то браузер не выровняет блоки по центру, т.к. юзеры с такими браузерами уже ко всему привыкли.
     
  7. TrueTrue

    TrueTrue Активный пользователь

    С нами с:
    1 мар 2012
    Сообщения:
    10
    Симпатии:
    0
    Попробую, но пока если можно подскажите вот что:

    CSS
    Код (Text):
    1. #container {height: 291px; border:10px solid red;}
    2. #header {
    3.     border:1px solid red;  
    4.     width:124;  
    5.     height: 231px;
    6.     margin-left: 10 auto;
    7. }
    HTML
    Код (Text):
    1. </head>
    2.     <body>
    3.         <div id="container">
    4.             <div id="header">
    5.  
    6.             </div>
    7.         </div>
    8.     </body>
    9. </html>
    Почему не работает этот код?

    Внутренний див, растягивается по ширине и принимает ширину внешнего?

    Нашёл на сайте: http://exsofter.ru/articles/49-css/309-align-valign-center.html этот пример, вроде сделал всё как на сайте. А не работает. :(

    Добавлено спустя 1 минуту 45 секунд:
    Сорри там margin просто без left, но всёравно не работает :(((((((

    Добавлено спустя 4 минуты 11 секунд:
    Всё, разобрался, сорри. :)
     
  8. sobachnik

    sobachnik Старожил

    С нами с:
    20 апр 2007
    Сообщения:
    3.380
    Симпатии:
    13
    Адрес:
    Дмитров, МО
    По поводу выравнивания блока по середине - можешь ещё JavaScript использовать, если заказчика margin не устраивает. Определяешь размеры viewport, определяешь размеры дива, ставишь ему абсолютное позиционирование и смещаешь на нужное расстояние с помощью left и top. Особенно легко и полностью кросс-браузерно сделать, если заранее известны размеры этого внутреннего дива, который нужно позиционировать.
    Правда, заказчик может ещё сказать, что некоторые пользователи отключают JavaScript...