Блог

Главная - Вопросы по программированию - Форматирование HTML CSS JS отображения: отсутствует

Форматирование HTML CSS JS отображения: отсутствует

#javascript #html #css #bootstrap-4

Вопрос:

Изначально мой id="Gabel" дисплей отображался на моей странице в правильном формате, но при вводе дисплея: нет; мое форматирование было искажено. Что-то не так с моим кодом? Я хочу показывать идентификатор дисплея=»Габель», когда я нажимаю на изображение на главной странице. Вот некоторые из кодов. Моя проблема заключается в форматировании моей карты с идентификатором Gabel. Спасибо

 #Gabel {
  background-color: #fff;
  position: relative;
  display: flex;
  border-radius: 20px;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
  padding: 0;
  top: 300px;
  /* display: none; */
  width: 80%;
}

.container_Gabel img {
  width: auto;
  height: 100%;
  border-radius: 5px 0 0 5px;
}

.container_Gabel .btn {
  position: absolute;
  bottom: -20px;
  right: -20px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  background-color: #fc9400;
  color: #fff;
  padding: 22px 45px;
  font-size: 1rem;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}


.container__text {
  padding: 40px 40px 0;
}

.container__text h1 {
  color: #351897;
  font-weight: 400;
}

.container__text p {
  font-size: 0.9rem;
}

.container__text .container__text__timing {
  display: flex;
  margin: 20px 0 10px;
}

.container__text .container__text__timing .container__text__timing_time {
  margin-right: 40px;
}

.container__text .container__text__timing h2 {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 20px;
  margin-right: 30px;
}

.second_half {
  margin-left: 20px;
}

.container__text .container__text__timing p {
  color: #351897;
  font-weight: bold;
  font-size: 1.2rem;
}

