Пример верстки блоками
Страницы: 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)
Новые темыОбъявленияСвободное общение
23:50 АП 10.01 Память - новый биткоин? Цены на DDR4 улетели в космос 
23:47 Операторы поиска Яндекса: FAQ для тех, кто хочет стать мастером поиска 
19:57 SEO под нейро 
19:19 Эпоха суррогата и имитации: качество вообще кого-то волнует? Апдейт Яндекс выдача 8 января 2026 
15:32 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 
13:41 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
18:02 "Осталось 5 дн. до НГ" АПдейт Яндекс выдача 
21:28 E-currency.exchange — ваш помощник в мире обменов 
21:15 TETChange-Обменник криптовалют 
16:34 PartnerDating— партнёрская сеть в нише онлайн-знакомств 
14:24 Мониторинг обменников Сrypto-scout.io 
11:44 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 
20:20 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 
15:27 GhostRocket.pro — Взлетаем в новую эру криптообмена! 
20:42 Астероид отменяется. Человечеству угрожает... сперма Дурова 
20:12 Кто может дать инвайт на WebMasters? 
17:19 Гайд по релокации 2026: раздевайся и работай (18+) 
17:18 ИИ от Илона "сорвался с цепи": Grok завалил пользователей клубничкой 
13:04 Программирование (кодинг) на смартфоне 
15:15 Студия веб-дизайна Azatweb.ru 
00:11 ИИ Neuro-sama: $400 000/мес без участия человека. Мы точно ту профессию выбрали?