Пример верстки блоками
Страницы: 1 2 След.
Пример верстки блоками
Всем привет. Сверстал страничку для примера на дивчиках. 

Если зажать клавишу Ctrl  и  покрутить колесико мышки вверх-вниз, то можно увидеть, как меняется расположение блоков друг относительно друга. Страница адаптируется к разрешению экрана. Сильно быстро крутите, чтобы не пропустить варианты. Таким образом, при  высоком разрешении страница не похожа на тонкую вертикальную полоску, а при низком - не появляется горизонтальный скроллинг. Без JavaScript. Документ валиден по http://validator.w3.org 

http://np.dn.ua/mo/divchiki/example.html
Изменено: Алексей - 27 Февраля 2015 17:45
На других форумах пользователи не справились с выбором, куда крутить колесико, и забрасалимена критикой, потому выкладываю скриншоты, поясняющие как работает в этом случае адаптация. 
[img]np.dn.ua/mo/divchiki/r1280.jpg[/img]



[img]np.dn.ua/mo/divchiki/r1024.jpg[/img]




[img]np.dn.ua/mo/divchiki/r800.jpg[/img]

Для экранов с разрешением больше 1280 уже ничего не происходит. 
Нет смыла растягивать блоки еще шире, ибо вся информация и так уместилась на кран. 
Адаптация важна для меньших разрешений, чтобы избавиться от горизонтального скроллинга. 
Цитата
Алексей пишет:
Для экранов с разрешением больше 1280 уже ничего не происходит.
почему нет? все достаточно хорошо видно - просто надо сначала увеличить и потом уменьшать - все работает (экран 1680*1050)

забрал пример страницы в копилку - адаптивная верстка всегда пригодится smile;)
Сначала посмотрел верстку, потом почитал сообщения из этой ветки, оказывается, можно не догадаться как сделать так, чтобы на экране не поместилась информация:)Спасибо автору за пример адаптивной верстки, и совет: не выкладывайте такое на форумах для умственно отсталых, все-равно, не пойму, еще и виноватым сделают:)
Я никогда раньше не сталкивался с адаптивной версткой, у меня вопрос: "Где в коде страницы найти участок, отвечающий за изменение расположение блоков, при уменьшении разрешения меньше минимального?"
Спасибо!
Изменено: newuser - 28 Февраля 2015 08:02
Цитата
newuser пишет:
"Где в коде страницы найти участок, отвечающий за изменение расположение блоков, при уменьшении разрешения меньше минимального?"

Здесь реализован следующий принцип: блоки сделаны плавающими. (Свойство float - плавать по-английски.) Эти блоки, как элементы текста, стремятся занять по ширине все доступное им пространство. Если разрешение позволяет, то  они вообще выстроятся в одну строку. (Я правда, это запретил свойством max-width, но это вопрос вкуса, можно и не ограничивать было.)
А когда размеры окна браузера поджимают, они автоматически выстраиваются в более узкую конструкцию. 

Управлять логикой, по которой блоки будут перестраиваться, можно с помощью свойства clear. Этот параметр управляет взаимным расположением плавающих  блоков. 

Надеюсь,  мой ответ немного вам помог. 
Цитата
Алексей пишет:
Надеюсь, мой ответ немного вам помог.
Понял, спасибо, помог даже не немного!
Хорошее, простое решение, но возникнут сложности на странице с контентом. Там где надо, чтобы блоки располагались рядом с текстом (сбоку).
веб-профан, сео-пессимизатор, фуфлогонщик и дзенофоб
Цитата
Ять пишет:
Хорошее, простое решение, но возникнут сложности на странице с контентом. Там где надо, чтобы блоки располагались рядом с текстом (сбоку).

Еcли принципиально не использовать JavaScript,  то можно попробовать слева от контента собрать блоки, которые при уменьшении экрана будут собираться сверху над контентом, а справа - те, которые уйдут вниз.

То есть, важные элементы сразу попадут на глаза юзеру, а второстепенные уйдут вниз. 

Это - как вариант. 

