Отображение сайта в разных разрешениях.

[WoopieZ]

Побегал по форуму, но по сабжу ничего не нашел.

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

Вот так выглядит сайт при разрешении 1024х768:

А так при разрешении 1280х1024 (при этом разрешении я верстал):

Вопрос, наверное, уже все поняли. Как сделать, что бы сайт отображался одинаково хорошо во всех разрешениях?

[Great Rash]

Ссылка на сайт будет или как? Пока ответ такой: надо верстать нормально, тогда и отображаться будет нормально.

[WoopieZ]

Ссылка вот

Первую проблему решил, появилась вторая.

Картинки растягиваются на разных разрешениях. На 1024х768 все нормально (я на нем верстал), а на более высоких слишком сильно растягиваются.

[Vlad]

Да что же вы творите то! Нельзя фотки масштабировать, нельзя. Это вам сами герои на фотографиях говорят своими перекосившими лицами. Фотки должны оставаться неизменными, а при изменении ширины окна только меняется их положение.

[WoopieZ]

Значит мне нужно поменять размер изображений на то, которое мне нужно напрямую? Т.е. менять размер, к примеру, в фотошопе, а в коде писать размер изображения width 100% и height 100%?

Я правильно Вас понял?

[Vlad]

Неправильно!

В Фотошопе вы должны сделать фотки нужного вам размера и установить их в том же, родном размере, указав им, к примеру, width="300" или вообще размер не указывая. Всякие 100% для изображений их по любому растягивают. Позиция фоток у вас через абсолют сделана, для фотографий справа вместо left напишите right: 10%. Значение сами подберете. Большую фотку выровнять по центру веб-страницы. Чтобы макет сильно не разъезжался, для body добавьте min-width и max-width.

Еще просьба, не пишите "вы" с большой буквы, это безграмотно.

[WoopieZ]

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

[Vlad]

Тогда вам нужна адаптивная разметка. Вот здесь описание, что это такое.

http://sovaworks.blogspot.com/2008/01/blog-post_24.html

Но вообще, на какой диапазон разрешений вы ориентируете сайт?

Судя по статистике Рунета, пока популярными являются 1280 и 1024 по ширине, на них в первую очередь и надо ориентироваться.

http://www.liveinternet.ru/stat/ru/resolut...ru;period=month

[WoopieZ]

Как раз ориентирую от 1024х768 до 1280х1024

[Vlad]

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

[WoopieZ]

Ну хорошо, попробую сделать так. Посмотрим, что из этого выйдет.

[gordi]

Побегал по форуму, но по сабжу ничего не нашел.

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

Вот так выглядит сайт при разрешении 1024х768:

А так при разрешении 1280х1024 (при этом разрешении я верстал):

Вопрос, наверное, уже все поняли. Как сделать, что бы сайт отображался одинаково хорошо во всех разрешениях?

Делайте фиксированную разметку.

Пользователь сам сможет с помощью средств представляемых браузером, масштабировать вашу страницу.

Резиновая верстка в понимании многих это только плавающая ширина макета ограниченая по min/max width,

которая совершенно не учитывает изменение размера по вертикали.

Скажем, линейка 1280, не полная, может быть такой 1280*720, 1280*786, 1280*800, 1280*960, 1280*1024

почувствуйте разницу на крайних разрешениях - 1280*720 и 1280*1024, любая графика фиксированных размеров будет искажена,

особенно отданная через background:url(xxx.png);

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

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

Тогда вам нужна адаптивная разметка. Вот здесь описание, что это такое.

http://sovaworks.blogspot.com/2008/01/blog-post_24.html

Но вообще, на какой диапазон разрешений вы ориентируете сайт?

Судя по статистике Рунета, пока популярными являются 1280 и 1024 по ширине, на них в первую очередь и надо ориентироваться.

http://www.liveinternet.ru/stat/ru/resolut...ru;period=month

Адаптивная разметка не учитывает пропорций всех элементов web-страницы и не может служить полноценной альтернативой.

[Vlad]

gordi, не путайте человека своими пропорциями, это совсем из другой области.

[gordi]

gordi, не путайте человека своими пропорциями, это совсем из другой области.

Почему из другой?

Чем это хуже полурезины, которую вы предлагаете?

[Vlad]

Я не про фикс, это дело СТ, что ему выбрать, а про пропорции и искажение графики. Если уж на мониторе пользователя фотографии искажаются по его вине, потому что он поставил неверное разрешение, то это он дурак, а никак не разработчик.

[gordi]

Я не про фикс, это дело СТ, что ему выбрать, а про пропорции и искажение графики. Если уж на мониторе пользователя фотографии искажаются по его вине, потому что он поставил неверное разрешение, то это он дурак, а никак не разработчик.

Думаю, редко кто меняет разрешение по собственной инициативе, скорее всего оно всегда стоит по дефолту

Но к сожалению, мы не знаем какое разрешение у посетителя ресурса и то, что выглядит замечательно на 1280*800,

на 1900*1024 смотрится отвратительно и ни полурезина, ни адаптивная разметка этого исправить не может, вот в чем проблема.

Поэтому только фиксированный дизайн или переход на более высокий уровень - пропорциональный дизайн

[Vlad]

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

[gordi]

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

Спорным представляется решение, во чтобы-то нистало, делать резиновые дизайны, которые таковыми не являются

Скажем, мне как обладателю широкоформатного монитора с максимальным разрешением в районе 2000*ХХХХ,

абсолютно без разницы, если кто-то сделал дизайн, который имеет плавющую ширину для области контента в 200px

или он имеет фиксированные по ширине колонки навигации, а область контента занимает все доступное место

и в том и другом случае все будет выглядеть не пропорционально и ужасно.

Что будет происходить с графикой по background:url(...); и текстом уже писал,

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

чтобы привести ее в более или менее надлежащий вид, тогда какой смысл делать резину?

Итак, или фиксированный дизайн и масштабирование страницы средствами браузера,

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

Во втором случае только средствами html и css проблему не решить, нужен JavaScript определяющий разрешение

и подставляющий необходимые стили и графику по соотвествующее разрешение.

В общем, проблем с пропорциональным дизайном великое множество...

Размышления об этом можно было бы вынести в отдельную ветку форума,

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

если таковые найдутся и им будет, что сказать