Перекрытие с полупрозрачным div на быстродействующем веб-сайте

Я работал над самопроектом, чтобы дублировать reddit страницы для javascript с использованием доступных данных JSON. Но я не могу воспроизвести поведение исходного веб-сайта в header section, где header реагирует (поведение при уменьшении размера экрана).

введите описание изображения здесь

GIF: как работает исходный раздел заголовка сайта.

Проблема:

  • Перекрыть правую сторону (параметры страницы входа) с левой стороны. Перекрытие таково, что текст позади не отображается. Мне удалось выполнить перекрытие, но поскольку фон для divs равен translucent, текст позади тоже показывает. Не могу придумать какое-либо решение для этого.

GIF: мой заголовок (за просмотренным текстом)

  1. navbar elements превзойти вниз, когда пространства недостаточно. Это не так, как в оригинале, где они скрываются с помощью more и Login section. Я не могу понять, как это сделать в одной строке.

GIF: мой заголовок (элементы заголовка перемещаются вниз)

Меньший, похожий пример фрагмента:

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
}
#top-right-div{
    position: absolute;
    right: 0;
    z-index: 1000;
}
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

ОТВЕТЫ

Ответ 1

Если вы можете использовать CSS flexbox, я думаю, что это решение работает так, как вы хотите:

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
    display: flex;
}
#top-left-div {
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
}
#top-right-div{
    flex: 0 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

Ответ 2

Мне удалось реализовать решение pure-CSS без flex того, что, как я предполагаю, вы хотели получить.

Я остановлюсь на некоторых изменениях, которые я сделал (те, которые не имеют прямого отношения к проблеме и поэтому могут быть упущены):

  • Избавился от .navbar, .navbar-static-top, .navbar-header, .custom-header-full и .custom-top-header-container. Пожалуйста, найдите способ переписать свое поведение в свое время, если вам действительно нужны эти классы. Я могу попытаться помочь, если это окажется слишком сложным.
  • Убрал CAPS LOCK из исходного кода и заменил его text-transform: uppercase; внутри файла CSS. Это может действительно помочь в будущем, если кто-то засыпает при добавлении новой навигационной ссылки.
  • Заменено "▼" с HTML-объектом (&#9660;). Современные браузеры обычно не заботятся, но это все еще хорошая практика.

Вот Fiddle конечного результата. Дайте мне знать, если у вас есть вопросы.

Ответ 3

Маленький взлом может помочь вам, я думаю. Попробуйте выполнить эти изменения CSS:

#top-right-div {
    position: absolute;
    right: 0px;
    z-index: 1000;
    background: rgba(255,255,0,1);
}

И добавьте background: rgba(0, 0, 0, 0.7); в .navbar-brand в разделе top-right-div в html.

Это создаст иллюзию того, чего вы пытаетесь достичь.

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
    display: flex;
}
#top-left-div {
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
}
#top-right-div{
    flex: 0 0 auto;
    background: rgba(255,255,0,1);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand" style="background: rgba(0, 0, 0, 0.7);">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

Ответ 4

для Overlap вы можете использовать этот стиль:

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7); 
    position:absolute;
    top:0;
    width: 100%;
}
#top-right-div {
    width: 45%;
    float: left;
}

#top-left-div {
    display: inline-block;
    width: 53%;
    float: left;
}

Нравится: демо

и на другом устройстве вы можете использовать медиа-запросы. Как:

 @media (min-width:0px) and (max-width:799px) { add style  }

написать стиль в соответствии с устройством.

Мне кажется, это полезно для вас.

Ответ 5

Чтобы справиться с проблемами растягивания. Попробуйте проверить веб-сайт с помощью адаптивного варианта

отзывчивая кнопка

Затем вы можете узнать размер экрана, когда тексты перекрываются, или панель навигации имеет две строки высотой

получить ширину

Итак, вы можете добавить свой медиа-запрос, чтобы создать отличия от веб-сайта на рабочем столе. Если это 450px

@media only screen and (max-width: 450px) {
    /* Add your css specification here. */
}