Плавающая менюшка

@ToDayGoodDay · Регистрация: 05.10.2010

Author24 — интернет-сервис помощи студентам

Есть страница, ширина допустим 100%.
На ней менюшка (плавающей ширины, сейчас 200px, завтра 400px), она находится по центру.
Соот. чтобы отцентровать устанавливаю margin: auto; а ширину менюшки задаю в css вручную.
Но это бредово. Проблема в том, что ширина меню не вычислима, ширина разделов разная, т.е. ширина 5 разделов 200px, а 10 всего 400px.
Что можно придумать?
Спасибо.

@killlfun · 06.07.2014, 22:45

ToDayGoodDay, какая задача?
отцентрировать или с шириной что то сделай?
нужна точная формулировка задания.

@Alex Japson · 06.07.2014, 22:46

то есть тебе нужно чтобы ширина меню подгонялась под ширину экрана и вставала по центру?

@ToDayGoodDay · 06.07.2014, 22:47 **[ТС]**

Отцентровать меню не задавая каждый раз ее ширину через css.

@Alex Japson · 06.07.2014, 22:48

попробуй в процентах, а не в пикселях подгонять

@vovandr · 06.07.2014, 23:29

HTML5

<nav role='navigation'>
  <ul class="flex-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
 
<nav role='navigation'>
  <ul class="in-block">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS

nav{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
}
ul{
  margin: 0;
  padding: 0;
}
a{
    text-decoration: none;
  display: block;
  padding: 20px;
  color: #fff;
}
.flex-menu{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  list-style: none;
  background: #000;
  justify-content: space-around;
}
 
.in-block{
   background: skyblue;
  list-style: none;
  text-align: justify;
  line-height: 0;   
    text-align-last: justify;
}
.in-block:after{
        width: 100%; 
        height: 0px;
        visibility: hidden;
        overflow: hidden;
        content: '';
        display: inline-block;
}
.in-block li{
  display: inline-block;
  font-size: 16px;
  line-height: 1;
}

Демо http://codepen.io/anon/pen/zjduf

@ToDayGoodDay · 07.07.2014, 23:19 **[ТС]**

А решение не html5, а html4 есть?

@vovandr · 07.07.2014, 23:23

Сообщение от ToDayGoodDay

А решение не html5, а html4 есть?

Я сам недавно искал когда делал это services.sokolniki.com и после долгих поисков решил сделать flexbox + для старых браузеров решение на js с заданием динамической высоты и ее изменением при ресайзе. Работает все хорошо

Просто так разместить блоки равномерно по оставшейся высоте я не знаю как)

@ToDayGoodDay 1 / 1 / 1 Регистрация: 05.10.2010 Сообщений: 13
		1
	Плавающая менюшка 06.07.2014, 22:39. Показов 1172. Ответов 7 Метки нет (Все метки) Есть страница, ширина допустим 100%. На ней менюшка (плавающей ширины, сейчас 200px, завтра 400px), она находится по центру. Соот. чтобы отцентровать устанавливаю margin: auto; а ширину менюшки задаю в css вручную. Но это бредово. Проблема в том, что ширина меню не вычислима, ширина разделов разная, т.е. ширина 5 разделов 200px, а 10 всего 400px. Что можно придумать? Спасибо. 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	06.07.2014, 22:45	2
	ToDayGoodDay, какая задача? отцентрировать или с шириной что то сделай? нужна точная формулировка задания. 0

@Alex Japson 37 / 37 / 11 Регистрация: 07.08.2013 Сообщений: 145 Записей в блоге: 1
	06.07.2014, 22:46	3
	то есть тебе нужно чтобы ширина меню подгонялась под ширину экрана и вставала по центру? 0

@ToDayGoodDay 1 / 1 / 1 Регистрация: 05.10.2010 Сообщений: 13
	06.07.2014, 22:47 [ТС]	4
	Отцентровать меню не задавая каждый раз ее ширину через css. 0

@Alex Japson 37 / 37 / 11 Регистрация: 07.08.2013 Сообщений: 145 Записей в блоге: 1
	06.07.2014, 22:48	5
	попробуй в процентах, а не в пикселях подгонять 0

@ToDayGoodDay 1 / 1 / 1 Регистрация: 05.10.2010 Сообщений: 13
	07.07.2014, 23:19 [ТС]	7
	А решение не html5, а html4 есть? 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	07.07.2014, 23:23	8
	Сообщение от ToDayGoodDay А решение не html5, а html4 есть? Я сам недавно искал когда делал это services.sokolniki.com и после долгих поисков решил сделать flexbox + для старых браузеров решение на js с заданием динамической высоты и ее изменением при ресайзе. Работает все хорошо Просто так разместить блоки равномерно по оставшейся высоте я не знаю как) 0