Как мне исправить css, чтобы на маленьких экранах было два столбца?

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

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

Я пробовал поплавки, меняя пиксели на % и обратно, выравнивая поплавки слева и справа, очищая поплавки, изменяя их ширину и высоту, а также изменяя отображение на встроенный блок и встроенный. (Есть еще вещи, но я не могу вспомнить.) Единственное, что почти работает, — это margin-left:30% для основного контента.

Мой вопрос:Какой код мне нужно изменить, чтобы контент располагался рядом с меню на больших экранах, но под ним на меньших экранах, не смещаясь в одну сторону?

(Я удалил контент, поэтому он просто показывает макет в его базовой форме.)

<link rel = "stylesheet" href = "test_css.css">
</head>

<body>
<!--menu below-->
<div class = "menu">  
 <ul class = "sidenav">
     <li><h3>menu:</h3></li>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
 </ul>
</div>
<!--End of the menu.-->

<!--header-->
<div class = "header">
 <br />
 <h1>Header</h1>
     <a></a>
 <p class = "hr">____________________________________</p>
</div>
<!--end of header section-->

<div class = "main">
 <h2>Main content</h2>
 <h2>Main content</h2>
 <a></a>
 <p class = "hr">____________________________________</p>

 <h1>Main content</h1>
 <h2>Main content</h2>
 <h2>Main content</h2>
 <p class = "hr">____________________________________</p>
</div>

<!--footer content below-->
<div id = "footer">
 <h4>Staff:</h4>
 <h5>1</h5>
 <h5>2</h5>
 <h5>3</h5>
 <h6>Last updated: --/--/----</h6>
</div>
<!--end of footer content-->
</body>

И CSS:

/* background and font face for web page-!important! */
body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    width: 90%;
    margin: 0 auto;
    background-color:#47807E;
    background-image: url('Home_background.png');
    background-position:top;
    background-repeat:repeat-x;
    text-align: center;
}

.responsive {

    width:100%;
    height: auto;
}

ul{
    width: 30%;
    border: 2px solid black;
}

/* formatting for content areas */
div.header {
    margin-left: 30%;
    width: 63%;
    padding:0;
}

div.main {
    margin-left:30%;
    width: 63%;
    padding:0;
}

div.footer {
width: 30%;
float: right;
margin: 10px;
text-align: center;
}


/* styling for font and images */




/* side navigation testing, need to fix formatting. */
ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:left;
    width:25%;
    background-colour: #ccffff;
    position: fixed;
    height: 100%;
    overflow: auto;
    padding:0%;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    background-color: #ccffff;
}

ul.sidenav li a.active {
    background-color: #003333;
    color:white;
}

ul.sidenav li a:hover:not(.active){
    background-color:#003333;
    color: white;
}

@media screen and (max-width:900px) {
ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    }   
}

ul.sidenav li a {
    float: inline-block;
    padding: 10px;
}

div.content {margin-left: 0;}

@media screen and (max-width: 400px) {
ul.sidenav li a{
    text-align: center;
    float: none;
    }
}

На что я надеюсь: Увеличенное окно: Меню навигации слева, контент справа. Меньшее окно: Меню вверху, содержимое по центру внизу.

html css responsive-design

07.04.2019 15:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

326

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Итак, в основном, вам нужно обернуть весь документ в одну оболочку div.

Здесь я добавил элемент div с идентификатором #main. И завернул основной контент в div с именем класса .content. Структура будет выглядеть так.

<div id = "main">
  <div class = "menu">
    <!-- other codes -->
  </div>
  <div class = "content">
    <!-- other codes -->
  </div>
</div>

и стиль для корневого div

#main {
 width: 100%;
 height: 100vh; // take up the whole viewport height
 overflow: hidden; // remove the scrollbar for overflow items
 display: flex;
}

и стиль для содержимого и меню div

.content {
  width: 75%;
  height: 100%;
  overflow-y: scroll; // add the vertical scroll bar for content
}

.menu {
  display: fixed;
  left: 0;
  width: 25%;
  height: 100vh;
}

и вот как это будет выглядеть.

* {
  box-sizing: border-box;
}

body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    width: 100%;
    margin: 0 auto;
    background-color:#47807E;
    background-image: url('Home_background.png');
    background-position:top;
    background-repeat:repeat-x;
    text-align: center;
}

#main {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

.menu {
  display: fixed;
  left: 0;
  width: 25%;
  height: 100vh;
}

.content {
  width: 75%;
  height: 100%;
  overflow-y: scroll;
}

.responsive {
    width:100%;
    height: auto;
}

ul{
    width: 30%;
    border: 2px solid black;
}

/* formatting for content areas */
.header {
    padding:0;
}

.main {
    padding:0;
}

.footer {
width: 30%;
float: right;
margin: 10px;
text-align: center;
}


/* styling for font and images */




/* side navigation testing, need to fix formatting. */
.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:left;
    width:25%;
    background-colour: #ccffff;
    position: fixed;
    height: 100%;
    overflow: auto;
    padding:0%;
}

