Ширина html страницы: Как задать ширину html страницы? – QA PR-CY

Leave a Comment / Html / By /

html — Как указать минимальную ширину страницы?

Есть меню, сверстанное на bootstrap. Можно ли ограничить минимальную ширину страницы до 760px, чтобы меню не ломалось?

.navbar-my{

    background: #58ba5c;
    /*#b5cd60
    58ba5c*/    
}

#colorAMenu a{
   color: white; 
   font-size: 16px;
    
}

.navbar-my ul li a:hover{
    background-color: #4cae4c !important;
}

.navbar-my ul li a:focus{
    background-color: #4cae4c !important;
}

.navbar-my ul li a:active{
    background-color: #4cae4c !important;
}

.nav .open > a{
     background-color: #4cae4c !important;
}

#dropAColor a{
   /* background:#58ba5c; */
    color: black;   
}

#dropAColor a:hover{
   /* background:#58ba5c; */
    color: white;   
}



.pag{
margin-top: -15px;
margin-bottom: -15px;
}

.
 
 pag2{  
    margin-top: -35px;
    
}

/*.wrapper {
  width: 100%;

  min-width: 760px;
}*/

body{
  min-width: 760px;  
}
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <style>
           <%-- <%@include file='css/bootstrap.min.css' %> --%>
            <%@include file='css/menu.css' %>  
            <%@include file='css/style.
  css' %>
            <%@include file='css/dropdownMenu.css' %>  
            
        </style>

       <!-- <script language="javascript" type="text/javascript" src="js/3.2.1_jquery.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/jquary_ui.js"></script>
        <script language="javascript" type="text/javascript" src="js/bootstrap.min.js"></script>-->

    </head>
    <body>      

        <nav>    
            <div> 
                <div>

                    <script language="javascript" type="text/javascript" src="js/dropdownMenu.js">
                    </script>
                    <a href="#">Бази даних. Перегляд</a>
                </div>
                <ul>
                    <!--Дата по умолчанию-->
                    
                    <li hover><a href="index.
 
 jsp" >Головна</a></li>
                    <li hover>
                        <a href="#" data-toggle="dropdown">Перегляд даних<span></span></a> 
                        <ul>
                            <%--<li><a href="SkisqlController?action=list&page=1">Перегляд бази Skisql</a></li>--%>
                            <li><a href="Search?page=1&count=0&osdch=${osdch}&osdk=${osdk}&kiz=${kiz}&svi=<%=curStringDate%>">Кількість одиниць складових(деталей) у виробі(VP44150SQL)</a></li>
                            <li><a href="SearchTmi?page=1&count=0&osdch=${osdch}&nc=${nc}&svi=<%=curStringDate%>">Технологічний маршрут виготовлення(TMISQL)</a></li>
                            <li><a href="#" data-toggle="dropdown">Технологічний маршрут виготовлення(TMPSQL)</a>
                                <ul>
                                    <li><a href="SearchTmpCh?page=1&count=0&osdch=${osdch}&osdk=${osdk}&cp=${cp}&svi=<%=curStringDate%>">Перегляд "Що"-"Куди"</a></li>
                                    <li><a href="SearchTmpK?page=1&count=0&osdch=${osdch}&osdk=${osdk}&cp=${cp}&svi=<%=curStringDate%>">Перегляд "Куди"-"Що"</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li> 
                </ul>  

                <!--Скрипт для подсказок-->      
                <script>
                    $(function () {
                        $('[data-toggle="tooltip"]').
 
 
 tooltip()
                    })
                </script>

                <ul>
                    <li>
                        <form method="post" name="exit" action="login.jsp">
                            <!-- <button >Вихід</button>-->
                            <button data-toggle="tooltip" data-placement="left" title="Вихід" >
                                <span></span></button>
                        </form>
                    </li>
                </ul>
            </div>
        </nav>
    </body>
</html>
  • html
  • bootstrap
  • jsp

4

Из файла bootstrap.min.css убертие все, что обернуто в медиа-выражение @media (min-width: 768px)

и для укажите минимальную ширину для боди

. body {
    min-width: 768px;
}

11

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

фиксированная и непостоянная — учебник CSS

С развитием настольных компьютеров и мобильных устройств появилась необходимость создавать такие сайты, дизайн которых легко подстраивался бы под любой размер экрана. Адаптивность стала жизненно необходимым свойством сайта, поскольку на него может зайти как пользователь ПК, так и пользователь планшета или смартфона. И если раньше адаптивный дизайн считался чем-то необязательным, то сейчас сайт, который не подстраивается под любой тип устройства, пользователи сочтут устаревшим.

Чаще всего страницы сайта создаются на основе фиксированной либо относительной (непостоянной) ширины. Ниже мы опишем плюсы и минусы каждого варианта, а также поговорим про адаптивный веб-дизайн.

Фиксированная ширина страницы

Веб-страница с фиксированной шириной позволяет хорошо контролировать разметку. Ширина в данном случае задается в пикселях. С фиксированным контейнером вы можете быть уверены, что все элементы страницы будут находиться на своих местах без риска съехать и развалить верстку. И каким бы широким ни был экран, сайт с фиксированной шириной будет смотреться на нем прилично и читабельно.

Недостатком фиксированной ширины можно назвать то, что если экран пользователя меньше, чем ширина блока-контейнера, где содержится контент веб-страницы, то на экране появится жутко неудобная горизонтальная полоса прокрутки. В случае со смартфоном пользователю придется приближать веб-страницу и также прокручивать ее горизонтально, чтобы, скажем, прочитать текст.

Непостоянная ширина страницы

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

Минус непостоянной ширины состоит в отсутствии жесткого контроля над расположением элементов. Если пользователь будет просматривать сайт на очень большом мониторе, то текст на странице рискует настолько сильно разойтись по ширине, что его будет очень неудобно читать.

Адаптивный дизайн страницы

Золотая середина и наилучшее решение для современного сайта — это адаптивный веб-дизайн. Суть его заключается в создании нескольких вариаций разметки с коррекцией ширины контейнера в зависимости от размеров экрана. Например, для настольных компьютеров можно установить ширину страницы в 960 пикселей, для планшетов — ширину этой же страницы в 700 пикселей, а для всех смартфонов вообще задать непостоянную ширину в процентах. Таким образом вы можете превратить, к примеру, большой трехколоночный макет в узкий одноколоночный, если сайт просматривается с небольшого экрана.

Определять стили для страницы, основываясь на ширине окна браузера, можно благодаря медиазапросам (Media Queries). Как вы наверняка помните, мы уже пробовали знакомиться с ними на практике ранее в книге.

Чуть позже в данном разделе мы обязательно вернемся к технике создания адаптивного дизайна. А пока что далее в книге пойдет речь о таком понятии как блочная верстка.

Как создать макет с фиксированной шириной с помощью CSS

Макет с фиксированной шириной — это макет, в котором макет страницы содержится внутри оболочки который не меняет свой размер при изменении ширины браузера.

В этом руководстве вы узнаете, как создать двухколоночный макет с фиксированной шириной.

  1. Начните со следующей простой веб-страницы, содержащей четыре области содержимого: верхний и нижний колонтитулы, меню и содержимое.
    

<голова>
<мета-кодировка="UTF-8">
Фиксированный макет с двумя столбцами

<тело>
<дел>
<дел>
 
    Фиксированный макет с двумя столбцами
<дел> <дел>

Меню

Этот столбец исправлен.

Этот столбец исправлен.

Этот столбец исправлен.

Этот столбец исправлен.

Этот столбец исправлен.

<дел>

Контент

Этот столбец исправлен.

<дел>