Пример верстки блоками
Страницы: 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)
Новые темыОбъявленияСвободное общение
12:35 TacoLoco - рекламная сеть от LosPollos. Большие объёмы качественного трафика! 
15:08 Adtrafico - Правильная партнёрская сеть под бурж трафик 
21:18 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
21:06 Кто как борется с ботами ПФ? 
16:51 Buymedia.biz - рекламная сеть 
13:36 Партнерская программа OWNR WALLET 
14:10 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 
10:48 DualCoin - быстрый криптовалютный обменник 
21:39 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 
18:50 Европейский эквайринг 
18:36 Мобильные и Резидентные Прокси Для Соц Сетей | 3 Гб Бесплатно 
19:40 Высококачественные и надежные прокси-серверы и 5G 
16:16 ZennoPoster - софт №1 для автоматизации любых SEO задач! 
15:55 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust 
02:05 Точные прогнозы на футбол 
15:43 Заказать телефонный флуд. 
12:05 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 
11:25 Флуд звонками 
11:40 Кто сделает прогон для адалт сайта? 
09:25 Добро пожаловать в цифровой мир... 
10:31 Видимо, похороны СУПРа уже прошли как-то по-тихому