Создание фиксированной позиции для отсутствия прокрутки приводит к неправильному расположению div на странице
Здравствуйте, у меня проблема с тем, что когда я делаю верхнюю область недоступной для прокрутки, область почти полностью исчезает.
Перед фиксированным изображением
html для заголовка
<section id = "header">
<div class = "container">
<ul class = "top-nav">
<li>
<a href = "#" class = "choose-language" data-toggle = "popover" id = "languageChooser" data-original-title = "" title = "">
English
<b class = "caret"></b>
</a>
<div id = "languageChooserContent" class = "hidden">
<ul>
<li>
<a href = "/index.php?language=arabic">العربية</a>
</li>
<li>
<a href = "/index.php?language=azerbaijani">Azerbaijani</a>
</li>
<li>
<a href = "/index.php?language=catalan">Català</a>
</li>
<li>
<a href = "/index.php?language=chinese">中文</a>
</li>
<li>
<a href = "/index.php?language=croatian">Hrvatski</a>
</li>
<li>
<a href = "/index.php?language=czech">Čeština</a>
</li>
<li>
<a href = "/index.php?language=danish">Dansk</a>
</li>
<li>
<a href = "/index.php?language=dutch">Nederlands</a>
</li>
<li>
<a href = "/index.php?language=english">English</a>
</li>
<li>
<a href = "/index.php?language=estonian">Estonian</a>
</li>
<li>
<a href = "/index.php?language=farsi">Persian</a>
</li>
<li>
<a href = "/index.php?language=french">Français</a>
</li>
<li>
<a href = "/index.php?language=german">Deutsch</a>
</li>
<li>
<a href = "/index.php?language=hebrew">עברית</a>
</li>
<li>
<a href = "/index.php?language=hungarian">Magyar</a>
</li>
<li>
<a href = "/index.php?language=italian">Italiano</a>
</li>
<li>
<a href = "/index.php?language=macedonian">Macedonian</a>
</li>
<li>
<a href = "/index.php?language=norwegian">Norwegian</a>
</li>
<li>
<a href = "/index.php?language=portuguese-br">Português</a>
</li>
<li>
<a href = "/index.php?language=portuguese-pt">Português</a>
</li>
<li>
<a href = "/index.php?language=romanian">Română</a>
</li>
<li>
<a href = "/index.php?language=russian">Русский</a>
</li>
<li>
<a href = "/index.php?language=spanish">Español</a>
</li>
<li>
<a href = "/index.php?language=swedish">Svenska</a>
</li>
<li>
<a href = "/index.php?language=turkish">Türkçe</a>
</li>
<li>
<a href = "/index.php?language=ukranian">Українська</a>
</li>
</ul>
</div>
</li>
<li>
<a href = "/clientarea.php">Login</a>
</li>
<li>
<a href = "/register.php">Register</a>
</li>
<li class = "primary-action">
<a href = "/cart.php?a=view" class = "btn">
View Cart
</a>
</li>
</ul>
<a href = "/index.php" class = "logo"><img src = "/assets/img/logo.png" alt = "WebKing Web Services"></a>
</div>
</section>
html для навигационной панели Переключить навигацию
<!-- Collect the nav links, forms, and other content for toggling -->
<div class = "collapse navbar-collapse" id = "primary-nav">
<ul class = "nav navbar-nav">
<li menuitemname = "Home" class = "" id = "Primary_Navbar-Home">
<a href = "/index.php">
Home
</a>
</li>
<li menuitemname = "Store" class = "dropdown" id = "Primary_Navbar-Store">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Store
<b class = "caret"></b> </a>
<ul class = "dropdown-menu">
<li menuitemname = "Browse Products Services" id = "Primary_Navbar-Store-Browse_Products_Services">
<a href = "/cart.php">
Browse All
</a>
</li>
<li menuitemname = "Shop Divider 1" class = "nav-divider" id = "Primary_Navbar-Store-Shop_Divider_1">
<a href = "">
-----
</a>
</li>
<li menuitemname = "Select Your Perfect Plan" id = "Primary_Navbar-Store-Select_Your_Perfect_Plan">
<a href = "/cart.php?gid=1">
Select Your Perfect Plan
</a>
</li>
<li menuitemname = "symantec" id = "Primary_Navbar-Store-symantec">
<a href = "/index.php?rp=/store/ssl-certificates">
SSL Certificates
</a>
</li>
<li menuitemname = "Shop Divider 2" class = "nav-divider" id = "Primary_Navbar-Store-Shop_Divider_2">
<a href = "">
-----
</a>
</li>
<li menuitemname = "Register a New Domain" id = "Primary_Navbar-Store-Register_a_New_Domain">
<a href = "/cart.php?a=add&domain=register">
Register a New Domain
</a>
</li>
<li menuitemname = "Transfer a Domain to Us" id = "Primary_Navbar-Store-Transfer_a_Domain_to_Us">
<a href = "/cart.php?a=add&domain=transfer">
Transfer Domains to Us
</a>
</li>
</ul>
</li>
<li menuitemname = "Announcements" class = "" id = "Primary_Navbar-Announcements">
<a href = "/index.php?rp=/announcements">
Announcements
</a>
</li>
<li menuitemname = "Knowledgebase" class = "" id = "Primary_Navbar-Knowledgebase">
<a href = "/index.php?rp=/knowledgebase">
Knowledgebase
</a>
</li>
<li menuitemname = "Network Status" class = "" id = "Primary_Navbar-Network_Status">
<a href = "/serverstatus.php">
Network Status
</a>
</li>
<li menuitemname = "Contact Us" class = "" id = "Primary_Navbar-Contact_Us">
<a href = "/contact.php">
Contact Us
</a>
</li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li menuitemname = "Account" class = "dropdown" id = "Secondary_Navbar-Account">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Account
<b class = "caret"></b> </a>
<ul class = "dropdown-menu">
<li menuitemname = "Login" id = "Secondary_Navbar-Account-Login">
<a href = "/clientarea.php">
Login
</a>
</li>
<li menuitemname = "Register" id = "Secondary_Navbar-Account-Register">
<a href = "/register.php">
Register
</a>
</li>
<li menuitemname = "Divider" class = "nav-divider" id = "Secondary_Navbar-Account-Divider">
<a href = "">
-----
</a>
</li>
<li menuitemname = "Forgot Password?" id = "Secondary_Navbar-Account-Forgot_Password?">
<a href = "/pwreset.php">
Forgot Password?
</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</section>
Код:
section#header {
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
Теперь, когда я добавляю фиксированное положение и пытаюсь сделать его неуправляемым, белая часть и область логотипа больше не прокручиваются, однако, прежде чем я даже начну прокручивать, моя строка меню сдвигается вверх и смещается.
Изображение теперь исправлено, вы можете видеть, что строка меню изменила свое местоположение. Вот новый код
section#header {
position: fixed;
width: 100%;
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
Это не проблема с z-индексом, так как это происходит еще до того, как я прокручиваю страницу вниз.
Я застрял на несколько дней, я действительно был бы благодарен за любую помощь.
ОБНОВЛЕНИЕ: Хорошо, у меня есть фиксированное меню там, где оно должно быть, но теперь у меня эта проблема с каждой страницей, и я понятия не имею, почему каждый div и раздел переместились вверх, как будто заголовок не существует. имейте в виду, что это делается до начала прокрутки. Посетите webking.com и перейдите на любую страницу, чтобы понять, что я имею в виду.
Как видите, огромный беспорядок
Спасибо
Без соответствующего HTML для вашего CSS никто не сможет ответить на этот вопрос.
Просто добавил html, извините за это
Добавьте верхний край с высотой фиксированного заголовка к остальным элементам.
@ Shim-Sao проблема с этим решением в том, что теперь мне придется корректировать каждый раздел, который не исправлен. он изменяет динамику всех остальных страниц сайта. как видно здесь webking.com/scroll3.png
@ Shim-Sao проблема с этим решением в том, что теперь мне придется корректировать каждый раздел, который не исправлен. он изменяет динамику всех остальных страниц сайта. как видно здесь. Есть ли способ добавить пространство внизу, чтобы динамически сделать интервал для всего, что находится под заголовком?
Вы можете использовать адаптивный медиа-запрос: w3schools.com/css/css_rwd_mediaqueries.asp
Вы хотите исправить заголовок к чему? Если вы исправили его, он останется в том же положении и не будет учитываться для других элементов, что объясняет трюк с маржой. С помощью Media Query вы можете установить различное поле в зависимости от изменения высоты заголовка.
Конечно, я хорошо понимаю: вам нужно, чтобы синее меню оставалось вверху, а логотип - внизу.
@ Shim-Sao У меня есть настройка медиа-запросов для мобильных устройств, это не проблема. Я пытаюсь объяснить, что каждый раз, когда я использовал фиксированную позицию, секция или div ниже подталкиваются вверх, как если бы заголовок больше не существовал в пространстве, поэтому следующий раздел просто перемещается на свое место,
@ Shim-Sao, если вы перейдете к webking.com, вы увидите область логотипа с логином, а меню ниже исправлено, что я хочу, но в результате теперь каждый раздел и div переместились вверх на 30-40 пикселей и теперь обрезаны еще до того, как вы начнете прокручивать, если вы заметили первое изображение, которое я разместил, текст, где должен быть поиск по домену, теперь отключен. Я понимаю, что могу изменить высоту в каждом div, но делать это для каждой страницы с этим заголовком было бы довольно утомительно. Не стесняйтесь переходить на другие страницы, чтобы понять, что я имею в виду, говоря, что все отрезано.
Пишу решение
Ответы 1
Итак, вот мои последние исправления:
1-й шаг исправляем заголовок:
section#header {
position: fixed; /* We want the header fixed at top */
z-index: 1000; /* We want header over other elements when scrolling */
/* margin: -5px 0 0 0; */ /* Remove seems not needed */
height: 60px; /* We should fix the header height */
width: 100%; /* header will take all available width */
background-color: #fff;
border-radius: 5px 5px 0 0;
}
2-й шаг исправить меню:
section#main-menu {
/* margin: 60px auto 0; */ /* It is not the place for the marin-top. We don't need this */
position: fixed; /* We want the menu fixed at top */
width: 100%;
background-color: #006687;
top: 60px; /* We want menu above the header so we shift the menu of the height of the header */
z-index: 1000; /* We want menu over other elements when scrolling */
}
3-й шаг коррекции содержания:
Здесь я не понимаю, почему (возможно, потребуется дополнительное расследование), но
браузер возьмет margin-top из section#main-body и
примените его к заголовку. Это не то, что мы хотим, и мы здесь.
исправлю это с помощью этого:
Мы добавим и применим трюк с верхним краем к
.container внутри section#main-body
нравится :
section#main-body .container {
margin-top: 100px; /* header : 60 + menu : 40 */
}
Меню находится там, где оно должно быть, но раздел с логотипом удален и больше не исправлен. Я попытался добавить к нему исправления, и все стало еще хуже. Однако я чувствую, что это становится все ближе. webking.com, как вы видите сейчас
Я прокомментировал все поля в меню для теста. При изменении меню есть только некоторые вещи, которые можно настроить и сделать динамическими. Думаю, у вас есть решение;)
Если бы вы могли еще раз взглянуть. Если я не поставлю position: fixed для заголовка раздела №, все будет в нужном месте, ожидайте, что заголовок раздела теперь прокручивается. вот изображения [ссылка] webking.com/unfixed1.png [ссылка] webking.com/unfixed2.png так что теперь, если я добавлю позицию: исправлено в заголовок раздела #, все адские перерывы проиграют, как показано ниже. ссылка на сайт
Извините, я не добавляю это в ответ, но да, вы должны поместить исправление положения в заголовок и в меню.
Я сделал это, и вот что происходит. ссылка на сайт
Вы не следуете моим инструкциям. section # home-banner => margin-top: header + высота меню (около 100 пикселей, когда у меня есть тест). Вы добавляете странный отступ.
Прошу прощения, я не понимаю. Если вы хотите, можете отправить мне электронное письмо администратору [at] webking [dot] com, и я могу либо бросить вам немного денег, если вы можете работать со мной, чтобы исправить это решение, либо предоставить вам неограниченный хостинг на всю жизнь. Спасибо
Сейчас ищу работу. Завтра быстро исправлю, думаю, для меня (Франция) уже очень поздно. Я пришлю вам письмо, без проблем.
Спасибо, жду вашего письма. Доброй ночи.
эй, только что проверяю, я никогда не слышал от тебя ответа. Вы думаете, что еще можете помочь? Еще раз спасибо
Вчера я отправил электронное письмо. ты его не получил !?
Я забыл упомянуть, что это не проблема с z-индексом, область, на которую вы смотрите, находится еще до того, как я попытаюсь прокрутить,