Я попробую так сделать, и выложить здесь. 
Цитата
paltarasych пишет:
забрал пример страницы в копилку - адаптивная верстка всегда пригодится smile:)
это не адаптивная верстка - адаптивная подстраивается под любые разрешения экрана, включая смартфоны ...достигается это посредством медиа-запросов в стилях, которые в данном случае отсутствуют...прогоните данную страничку вот тут
при адаптивной верстке горизонтального скролла быть не должно
вот пример адаптивной верстки...
Изменено: Валентин - 28 Февраля 2015 19:43
Цитата
Валентин пишет:
прогоните данную страничку вот тут
Пробовал провярять сайты - все работает, а вот cy-pr проверить не получилось))) интерестно почему
Валентин, не совсем правильно (как я считаю) сравнивать адаптированную верстку текста и больших графических изображений

то что в вашем примере "исчезают" картинки нижнего скрола и нет, но есть же и фотобанки и прочее.
оба примера являются адаптивными, т.к. адаптируются под формат экрана!
если в первый вариант напихать кучу текста - все будет гуд! smile;)
Цитата
Валентин пишет: это не адаптивная верстка
Нет смысла спорить о терминах.Предложенный мною пример "борется"  с горизонтальным скроллингом до 640 пикселей по ширине (это мой мобильный). 
Причем в несколько шагов, стараясь в каждом случае использовать всю ширину экрана. 
То есть адаптация имеет место.  А называйте ее как хотите. 

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

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

Потому я бы без фанатизма относился а адаптации для телефонов с их 300х240. 

Да и вариантов стилей для каждого возможного разрешения не напасешься. 

Но все равно медиа-запросы это круто, и по-умному их использовать можно и должно. Тут не поспоришь. 
Цитата
paltarasych пишет:
Валентин, не совсем правильно (как я считаю) сравнивать адаптированную верстку текста и больших графических изображений
верстка бывает фиксированная, резиновая и адаптивная, а текст или графические изображения роли не играют, большие они или маленькие...

Цитата
paltarasych пишет:
то что в вашем примере "исчезают" картинки нижнего скрола и нет, но есть же и фотобанки и прочее.
оба примера являются адаптивными, т.к. адаптируются под формат экрана!
под примером я имел ввиду пример css-файла с медиа-запросами smile:)

Цитата
paltarasych пишет:
если в первый вариант напихать кучу текста - все будет гуд!
сколько ни пихай - ничего не изменится...
Цитата
Алексей пишет:
Нет смысла спорить
ну нет, так нет...
Валентин, стоит почитать славрь Даля, хотя бы на букву А

там не долго листать до слова адаптация
Страницы: 1 2 След.
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
14:36 Ворд Пресс (или его шаблон) перестал отображать <b> болд жирный 
14:31 Robots txt 
12:18 С чего сейчас проще начать? 
02:14 MAX попер в бурж: 40 стран, ведение каналов и горы дешевого трафика 
22:19 Телега на ручнике: РКН включил замедление и логи админок покраснели 
22:16 Продажа и покупка Дзен-каналов 
17:17 как оплатить claude и gpt-5 из рф в 2026 чтобы не забанили через три дня 
14:45 Belurk — высокоскоростные анонимные прокси от 0,24 рублей 
14:22 Продажа аккаунтов HH.RU 
12:29 От $0.015 за IP | $0.68 за ГБ | 9PROXY.COM | 20+ млн резидентных прокси | 99,95% аптайм | Без чёрных списков 
11:22 BestChange – обменивать электронную валюту можно быстро и выгодно 
11:00 WordChecker Extension - браузерное расширение для проверки позиций в Яндексе 
10:19 MIG-OBMEN.net — Быстрый и надежный обмен цифровых активов 
08:45 Swapwatch.org — Мониторинг криптовалютных обменников 
13:54 Актуально для тех кто хочет заработать в интернете 
13:53 Панель Кнопки соцсетей 
13:31 Ставки на супер тренды в спорте 
08:57 молодильные яблоки и живая вода 
02:27 Точные прогнозы на футбол 
02:23 8 марта: желаю аптайма 99.9% и e-e-a-t без локов 
21:46 блокировка youtube 2026: ркн начинает «выдавливание». кто уже пробовал вк видео?