Jump to content
  • 0
Sign in to follow this  
Екатерина Косилова

Статичный экран на всех мониторах

Question

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

Подскажите, пожалуйста, возможно ли такое...

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

Если монитор большой, блок статичный. Но если монитор маленький, нужно проскролить вниз, чтобы увидеть весь сайт (что логично). Есть ли какой-то плагин или секретная фишка, как сделать блок без прокруток на всех мониторах?

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0
11 минуту назад, Екатерина Косилова сказал:

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

Подскажите, пожалуйста, возможно ли такое...

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

Если монитор большой, блок статичный. Но если монитор маленький, нужно проскролить вниз, чтобы увидеть весь сайт (что логично). Есть ли какой-то плагин или секретная фишка, как сделать блок без прокруток на всех мониторах?

Сделайте высоту сайта по размеру самого маленького монитора

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
23 минуты назад, Павел Хомерики сказал:

Сделайте высоту сайта по размеру самого маленького монитора

Я сделала минимальную высоту (если это оно) 437.

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

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0
1 час назад, Екатерина Косилова сказал:

Я сделала минимальную высоту (если это оно) 437.

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

Share this post


Link to post
  • 0
8 часов назад, Павел Хомерики сказал:

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

Ну да.. Так-то я согласна в вами) Ладно, пошла разбираться, спасибо :)

Share this post


Link to post
  • 0

Павел, а можете в целом разнести мой сайт, чтобы я лучше понимала ошибки?

Ну то есть я вижу, что плохо, но базы не хватает. Можете хотя бы просто какие-то общие косяки назвать, а там я уже попробую сама вникнуть.

Share this post


Link to post
  • 0
7 часов назад, Екатерина Косилова сказал:

Павел, а можете в целом разнести мой сайт, чтобы я лучше понимала ошибки?

Ну то есть я вижу, что плохо, но базы не хватает. Можете хотя бы просто какие-то общие косяки назвать, а там я уже попробую сама вникнуть.

1) Избавьтесь от всего лишнего. Две кнопки с формами на одноэкранной странице - это перебор. К тому же, ничего нельзя размещать справа, за пределами холста, даже целевое окно лайт бокса. Размещайте все технические элементы только слева.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

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

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

3) Одноэкранный сайт, таким как вы его хотите сделать, имеет ограничения по расположению контента. Поэтому компоновка с рэндомно расположенными кнопками и дизайнерскими прямоугольниками с полуобводкой, не подойдет. Их надо вообще убрать.  Это подходит только для статичной страницы.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Примечание. Всегда надо помнить о технической оптимизации - чем больше объектов, тем больше кода, чем больше кода тем медленнее сайт и тем больше вероятности возникновения конфликтов в css. Поэтому, любой объект надо упрощать на сколько возможно. И при этом вы получите более качетвенные объекты во всех отношениях, как с точки зрения технической оптимизации, так и внешний вид.  Муза это не фотошоп - всегда это помните.
Например, ваши кнопки. Они состоят из двух объектов - прямоугольника и текстового фрейма, хотя достаточно только текстового фрейма. Таким образом избавляемся от лишнего HTML и CSS в конечном коде.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Еще момент по этим кнопкам. Непонятно для каких глаз вы их сделали. Шрифт настолько мелкий что надо сильно напрягаться что бы его прочитать. Это бессмысленно и будет только раздражать пользователя. Минимальный комфортный размер для десктопа 12px. комфортный 14px. Для моб. устройств 14px; 18px.

4) Почему у вас пол экрана белого цвета: Прямоугольник не может растягиваться по высоте, а сама страница растягивается под экраны. Поэтому всё работает как и ожидалось - прямоугольник имеет высоту 438px, таким и остается на любом экране.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

5) Почему все эти кнопки внизу.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

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

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

______________________________________________________________

Решения:
Новый сайт, фиксированная ширина, 1200. (никогда не используйте начальный размер , в вашем случае 1280, равный какому либо разрешению, потому что реальный размер всегда меньше.)

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./applications/core/interface/imageproxy/imageproxy.php?img=http://dl3.joxi.net/drive/2017/03/03/0008/0401/545169/69/12427aa1e6.png&key=5f7cab5957c7cb28c550ec7f20591d727005d8184a30e636818dcd726404c696" />

