Отцентровать главный блок без скроллов (даже если он не влезает).

[marsh]

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

Есть блок main, внутри него есть еще блоки, которые занимают довольно много места (изначально 1680 ширина), однако далеко не у всех это влезает и появляются скроллы.

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

Убрал скроллы довольно просто:

overflow: hidden;

(для html и body).

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

Надеюсь понятно объяснил, когда был на ты с версткой, а это было давно, уже делал так, но сейчас всё позабылось, а сделать нужно срочно.

Просьба посоветовать что-то и помочь, заранее спасибо.

 

[Совенок]

Ответ: Отцентровать главный блок без скроллов (даже если он не влезает).

Ничего не понятно

Однако картинка при уменьшении окна браузера пропадает только справа

Если под картинкой имеется в виду background у main, то надо этот background просто выровнять по центру.

.main{background:url(images/bg.jpg) center top;}

 

[marsh]

Ответ: Отцентровать главный блок без скроллов (даже если он не влезает).

Под картинкой имеются ввиду вообще все содержимое страницы.

Внутри main есть блок head (пока только так), вот:

.head {
    width:1598px;
    height:668px;
    background: url('images/head.jpg') no-repeat;
    background-position: top center;
}

Все равно при уменьшении размера окна картинка пропадает только справа, в результате она получается не отцентрованной.

Полный код CSS, может надо:

body {
    padding-top:0px;
    margin-top:0px;
    background-color:#000000;
    overflow: hidden;
}

html {
    overflow: hidden;
}

.main {
    margin-left:auto;
    margin-right:auto;
    width:1598px;
    padding-top:0px;
    margin-top:0px;
    overflow: auto;
}

.head {
    width:1598px;
    height:668px;
    background: url('images/head.jpg') no-repeat;
    background-position: top center;
}

 

[Совенок]

Ответ: Отцентровать главный блок без скроллов (даже если он не влезает).

Не вижу смысла в центрировании всего содержимого страницы, особенно при overflow:hidden.
Там совсем не будет текста?
Как читать-то на маленьком разрешении?

Если очень надо, то убирайте ширину и у main, и у head - будет "обрезаться" с обеих сторон.
Если задана фиксированная ширина, или min-width определено, то страница уменьшается до этой величины, потом содержимое прижимается к левому краю и появляется прокрутка.
И overflow оставьте только для одного тега, иначе будут несуразности всякие вылазить.

 

[marsh]

Ответ: Отцентровать главный блок без скроллов (даже если он не влезает).

Смысл есть, когда текст и навигация занимает 60-70% всего макета, остальное графика, которой можно пожертвовать (но с обеих сторон), иначе крайне убого смотрится.

Убрал width только у main и все стало так, как мне нужно.

Однако есть 1 вопрос: я центрую див через margin auto, я думаю, что если явно не указать ширину при этом, то он не будет центроваться таким способом.

Исходя из этого, получаем: проблема для маленьких разрешений (<= 1680 по ширине) решена, однако как это будет смотреться на 1920? "Картинка" будет прижата к левому краю видимо, а справа будет черная пустота, то есть она не будет отцентрованна, просто не имею возможности проверить, максимально у меня 1680

Как это решить?

 

[Совенок]

Ответ: Отцентровать главный блок без скроллов (даже если он не влезает).

Делайте для смысловой части страницы отдельный див, с шириной скока-то там пикселей (800, например) и его выравнивайте с помощью {margin:0 auto;}.
А все остальные художества располагайте при помощи других инструментов.

просто не имею возможности проверить, максимально у меня 1680

ctrl+колесико меняет масштаб страницы, можно увидеть как она поведет себя на бОльшем разрешении

 

[marsh]

Ответ: Отцентровать главный блок без скроллов (даже если он не влезает).

Да, именно так и сделал с картинкой чуть поменьше, чтобы понять, вроде всё как надо, спасибо