PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
kuller
Отправлено: 28 Января, 2018 - 20:16:59
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 553
Дата рег-ции: Нояб. 2009  


Помог: 2 раз(а)




Доброго времени суток!
Подскажите как подправить верстку если колонка с навигацией с левой стороны сделать фиксированной position fixed тогда контент, колонка с правой стороны залазит на левую колонку. Как их выровнять? Вот что на данный момент у меня

Спойлер (Отобразить)


и sass
Спойлер (Отобразить)


добавил файл результата
Прикреплено изображение (Нажмите для увеличения)
1.png

(Отредактировано автором: 28 Января, 2018 - 20:20:14)

 
 Top
rgl
Отправлено: 29 Января, 2018 - 11:39:59
Post Id



Новичок


Покинул форум
Сообщений всего: 47
Дата рег-ции: Авг. 2017  
Откуда: замкадье


Помог: 1 раз(а)




сделать у левой колонки margin-left равным ширине правой фиксированной колонки?
 
 Top
kuller
Отправлено: 30 Января, 2018 - 14:25:48
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 553
Дата рег-ции: Нояб. 2009  


Помог: 2 раз(а)




rgl пишет:
сделать у левой колонки margin-left равным ширине правой фиксированной колонки?


в таком случае при адаптации шаблона будет гемор. Придется постоянно margin-left менять... это не хорошо
(Добавление)
вроде доперло ))) и да можно margin-left использовать. Только перед этим надо ширину везде указывать в процентах. Вот тупанул

Пробная страница. Отображается как и требовалось

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Document</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  8. <style type="text/css">
  9. * {
  10.         -webkit-box-sizing: border-box;
  11.         -moz-box-sizing: border-box;
  12.         box-sizing: border-box;
  13.         margin: 0;
  14.         padding: 0;
  15. }
  16.  
  17. body {
  18.         background-color: #F2F4F7;
  19.         font-size: 16px;
  20.         min-width: 320px;
  21.         position: relative;
  22.         line-height: 1.65;
  23.         overflow-x: hidden;
  24.         opacity: 1; }
  25.  
  26.         .container {
  27.                 position: relative;
  28.                 display: block;
  29.                 width: 90%;
  30.                 margin: 0 auto;
  31.                 background-color: #fff;
  32.         }
  33.  
  34.         .header {
  35.                 position: fixed;
  36.                 top: 0;
  37.                 background-color: #303547;
  38.                 padding: 20px;
  39.                 color: #fff;
  40.                 z-index: 9;
  41.                 width: 90%;
  42.         }
  43.  
  44.         .flex {
  45.                 display: flex;
  46.                 flex-wrap: wrap;
  47.                 justify-content: space-between;
  48.                 margin-top: 67px;
  49.         }
  50.  
  51.         .sidebar {
  52.                 position: fixed;
  53.                 background-color: #ddd;
  54.                 width: 20%;
  55.                 height: 100%;
  56.         }
  57.  
  58.         .content {
  59.                 position: relative;
  60.                 display: block;
  61.                 width: 77%;
  62.                 margin-left: 23%;
  63.         }
  64. </style>
  65. </head>
  66. <body>
  67.  
  68. <div class="container">
  69.         <header class="header">
  70.                 Header
  71.         </header>
  72.         <div class="flex">
  73.                 <div class="sidebar">
  74.                         sidebar
  75.                 </div>
  76.                 <div class="content">
  77.                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam excepturi, vitae aperiam voluptas eum nulla adipisci obcaecati, ullam debitis, unde esse cupiditate tempore nostrum accusamus officia ea numquam quam! Ea. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur libero culpa ad cum quisquam atque ipsam voluptatum. Ullam nostrum iure perspiciatis eum commodi pariatur necessitatibus ad doloribus, consectetur vitae.
  78.                 </div>
  79.         </div>
  80. </div>
  81. <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
  82. </body>
  83. </html>
  84.  
 
 Top
rgl
Отправлено: 01 Февраля, 2018 - 14:03:40
Post Id



Новичок


Покинул форум
Сообщений всего: 47
Дата рег-ции: Авг. 2017  
Откуда: замкадье


Помог: 1 раз(а)




rgl пишет:
сделать у левой колонки margin-left равным ширине правой фиксированной колонки?

Я имел ввиду все наоборот, сделать у ПРАВОЙ колонки margin-left равным ширине ЛЕВОЙ фиксированной колонки
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB