Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.07.2012, 16:38
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Меню (position: fixed в position: fixed)
Как спозиционировать элементы, чтобы верстка не разваливалась при масштабировании страницы (сейчас проблема спозиционировать <div class="content">) и какие более простые варианты получения подобного эффекта?

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



<style>
  body {
    background: lightgrey;
  }

 .menu {
    position: fixed;
    left: 20%; 
    top: 20%; 
    width: 60%; 
    height: 60%;
    background-color: grey;
  }

  .head {
    position: fixed; 
    left: 20%; 
    top: 20%; 
    width: 60%; 
    background: maroon; 
    color: whitesmoke;
  }

  .content {
    position: fixed;
    left: 20%; 
    top: 25%; 
    height: 50%;
    width: 60%; 
    overflow: auto;
  }

  .x {
    position: absolute;
    right: 2%; 
    cursor: pointer;
  }
</style>
 

<div class="menu" id="menu">
  <div class="head">
    <span>Меню</span>
    <span class="x" onclick="this.parentNode.parentNode.style.display = 'none'">x</span>
  </div>
  <div class="content">
    <a href="#">link1</a><br>
    <a href="#">link2</a><br>
    <a href="#">link3</a><br>
    <a href="#">link4</a><br>
    <a href="#">link5</a><br>
    <a href="#">link6</a><br>
    <a href="#">link7</a><br>
    <a href="#">link8</a><br>
    <a href="#">link9</a><br>
    <a href="#">link10</a><br>
    <a href="#">link11</a><br>
    <a href="#">link12</a><br>
    <a href="#">link13</a><br>
    <a href="#">link14</a><br>
    <a href="#">link15</a><br>
    <a href="#">link16</a><br>
  </div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 06.07.2012, 16:48
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от bes
Как спозиционировать элементы, чтобы верстка не разваливалась при масштабировании страницы (сейчас проблема
сделай таблицей внутрь меню с width:100% height:100%;

внутрь нижнего td засунь

.content {
28 height: 100%;
29 width: 100%;
30 overflow: auto;
31 }
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2012, 17:14
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

а зачем все делать fixed-достаточно только menu-а остальные либо static или absolute
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2012, 17:24
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Deff, спасибо за способ, сейчас попробую

Сообщение от vadim5june
а зачем все делать fixed-достаточно только menu-а остальные либо static или absolute
Первый блок с fixed, чтобы меню не смещалось при прокрутке страницы, аналогично для шапки - чтобы не смещалась при прокрутке самого меню.
Ответить с цитированием
  #5 (permalink)  
Старый 06.07.2012, 17:34
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

не вижу проблем если так сделать
<style>
  body {
    background: 

lightgrey;
height:1200px;  }

 .menu {
    

position: fixed;
    left: 20%; 
    

top: 20%; 
    width: 60%; 
    height: 

60%;
    background-color: grey;
  }

  

.head {
     
    left: 20%; 
    top: 

20%; 
    width: 100%; 
    background: 

maroon; 
    color: whitesmoke;
  }

  

.content {
    
    left: 20%; 
    top: 

25%; 
    height: 80%;
    width: 100%; 
 

   overflow: auto;
  }

  .x {
    

position: absolute;
    right: 2%; 
    

cursor: pointer;
  }
</style>
 

<div 

class="menu" id="menu">
  <div 

class="head">
    <span>Меню</span>
    

<span class="x" 

onclick="this.parentNode.parentNode.st

yle.display = 'none'">x</span>
  </div>
 

 <div class="content">
    <a 

href="#">link1</a><br>
    <a 

href="#">link2</a><br>
    <a 

href="#">link3</a><br>
    <a 

href="#">link4</a><br>
    <a 

href="#">link5</a><br>
    <a 

href="#">link6</a><br>
    <a 

href="#">link7</a><br>
    <a 

href="#">link8</a><br>
    <a 

href="#">link9</a><br>
    <a 

href="#">link10</a><br>
    <a 

href="#">link11</a><br>
    <a 

href="#">link12</a><br>
    <a 

href="#">link13</a><br>
    <a 

href="#">link14</a><br>
    <a 

href="#">link15</a><br>
    <a 

href="#">link16</a><br>
  </div>
</div>
Ответить с цитированием
  #6 (permalink)  
Старый 06.07.2012, 17:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

vadim5june,
<span>Меню</span> (высота) зависит от разрешения и масштаба -весь сыр бор в этом
Ответить с цитированием
  #7 (permalink)  
Старый 06.07.2012, 17:48
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Как-то так, Deff + (уже второй поставить не могу)
<style>
  body {
    background: lightgrey;
  }

 .menu {
    position: fixed;
    left: 20%; 
    top: 20%; 
    width: 60%; 
    height: 60%;
    background-color: grey;
    z-index: 100
  }

  .head {
    background: maroon; 
    color: whitesmoke;
    height: 10%;
  }

  .content {
    height: 100%;
    width: 100%;
    overflow: auto;
  }

  .x {
    position: absolute;
    right: 3%; 
    cursor: pointer;
    color: whitesmoke;
  }
</style>
 
<table class="menu">
  <tr>
    <td class="head">Меню
    <span class="x">x</span>
 </tr>
 <tr>
   <td><div class="content">
    <a href="#">link1</a><br>
    <a href="#">link2</a><br>
    <a href="#">link3</a><br>
    <a href="#">link4</a><br>
    <a href="#">link5</a><br>
    <a href="#">link6</a><br>
    <a href="#">link7</a><br>
    <a href="#">link8</a><br>
    <a href="#">link9</a><br>
    <a href="#">link10</a><br>
    <a href="#">link11</a><br>
    <a href="#">link12</a><br>
    <a href="#">link13</a><br>
    <a href="#">link14</a><br>
    <a href="#">link15</a><br>
    <a href="#">link16</a><br>
</div>
  </tr>
</table>



vadim5june, сейчас поразбираю ваш вариант.
Ответить с цитированием
  #8 (permalink)  
Старый 06.07.2012, 17:51
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Deff Посмотреть сообщение
vadim5june,
<span>Меню</span> (высота) зависит от разрешения и масштаба -весь сыр бор в этом
а fixed что дает?точно так же высота будет меняться
зато из-за задания top в процентах для head-20% а для content-25% при масштабировании одна на другую наезжает
Ответить с цитированием
  #9 (permalink)  
Старый 06.07.2012, 17:57
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от bes Посмотреть сообщение
vadim5june, сейчас поразбираю ваш вариант.
по моему тоже самое что Ваш последний если не считать мелочи
Ответить с цитированием
  #10 (permalink)  
Старый 06.07.2012, 18:00
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

vadim5june,
fixed для внутренних элементов не нужен -это Вы все верно казали -
Но таблица из двух строк засунутая в меню со 100% шириной -высотой решает проблемы и span и скролл блока
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Задача параметров fixed меню De-Luxe Элементы интерфейса 1 11.03.2012 15:00
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Оцените, пожалуйста код вёрстки OlegALL Ваши сайты и скрипты 18 26.07.2011 09:35
position fixed в IE6 sdff Общие вопросы Javascript 24 27.01.2010 15:16
вопрос по position fixed demi Events/DOM/Window 8 29.06.2009 06:40