Как сделать, что бы страница была с фоном во весь экран и растягивалась на любых мониторах?

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

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Заливаем в Музе браузер.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Заголовок надо разделить на заголовок и подзаголовок, поработать над размерами шрифта. (над содержанием УТП я бы еще поработал но сейчас не об этом).

Скопировал вашу композицию и обнаружил что в триггере куча мусора.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Привел в порядок. Ну и собственно всё готово.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Смотрим в браузере.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Всё хорошо, но было бы лучше, если бы контент центровался в зависимости от экрана.

Берем кнопку состояния, очищаем от всего и помещаем весь контент в нее. Добавляем CSS код. Сейчас не буду в него вникать, но без кода или стороннего Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Получили статичный сайт который будет отображаться отлично на всех экранах больше 1200 px. Адаптация  - это уже совсем другая история ;).
 

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0

Павел, вы себе не представляете, как я вам благодарна!

Не ожидала такого подробного и полезного разбора :) Спасибо вам огромное!!

Я вот нашла еще страницу, как отключить любую прокрутку Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

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

Еще раз спасибо за разбор!

2 часа назад, Павел Хомерики сказал:

1) Избавьтесь от всего лишнего. Две кнопки с формами на одноэкранной странице - это перебор. К тому же, ничего нельзя размещать справа, за пределами холста, даже целевое окно лайт бокса. Размещайте все технические элементы только слева.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

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

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

3) Одноэкранный сайт, таким как вы его хотите сделать, имеет ограничения по расположению контента. Поэтому компоновка с рэндомно расположенными кнопками и дизайнерскими прямоугольниками с полуобводкой, не подойдет. Их надо вообще убрать.  Это подходит только для статичной страницы.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Примечание. Всегда надо помнить о технической оптимизации - чем больше объектов, тем больше кода, чем больше кода тем медленнее сайт и тем больше вероятности возникновения конфликтов в css. Поэтому, любой объект надо упрощать на сколько возможно. И при этом вы получите более качетвенные объекты во всех отношениях, как с точки зрения технической оптимизации, так и внешний вид.  Муза это не фотошоп - всегда это помните.
Например, ваши кнопки. Они состоят из двух объектов - прямоугольника и текстового фрейма, хотя достаточно только текстового фрейма. Таким образом избавляемся от лишнего HTML и CSS в конечном коде.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Еще момент по этим кнопкам. Непонятно для каких глаз вы их сделали. Шрифт настолько мелкий что надо сильно напрягаться что бы его прочитать. Это бессмысленно и будет только раздражать пользователя. Минимальный комфортный размер для десктопа 12px. комфортный 14px. Для моб. устройств 14px; 18px.

4) Почему у вас пол экрана белого цвета: Прямоугольник не может растягиваться по высоте, а сама страница растягивается под экраны. Поэтому всё работает как и ожидалось - прямоугольник имеет высоту 438px, таким и остается на любом экране.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

5) Почему все эти кнопки внизу.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

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

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

______________________________________________________________

Решения:
Новый сайт, фиксированная ширина, 1200. (никогда не используйте начальный размер , в вашем случае 1280, равный какому либо разрешению, потому что реальный размер всегда меньше.)

12427aa1e6.png

Как сделать, что бы страница была с фоном во весь экран и растягивалась на любых мониторах?

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

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Заливаем в Музе браузер.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Заголовок надо разделить на заголовок и подзаголовок, поработать над размерами шрифта. (над содержанием УТП я бы еще поработал но сейчас не об этом).

Скопировал вашу композицию и обнаружил что в триггере куча мусора.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Привел в порядок. Ну и собственно всё готово.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Смотрим в браузере.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Всё хорошо, но было бы лучше, если бы контент центровался в зависимости от экрана.

Берем кнопку состояния, очищаем от всего и помещаем весь контент в нее. Добавляем CSS код. Сейчас не буду в него вникать, но без кода или стороннего Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Получили статичный сайт который будет отображаться отлично на всех экранах больше 1200 px. Адаптация  - это уже совсем другая история ;).
 

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post
  • 0
12 минуты назад, Екатерина Косилова сказал:

Я вот нашла еще страницу, как отключить любую прокрутку Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

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

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...