.title-container {
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: tb-rl;
  margin-left: 5px;
  margin-right: 5px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.title-container span {
  transform: rotate(180deg);
  display: flex;
  text-align: center;
  min-height: 10em;
  vertical-align: middle;
  line-height: 2em;
  justify-content: center;
  width: 2em;
}

.vl {
  border-left: 4px solid black;
  height: 100px;
}

hr {
  border: 0;
  height: 1px;
  width: 100%;
  position: relative;
  margin-top: 0;
} 
 <!DOCTYPE html>
<html>

<head>
    <script>
        function clearBox(elementID) {
            document.getElementById(elementID).innerHTML = "";
            var x = document.getElementById("Gabel");
            if (x.style.display === "none") {
                x.style.display = "none";
            } else {
                x.style.display = "block";
            }
        }
    </script>
</head>

<body>
    <div><button class="button button1">Main Menu</button></div>
    <div id="image">
        <div class="row" id="container-item">
            <div class="image-column col-lg-3 col-md-6">
                <div class="card h-100 p-1 card-container">
                    <div class="card-header">
                        <h3>GABEL LOFFEL</h3>
                    </div>
                    <div class="card-img-wrapper ">
                        <button class="button2" onclick="clearBox('container-item')">
                        <img src="assetsimage_1.jpg" alt="">
                        </button>
                        <div class="content">
                            <hr>
                            <div class="para d-flex justify-content-center align-items-center">
                                <p>Get out your <br> Lederhosen!</p>
                            </div>

                            <hr>
                            <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <div class="container_Gabel" id="Gabel">
        <div class="title-container"><span>
                <h2>GABEL LOFFEL</h2>
            </span></div>
        <div>
            <img src="assetsswiss.jpg" alt="Pancake" />
        </div>
        <div class="container__text">
            <h1>Gabel Loffell</h1>
            <div class="container__text__timing">
                <div class="container__text__timing_time">
                    <h2>
                        235 GLENDALE AVE.<br>
                        MERIDIAN CITY<br>
                        T: 490 49 4000<br>
                        W: GANDG.RES
                    </h2>
                </div>
                <div class="container__text__timing_time vl"></div>
                <div class="container__text__timing_time">
                    <h2 class="second_half">
                        CATEGORY: SWISS<br>
                        OPEN: 10AM TO 10PM<br>
                        PRICE: $$
                    </h2>
                </div>
            </div>
            <hr>
            <div class="body_container">
                <div class="body_card">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
                        accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
                        dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
                        a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
                        non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
                        fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
                        velit ac, elementum scelerisque tortor. Cras eget maximus diam.

                        <br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
                        ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
                        id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
                        posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
                        turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
                        tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
                        eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
                        sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
                        imperdiet congue ut id metus. Sed sit amet condimentum eros.
                    </p>

                </div>
            </div>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>

Комментарии:

1. display:none означает «не отображается» — итак, какое форматирование вы ожидаете от чего-то, что не отображается?

2. @JaromandaX, когда на моем дисплее нет ни одного, он отображается с правильным форматированием, но когда я изначально не хочу показывать карту и вызывать ее в javascript (когда я нажал кнопку), моя карта искажена или не совпадает. Спасибо

Ответ №1:

Возможно, попробуйте переключиться opacity вместо display 

 #Gabel {
        background-color: #fff;
        position: relative;
        display: flex;
        border-radius: 20px;
        box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
        padding: 0;
        top: 300px;
        opacity: 0;
        width: 80%;
    }
    .container_Gabel img {
        width: auto;
        height: 100%;
        border-radius: 5px 0 0 5px;
    }

    .container_Gabel .btn {
        position: absolute;
        bottom: -20px;
        right: -20px;
        border: none;
        outline: none;
        display: flex;
        align-items: center;
        background-color: #fc9400;
        color: #fff;
        padding: 22px 45px;
        font-size: 1rem;
        text-transform: uppercase;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
    }


    .container__text {
        padding: 40px 40px 0;
    }

    .container__text h1 {
        color: #351897;
        font-weight: 400;
    }

    .container__text p {
        font-size: 0.9rem;
    }

    .container__text .container__text__timing {
        display: flex;
        margin: 20px 0 10px;
    }

    .container__text .container__text__timing .container__text__timing_time {
        margin-right: 40px;
    }

    .container__text .container__text__timing h2 {
        font-size: 1rem;
        font-weight: 400;
        margin-top: 20px;
        margin-right: 30px;
    }

    .second_half {
        margin-left: 20px;
    }

    .container__text .container__text__timing p {
        color: #351897;
        font-weight: bold;
        font-size: 1.2rem;
    }

    .title-container {
        background: yellow;
        display: flex;
        justify-content: center;
        align-items: center;
        writing-mode: tb-rl;
        margin-left: 5px;
        margin-right: 5px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .title-container span {
        transform: rotate(180deg);
        display: flex;
        text-align: center;
        min-height: 10em;
        vertical-align: middle;
        line-height: 2em;
        justify-content: center;
        width: 2em;
    }

    .vl {
        border-left: 4px solid black;
        height: 100px;
    }

    hr {
        border: 0;
        height: 1px;
        width: 100%;
        position: relative;
        margin-top: 0;
    } 
  <script>
    function clearBox(elementID) {
        document.getElementById(elementID).innerHTML = "";
        var x = document.getElementById("Gabel");
        if (x.style.opacity === "0") {
            x.style.opacity = "0";
        } else {
            x.style.opacity = "1";
        }
    }

    
</script>

<body>
<div><button class="button button1">Main Menu</button></div>
<div id="image">
    <div class="row" id="container-item">
        <div class="image-column col-lg-3 col-md-6">
            <div class="card h-100 p-1 card-container">
                <div class="card-header">
                    <h3>GABEL LOFFEL</h3>
                </div>
                <div class="card-img-wrapper ">
                    <button class="button2" onclick="clearBox('container-item')"><img src="assetsimage_1.jpg"
                            alt=""></button>
                    <div class="content">
                        <hr>
                        <div class="para d-flex justify-content-center align-items-center">
                            <p>Get out your <br> Lederhosen!</p>
                        </div>

                        <hr>
                        <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
                    </div>
                </div>

            </div>
        </div>


    </div>
</div>

<div class="container_Gabel" id="Gabel">
    <div class="title-container"><span>
            <h2>GABEL LOFFEL</h2>
        </span></div>
    <div>
        <img src="assetsswiss.jpg" alt="Pancake" />
    </div>
    <div class="container__text">
        <h1>Gabel Loffell</h1>
        <div class="container__text__timing">
            <div class="container__text__timing_time">
                <h2>
                    235 GLENDALE AVE.<br>
                    MERIDIAN CITY<br>
                    T: 490 49 4000<br>
                    W: GANDG.RES
                </h2>
            </div>
            <div class="container__text__timing_time vl"></div>
            <div class="container__text__timing_time">
                <h2 class="second_half">
                    CATEGORY: SWISS<br>
                    OPEN: 10AM TO 10PM<br>
                    PRICE: $$
                </h2>
            </div>
        </div>
        <hr>
        <div class="body_container">
            <div class="body_card">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor sodales purus, id
                    accumsan est sodales sed. Aenean tempus laoreet molestie. Ut leo ipsum, euismod a ante vitae,
                    dapibus porttitor orci. Suspendisse nec porta urna. Proin neque neque, imperdiet laoreet turpis
                    a, tincidunt convallis neque. Nunc sed nisi tristique, auctor sapien sit amet, rutrum massa. Nam
                    non enim placerat, egestas risus id, tincidunt nisl. Quisque vestibulum dolor non pharetra
                    fermentum. Sed vestibulum sapien dui, ut mollis augue luctus ac. Sed magna ex, interdum sit amet
                    velit ac, elementum scelerisque tortor. Cras eget maximus diam.

                    <br><br>Aliquam ultrices varius lorem sed elementum. Aenean rutrum efficitur suscipit. In quis
                    ligula nulla. Aliquam dictum ex ut metus vulputate feugiat. Phasellus sagittis consequat dolor,
                    id molestie ante tempus at. Sed ullamcorper velit id nulla mollis cursus. Vivamus nisl dolor,
                    posuere vehicula congue vel, ullamcorper ac nulla. Suspendisse iaculis enim tellus, ut congue
                    turpis dapibus ac. In congue nulla id gravida pellentesque. Donec rutrum urna nec metus
                    tristique, a commodo dui porta. Etiam semper, lacus non eleifend imperdiet, ipsum diam vulputate
                    eros, non laoreet ligula nibh vel lorem. Ut eu volutpat turpis. Nulla lobortis, velit ut varius
                    sollicitudin, nibh elit ornare diam, vel viverra odio orci a dui. Donec vel nulla vitae ex
                    imperdiet congue ut id metus. Sed sit amet condimentum eros.
                </p>

            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

Комментарии:

1. Спасибо вам за ваш ответ. Проблема заключается в том, что я хочу вернуться на главную страницу при нажатии кнопки главного меню. Не могли бы вы мне помочь..

Ответ №2:

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

Здесь, если вам нужны более подробные сведения.

Ответ №3:

Попробуйте использовать

 visibility:hidden;

и

 visibility: visible;

чтобы скрыть и показать элемент

Метки: