Ну а сетка уже в % (т.е. колонки) и получится резина + медиа кверис адаптив и получится то что нужно как я понимаю? max-width писать 1020px? И дело в том что фон разный, для шапки и футера темный, в банере фотография а ниже фото фон светлый. Как задать одному контейнеру разные фоны?
Pavel Designer: Понятно) Вот еще попытался разобраться. Нашел такой сайт app.responsify.it создал стандартную сетку 12 колонок и отступы между ними 1.5 (как я понимаю это em?) screenshot.ru/b0182971f7836f04134603ae31aa8de1 . Подставил на свой дизайн. Вот что получилось: screenshot.ru/94281d61d6212e5c989b8b98c2dfb033 вроде бы подходит и ширина получается 960px как обычно и делают. Вот картинка без направляющих screenshot.ru/6504c88865f93904ae996bd95ddf192c теперь все более ясно и можно работать!) Но что беспокоит Фон и картинка растягивается на всю ширину браузера как я понимаю. Как мне зделать так что бы контент был 960px но тянулся (резинился) к меньшему, а фон изначально и картинка, была изначально растянута на весь экран? Я знаком с max-width: 100%; height: auto; но не не пойму как применить.
Спасибо всем за информацию. Хочу под итожить. (немного запутался)
- сетка на дизайне это работа дизайнера?
- на данный момент все шаблоны (бесплатные) которые я скачал с интернета, у них были Guides как на второй картинке. В таком случаи мне не нужно скачивать сетку "XXX grid psd" так как она уже есть? Если ее нету я ищу "XXX grid psd" и подставляю в макет, но нюанс в том, если ее изначально нет, значит и дизайн был сделан непонятно как и сетка вряд ли подойдет тогда? (это по поводу визуальной сетки)
- по поводу самого кода. Так как ширина колонок и расстояния разные, скорее всего нужно писать код сетки почти всегда новый, неплохо было бы генерировать сетку, я зашел на 1200px.com выставил параметры и нажал скачать Variable CSS Fluid вот что выдает screenshot.ru/2f0331d444351d1420101a7d619f1aea что это может быть?
- На счет отступов слева и справа я понял что они предусмотрены, получается есть ширина сетки, а отступы это margin по сторонам которые доплюсовуются до ширины макета?
Моя понять как правильно верстать, раньше верстал на глаз, но если использовать сетку и знать расстояния отступов и т.д. то это получается просто перенос psd в html. Этого я и хочу добиться. Что бы не выдумывать отступов и размеров которых нет в макете.
Почему этот div не закрыт " "? Почему для логотипа дана 1 ячейка, а для остального 11? Как я понимаю одна колонка занимает 8.333333333333332%, а по макету там отступ 160px слева от лого и само лого еще 140px, как оно там поместиться? И ничего что я убрал отступы между ячейками, как в бутстрапе например? Это н считается ошибкой? Просто они меня путают, так как в макете есть свои отступы, и тогда стандартные отступы нужно учитывать с теми что в макете.
Александр Тихомиров: "При использовании position надо еще очередность кода HTML правильно сделать" Можете натолкнуть в каком направлении гуглить, Вы про семантику? Что имеется введу? Как я понимаю что бы не было "дыр и перекрытий" при уменьшении экрана, нужно добавлять медиа запросы?
Почему 10 px? Высоте же 20px.
transform: translateY(-50%) сужает квадрат и выравнивает в левый угол. А даже если высота не известна, как написали ниже, то вообще не работает.
Спасибо! Только вот у вас фиксированная ширина. Я изначально делаю адаптив + резина, вот что у меня получилось codepen.io/anon/pen/BoaPYm я иду в правильном направлении в плане резины? Только вот главное меню уже на 1200px перескакивает под картинку. Я знаю что сделаю меню адаптивным т.е. скрытым как в бутстрап, но как то рано оно сдвигается вниз под картинку. Что с этим можно сделать?