Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.04.2018, 12:10
Новичок на форуме
Отправить личное сообщение для adwebzoom Посмотреть профиль Найти все сообщения от adwebzoom
 
Регистрация: 09.04.2018
Сообщений: 7

Выравнивание блока
Доброго дня!
Подскажите кто в теме, как можно добиться выравнивания блока по центру относительно кнопки, которая его и вызывает?

Есть многоуровневое меню (картинка 1)

Жму на кнопку Каталог - открывается блок с дополнительным содержимым. В этом содержимом есть подменю и под-под меню. Проблема тут такая часть содержимого из правого под-под меню не умещается на экране. Все потому, что блок с доп. содержимым относительно кнопки КАТАЛОГ открывается с выравниванием по левой своей части.

Вот код в этом положении
Код:
.cs-menu-container .dropdown,
ul.type-category li .sub-cate {
   position: absolute;
  top: auto;
  left: 0;
  z-index: 1000;
  float: none;
  min-width: 230px;
  padding: 0;
  margin: 0;
  border: 1px solid #cccccc;
  border-top:2px solid #c04a62;
  background: #fff;
Что я делаю:

меняю значение left: на -200px;

В итоге получаю нужное мне расположение (картинка 2)

Но тут же исправляя одно я получаю вторую проблему: блок содержимого кнопки ИНФОРМАЦИЯ уходит далеко влево от самой кнопки вызова (картинка 3)
Изображения:
Тип файла: jpg 1.jpg (69.5 Кб, 6 просмотров)
Тип файла: jpg 2.jpg (65.4 Кб, 3 просмотров)
Тип файла: jpg 3.jpg (94.1 Кб, 6 просмотров)
Вложения:
Тип файла: zip csmegamenu.zip (2.4 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 27.04.2018, 10:48
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Я не могу пояснять, некогда, но задача же понятная - надо сдвигать блок вручную, то есть скриптом. На чистом цсс... хз, карочи, там просто

dropdown_align=function(){
		var ns=button.nextSibling,ps=button.previousSibling,
			dd=button.querySelector('.ddc_window'),ds=dd.style;
		ds.left=ds.right='';
		if(!ps||button.offsetLeft-ps.offsetLeft<0) ds.left='0px';
		else if(!ns || ns.offsetLeft<button.offsetLeft) ds.right='7px';
		else {var bw=button.getBoundingClientRect().width,
			dw=dd.getBoundingClientRect().width;
			ds.right=((bw-dw)/2)+'px';}
	},


В точности такая же была задача и вот это ^^^ все четенько выравнивает.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
стрелки вниз, верх при раздвижение блоков dima018 Элементы интерфейса 8 12.02.2018 21:29
Вертикальное выравнивание в строке FanAizu (X)HTML/CSS 6 30.07.2014 18:06
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 17:13
Выравнивание блока с position absolute bayrach (X)HTML/CSS 5 28.10.2011 19:01
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21