Как лучше произвести разметку страницы перед версткой?

Question

[RGoldvarg]

Добрый день.

Перейду сразу к делу. Друзья, сейчас экспериментирую с версткой и столкнулся с небольшой проблемкой при верстке резиновых макетов. Есть макет, картинка внизу. Его ширина 1500px, контентная область занимает примерно 1160px. Учитывая, что это резиновый макет, как правило, здесь не должно быть фиксированный ширины, ведь так? Или все же, контентная область должна быть фиксированный ширины, а бэкграунд футера, хедера, и.т.д. должен растягиваться под любую ширину дисплея?

Answer 1

[Николай Садовников]

У вас дизайн явно фиксированный, только фон должен тянуться, а для слайдера подойдет fotorama.io
P.S. frontender.info/adaptive-vs-responsive-terminology — с терминологией до сих пор некоторая путаница.

Comments

[RGoldvarg]

Спасибо. Скажите, плиз. А что входит в "фон" бэкграунд, хедер, футер? Учитывая, что у них однотонный фон) Если фоновый слой меню должен растягиваться на 100%, то каким способом позиционировать меню? в процентах или ...?) Посоветуйте, пжл, если будет время. Спасибо.

[Николай Садовников]

У вас весь дизайн поделён на горизонтальные полоски, которые занимают 100% ширины экрана. Внутри каждого такого блока находится контент, ширина которого явно зафиксирована (в px) и не должна растягиваться (исключение — слайдер, но могут быть и другие исключения, это нужно предусмотреть).
softline.ru — пример того, что я имею в виду.

Ну и еще, скорее всего, при уменьшении ширины страницы блоки должны "спрыгивать", примерно как тут: www.smashingmagazine.com/.

[RGoldvarg]

Спасибо, что нашли время ответить! Крайне благодарен! И, если позволите, ещё один момент. Полоска хедера должна растягиваться на 100%, а каким образом меню позиционировать, если родитель не имеет конкретной ширины? Примерно/в процентах/на глаз? Заранее благодарен.

[Николай Садовников]

Вы же сами написали, что ширина контента у вас 1160px. Так и позиционировать, width: 1160px; margin:auto;.
Но если 1160px — это максимальная ширина, то рекомендую сделать минимальную ширину ≈960px и width:77.3333% (1160/1500*100%).

[RGoldvarg]

Согласен. Ну, а, фон ведь бэкграунда должен быть растянут на 100%. Тогда необходимо создать дополнительный див внутри хедера и дать ему тот же цвет и задать repeat по иксу?

[Николай Садовников]

.header указываете зеленый цвет фона и картинку с repeat-x,
.header__in зажимаете по ширине и центруете.
По-моему вы вымогаете из меня вёрстку данной страницы, это по меньшей мере нечестно ;)

[RGoldvarg]

Нет, что вы... Мне необходимо было понять логику. Спасибо огромнейшее! Теперь все ясно! :)

Answer 2

[Crash]

Контентная часть должна иметь минимальную и максимальную ширину, т.е. пределы, в которых она может сжиматься и растягиваться. Фон может иметь ширину 100%

Answer 3

[Иван Беленков]

Если у вас будут растягиваться только бэкграунды, то это будет не резиновая вёрстка. Резиновая - это именно когда растягивается контент.

Answer 4

[RGoldvarg]

Безусловно, будет min-width и max-width. Если не ошибаюсь, когда растягивается весь сайт, это уже адаптивный сайт, а не резиновый. Таким образом, ширину не задавать для контента?

Comments

[Иван Беленков]

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