Адаптивная/резиновая верстка в первый раз! Ну как?

Question

[colorkid]

Попробовал сверстать адаптивно/резиново... Вот что у меня получилось colorkid.ru.
Хочу узнать мнения людей по данной верстке, советы будут очень полезны.

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

Answer 1

[ChenZhen]

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

По поводу высоты - всё просто, в вашем случае нужно:
Задать для
html, body {height: 100%}
Для main {min-height: 100%; padding-bottom: 100px} - получится мэйн во всю страницу, но снизу будет место для футера. Можно больше 100, если хотите отступ от футера.
Для footer задать margin-top: -100px; - возвращаем футер вверх, на освобожденное место.

И вставить div class="clearfix" перед /main, потому что каталог у вас с float: left (иначе подвал будет налезать на каталог).
Есть и другие способы - гуглите "footer к низу страницы".

Comments

[colorkid]

Спасибо за отзыв. Сделал как написано, футер зафиксировался.
Вы написали, цитирую: "И вставить перед , потому что с каталог у вас с float: left (иначе подвал будет налезать на каталог).'
Так и происходит.
Только я не могу понять, что именно нужно вставить и перед чем)? Может просто слово потерялось и вы его не напечатали)

[ChenZhen]

colorkid: вставить div с clearfix, он у вас стоит после закрывающего тэга main не понятно зачем. А если его поставить перед этим тэгом - он прижмет элементы каталога с float: left. Тостер не даёт теги вставлять - вот и пропало )

Answer 2

[Anton]

По моему у вас вовсе не резиновый сайт.

Comments

[colorkid]

поясните пожалуйста.... Я в этом деле новенький и мало что понимаю, возможно, что-то путаю)

[Anton]

colorkid: shpargalkablog.ru/2012/09/rezinovyi-sajt.html Посмотрите здесь. Смысл резиновой верстки заключается в том, что станица будет автоматически менять размер в зависимости от того, меняете ли вы размер веб-браузера или масштаб страницы.

[colorkid]

благодарю

Answer 3

[Андрей Федоров]

1. посмотрите как у вас выглядит сайт для экранов шириной менее 670px.
2. зачем у вас отступы желтого цвета сохраняются для ширины менее 960px?
3. крупная пустая область под карточками товаров при наличии вертикальной прокрутки. wtf?
4. по возможности не следует масштабировать картинки средствами браузера.

Answer 4

[gl_evhen]

А в чем его адаптивность заключаеться?)) по 6 товаров в ряд для мобильного как по мне както слишком, да ещё и такие отступы по бокам

Comments

[colorkid]

согласен, надо было при больших расширения включать медиазапросы... Сейчас экшн начинается с 670 пикс только для верхнего меню, а так с 370 вроде как в 2 товара а еще меньше и в 1.

[gl_evhen]

colorkid: я с телефона смотрю и вижу что там по 6 товаров в ряд, и в горизонтальном и вертикальном положении =) если интересно, то я за свою первую адаптивную верстку даже деньги умудрился заработать staruha.skarb.com.ua

Answer 5

[Роман]

a>article, который используется для названия товара - вообще не семантично.

да и в хедере артиклы тоже не к месту. прочитайте про тег.

навигация делается либо: ul>li>a либо nav>a. Ваш вариант (nav>ul>li) - избыточен и несемантичен.

в футере section тоже не к месту.

padding: 5px 7.5px; - не делайте полпикселя. разные браузеры по своему округляют и отображают по разному. где-то статья на хабре про это была.

font-size делайте em`амим лучше.

НУ и как по мне засилье флоатов вообще не хорошо. Тоже можно сверстать вообще без них. А так по сути у вас почти вся страница выпала из потока

Comments

[colorkid]

Благодарю за отзыв

[Роман]

SelenIT2:

Спецификация говорит : A nav element doesn't have to contain a list... Т.е. список пихать вообще не обязательно. И если навигация простая, а не многоуровневая, то вариант nav>ul>li>a изыточен.
Я все же исхожу из определения и примера www.w3schools.com/tags/tag_nav.asp

ну и вот, к примеру, https://css-tricks.com/navigation-in-lists-to-be-o... и https://css-tricks.com/wrapup-of-navigation-in-lists/

Answer 6

[teotlu]

joxi.ru/wRmzqLvFjM5orO — можно поймать ресайзом момент, когда каждый из пунктов из двустрочного становится однострочным :)

Answer 7

[Лучник *range attack +10*]

Используйте модульную сетку и медиазапросы, тогда сам процесс верстки последующих страниц станет проще, дизайн — лучше, а верстка действительно будет адаптивной. Адаптивная верстка предполагает наличие модульной сетки. Размеры блоков в этой сетке прописаны в зависимости от ширины окна браузера. Вот пример.

Comments

[Айрат Кадырмаев]

что думаете по этому вопросу - Как грамотно расположить меню сайта?