Уменьшить размер DIV-контейнера со списком при изменении окна браузера - PullRequest
Новая
       1

Уменьшить размер DIV-контейнера со списком при изменении окна браузера

0 голосов
/ 12 октября 2018

Наконец мой список работал и остался на одной строке, но теперь, когда я нашел решение, я не могу использовать% для ширины, я не могу уменьшить всю панель навигации при изменении размера окна.,Это как-то связано с li / ul, что предотвращает сжатие?

Я думал, что добавление div с теми же функциями сжатия, что и логотип, будет работать, но, похоже, это совсем не помогает.Я немного поработал над этим проектом, и довольно досадно, что это единственная оставшаяся проблема.Как только это будет сделано, я могу начать отображать изображения, которые вы видите в GIF-файле, и создавать другие страницы.

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

Спасибо за любую помощь, рекомендуем!

См. Пример gif ниже (логотип сокращается, список - нет):

enter image description here

css: 

body {
    background-image: url("repeatbg.gif");
    background-repeat: repeat;
}

.taskbarimages {
    height: 50px;
    margin-right: 10px;
}

#title {
    width: 30%;
    height: 30%;
    margin-left: 20%;
}
.toppage {
    margin-left: 20%;
}

.shinktofit {   
    width: 30%;
    height: 30%;
}
ul {
    list-style-type: none;
    white-space: nowrap;
}

li {
    display: inline-block;
    margin: 0 -1px;
}

html: 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="indexcss.css">
            <meta charset="utf-8"/>
        </head>
        <body>
            <!-- TOP HEADER -->

            <!-- top banner -->
            <div class="toppage">
                <!-- Animal Crossing Logo DIV -->   
                <div>
                    <img src="images/animalcrossinglogo.png" alt="Animal Crossing Logo" id="title"/>
                </div>
                <div class="shinktofit">
                <ul>
                    <li>
                        <a href="link1.html">
                            <img src="images/homepagebutton.png" class="taskbarimages">
                            </a>
                        </li>
                        <li>
                            <a href="link2.html">
                                <img src="images/historybutton.png" class="taskbarimages">
                                </a>
                            </li>
                        <li>
                            <a href="link2.html">
                                <img src="images/historybutton.png" class="taskbarimages">
                                </a>
                            </li>
                        <li>
                            <a href="link2.html">
                                <img src="images/historybutton.png" class="taskbarimages">
                                </a>
                            </li>
                        <li>
                            <a href="link2.html">
                                <img src="images/historybutton.png" class="taskbarimages">
                                </a>
                            </li>
                        </ul>
                    </ul>
                    </div>
                </div>
            </body>
        </html>

Ответы [ 4 ]

0 голосов
/ 12 октября 2018

изменить на это .. 

.taskbarimages {
height: auto;
margin-right: 10px;
width: 50%;
}
0 голосов
/ 12 октября 2018

вы можете просто использовать bootstrap, а в bootstrap есть классы div, которые можно использовать с окнами разных размеров.Например, есть классы div, такие как «col-lg» для больших экранов, «col-md» для экранов среднего размера, «col-sm» и «col-xs» для небольших экранов.И в вашей HTML-голове вы можете просто использовать эту строку ниже. 

<meta name="viewport" content="width=device-width,initial-scale=1">

Вы можете просмотреть эту документацию.https://getbootstrap.com/docs/4.1/layout/grid/

Когда вы используете вышеперечисленные вещи, вам не нужно беспокоиться об отзывчивости окна.

0 голосов
/ 12 октября 2018

Есть несколько способов сделать это.1) Вместо% и пикселей, используйте vw (ширина представления) единицу измерения, которая рассчитывается в области просмотра, и добавьте минимальную ширину к li.Например.

/* Change the unit values as per your project */
.li{
    width : 10vh;
    min-width : 100px;
}
.taskbarimages{
     Width : 100%;
}

2) Используйте медиазапросы и установите высоту для разных размеров экрана.Например.

@media(700px){
      .li{
          Width : 150px;
      }
}

3) Используйте такие фреймворки, как bootstrap, bulma, скелет.

0 голосов
/ 12 октября 2018

Проблема в том, что вы используете изображения в качестве ссылок, и изображения по умолчанию не реагируют.Задание .taskbarimages шириной 100% и высотой авто должно решить вашу проблему.

Так как у вас есть высота, установленная на 50px, это сделало бы ее странной улыбку при меньших размерах.Вместо этого, установив максимальную высоту, можно было бы предотвратить это и не дать им стать слишком большими.

Возможно, вам придется поэкспериментировать с расстоянием, а что нет, но это, как минимум, заставит их масштабироваться вместе с контейнером. 

.taskbarimages {
  width: 100%;
  height: auto;
  max-height: 50px;
  margin-right: 10px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...