#html #css #responsive-design #fixed #fluid-layout
#HTML #css #адаптивный дизайн #исправлено #fluid-layout
Вопрос:
Я пытаюсь сделать заголовок / строку меню на этом веб-сайте статическим (фиксированным), чтобы он всегда присутствовал в верхней части экрана, а особенно длинный веб-сайт прокручивался «за» ним. Я делал это раньше на веб-сайтах с фиксированной шириной, но этот веб-сайт имеет плавную ширину, и я пока не смог этого сделать, не нарушая заголовок.
Может ли кто-нибудь потенциально сказать мне, где / что мне нужно отредактировать в моем CSS? Я считаю, что мне нужно добавить элемент position:fixed; где-нибудь, возможно, в этом разделе, но, похоже, это не достигает моей цели так же, как на веб-сайте с фиксированной шириной.
.art-header
{
margin:0 auto;
background-repeat: no-repeat;
height: 170px;
position:relative;
background-image: url('images/header.jpg');
background-position: center top;
}
.custom-responsive .art-header
{
background-image: url('images/header.jpg');
background-position: center top;
}
.default-responsive .art-header,
.default-responsive #art-header-bg
{
background-image: url('images/header.jpg');
background-position: center center;
background-size: cover;
}
.art-header-inner{
position: relative;
min-width: 840px;
max-width: 1920px;
width: 50%;
z-index: auto !important;
margin: 0 auto;
}
Комментарии:
1. Пожалуйста, поместите свой код на fiddle, это поможет понять ваш запрос
2. Невозможно ответить на этот вопрос без разметки, которая идет с CSS.
3. Итак, вы пытались
position: fixed;
, и это не сработало? Можете ли вы поместить это в jsfiddle ?4. Вот скрипка — jsfiddle.net/8uZE5/2 — надеюсь, это работает достаточно хорошо, чтобы хотя бы поиграть с проблемой. Дайте мне знать, если я могу предоставить что-нибудь еще.
Ответ №1:
попробуйте это, объедините свой .art-header
amp; .art-nav
внутри div и классифицируйте fixed
его следующим образом
<div class="fixed">
//div .art-header amp; nav .art-nav here
</div>
затем добавьте css для фиксированного
.fixed {
position: fixed;
z-index: 100;
}
и сделайте некоторый запас для .art-sheet
margin-top: 241px; /*the height of the fixed div*/
вот JSFIDDLE