.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    background-color: #ccffff;
}

.sidenav li a.active {
    background-color: #003333;
    color:white;
}

.sidenav li a:hover:not(.active){
    background-color:#003333;
    color: white;
}

@media screen and (max-width:800px) {
  #main {
    display: block;
    height: auto;
  }
  
  .menu {
    width: 100%;
    height: 80px;
  }
  
  .content {
    width: 100%;
    overflow-y: hidden;
  }
  
  .sidenav {
      width: 100%;
      position: relative;
  } 
  .sidenav li {
    display: inline-block;
  }
 }

@media screen and (max-width: 400px) {
  .sidenav li a{
    text-align: center;
    float: none;
  }
}

<div id = "main">
  <div class = "menu">  
   <ul class = "sidenav">
       <li><h3>menu:</h3></li>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
   </ul>
  </div>
<!--End of the menu.-->
  <div class = "content">
    <!--header-->
    <div class = "header">
     <br />
     <h1>Header</h1>
         <a></a>
     <p class = "hr">____________________________________</p>
    </div>
    <!--end of header section-->

    <div class = "main">
     <h2>Main content</h2>
     <h2>Main content</h2>
     <a></a>
     <p class = "hr">____________________________________</p>

     <h1>Main content</h1>
     <h2>Main content</h2>
     <h2>Main content</h2>
     <p class = "hr">____________________________________</p>
    </div>

    <!--footer content below-->
    <div id = "footer">
     <h4>Staff:</h4>
     <h5>1</h5>
     <h5>2</h5>
     <h5>3</h5>
     <h6>Last updated: --/--/----</h6>
    </div>
  </div>

</div>

Спасибо за ваш вклад, я попробовал ваше предложение, но я думаю, что немного испортил код, когда вводил его. Кажется, я не мог заставить его работать раздражающе. :( В конце концов мне удалось заставить его работать с другим ответом.

— 17.04.2019 12:57

07.04.2019 16:34

Ответ принят как подходящий

Я думаю, вы уже выполнили адаптивную задачу для небольших устройств, просто добавьте ниже css в @media screen and (max-width:900px) медиа-запрос для небольших настроек.

div.header,
div.main {
  margin-left: 0;
  width: 100%;
}

Also make sure you add viewport meta in your page head if not just add below code in you page head. Try this i hope it'll help you out. Thanks

<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

/* background and font face for web page-!important! */
body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    width: 90%;
    margin: 0 auto;
    background-color:#47807E;
    background-image: url('Home_background.png');
    background-position:top;
    background-repeat:repeat-x;
    text-align: center;
}

.responsive {

    width:100%;
    height: auto;
}

ul{
    width: 30%;
    border: 2px solid black;
}

/* formatting for content areas */
div.header {
    margin-left: 30%;
    width: 63%;
    padding:0;
}

div.main {
    margin-left:30%;
    width: 63%;
    padding:0;
}

div.footer {
width: 30%;
float: right;
margin: 10px;
text-align: center;
}


/* styling for font and images */




/* side navigation testing, need to fix formatting. */
ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:left;
    width:25%;
    background-colour: #ccffff;
    position: fixed;
    height: 100%;
    overflow: auto;
    padding:0%;
}

ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    background-color: #ccffff;
}

ul.sidenav li a.active {
    background-color: #003333;
    color:white;
}

ul.sidenav li a:hover:not(.active){
    background-color:#003333;
    color: white;
}

@media screen and (max-width:900px) {
ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    }   
    div.header,
    div.main {
      margin-left: 0;
      width: 100%;
    }
}

ul.sidenav li a {
    float: inline-block;
    padding: 10px;
}

div.content {margin-left: 0;}

@media screen and (max-width: 400px) {
ul.sidenav li a{
    text-align: center;
    float: none;
    }
}

<!--menu below-->
<div class = "menu">  
 <ul class = "sidenav">
     <li><h3>menu:</h3></li>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
 </ul>
</div>
<!--End of the menu.-->

<!--header-->
<div class = "header">
 <br />
 <h1>Header</h1>
     <a></a>
 <p class = "hr">____________________________________</p>
</div>
<!--end of header section-->

<div class = "main">
 <h2>Main content</h2>
 <h2>Main content</h2>
 <a></a>
 <p class = "hr">____________________________________</p>

 <h1>Main content</h1>
 <h2>Main content</h2>
 <h2>Main content</h2>
 <p class = "hr">____________________________________</p>
</div>

<!--footer content below-->
<div id = "footer">
 <h4>Staff:</h4>
 <h5>1</h5>
 <h5>2</h5>
 <h5>3</h5>
 <h6>Last updated: --/--/----</h6>
</div>
<!--end of footer content-->

Это сработало так, как я хотел, спасибо! Это довольно раздражает, что я пропустил одну маленькую вещь. Спасибо за помощь. :)

— 17.04.2019 12:40

07.04.2019 18:42