Пример верстки блоками
Страницы: 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)
Новые темыОбъявленияСвободное общение
19:29 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
17:29 Как продвигать сайт с неуникальным контентом 
14:50 Индексация страниц 
12:36 У кого новостник, дайте пару советов плиз 
13:53 AviTool - мощный инструмент для автоматизации работы с Avito 
17:01 Absence в Армении 
23:19 Ребята подскажите какими сервисами и прогами вы пользуетесь для SEO продвижения? 
13:22 Linken Sphere – браузер-антидетект нового поколения 
04:12 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 
22:29 InOut-Exchange.com - обменник 24/7, которому доверяют 
21:38 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 
18:02 ✅ XMart — Безопасный маркетплейс аккаунтов Google, Hotmail, Outlook, GMX, Yandex и других 
15:50 Купить отзывы на Яндекс и Гугл картах, на Авито, на Отзовике и IRecommend 
15:13 Продам аккаунты Gmail USA IP | Gmail MIX IP | Outlook Old 
22:06 Добро пожаловать в цифровой мир... 
19:42 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор 
22:08 Накрутка поисковых подсказок 
05:04 Точные прогнозы на футбол 
14:01 Union Pharm - топовая фарма-партнерка для профессионалов! 
10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 
12:23 150+ хакерских поисковых систем и инструментов