Ответы пользователя Serdji по тегу «CSS»

Почему фотографии "уплывают" с границ блока?

Serdji @ssumatokhin

Хотелось бы увидеть css

Как покрасить контаинер?

Serdji @ssumatokhin

Скорее всего он краситься, просто цвет #f5f5f5 это практический белый цвет. Может Вы хотите такой вот цвет #EDE9DE

Попробуйте так

background: rgba(245,245,245,1);
background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(50%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(246,246,246,1) 50%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ededed', GradientType=0 );

Ответ написан более трёх лет назад

Комментировать

Табы на jQuery. Как сделать сворачивание?

Serdji @ssumatokhin

if(contentItem.hasClass('active')){
        contentItem.removeClass('active');
      } else {
       contentItem
          .eq(itemPos)
          .add(item)
          .addClass('active')
          .siblings()
          .removeClass('active');	 
      };

Ответ написан более трёх лет назад

Комментировать

В IE 11 Не работает display: flex в связке с magin: auto?

Serdji @ssumatokhin Автор вопроса

Да, уже все методы попробовал и пришел к решению просто написать на JS

module.exports = () => {
  let photo = document.querySelector('.js-big-photo');
  if (!photo) return;
  photo.addEventListener('click', bigPhoto);

  function bigPhoto() {
    let photoTitle = document.querySelector('.js-big-photo-title').innerText;
    let photoSubtitle = document.querySelector('.js-big-photo-subtitle').innerText;
    let imgCrc = this.getAttribute('src');
    let mrgnRght = (window.innerWidth) - (document.body.offsetWidth);
    let bigPhotoBlock = document.createElement('div');

    bigPhotoBlock.className = 'big-photo';
    bigPhotoBlock.innerHTML = `<div class="big-photo__box">
                                <img class="big-photo__photo" src="${imgCrc}">
                                <div class="big-photo__title">
                                  ${photoTitle}
                                </div>
                                <div class="big-photo__subtitle">
                                  ${photoSubtitle}
                                </div>
                              </div>`;

    document.body.style.cssText = `overflow: hidden; margin-right: ${mrgnRght}px`;
    document.body.appendChild(bigPhotoBlock);

    let bgPhtHgth = document.querySelector('.big-photo');
    let boxPhoto =  bgPhtHgth.querySelector('.big-photo__box');
    let posTop = (bgPhtHgth.offsetHeight / 2) - (boxPhoto.offsetHeight / 2);
    let posLeft = (bgPhtHgth.offsetWidth / 2) - (boxPhoto.offsetWidth / 2);

    boxPhoto.style.cssText = `top: ${posTop}px; left: ${posLeft}px`;

    bigPhotoBlock.addEventListener('click', () => {
      bigPhotoBlock.parentNode.removeChild(bigPhotoBlock);
      document.body.style.cssText = ``;
    });
  }
};

Ответ написан более трёх лет назад

Комментировать

Как сделать,чтобы один блок закрывался при открытии другого?

Serdji @ssumatokhin

$( function () {

	$( '.register-block-hidden' ).show();

	$( '.register' ).on( 'click', function() {
		$( '.login-block-visible' ).fadeOut( 500 );
		$( '.register-block-hidden' ).fadeIn( 500 );
	});

	$( '.logir' ).on( 'click', function() {
		$( '.login-block-visible' ).fadeIn( 500 );
		$( '.register-block-hidden' ).fadeOut( 500 );
	});


});

Ответ написан более трёх лет назад

Комментировать

Как сверстать такой элемент?

Serdji @ssumatokhin

Можно, но нужно будет очень постараться. Для начала советую вам посмотреть такие вот примеры и уже из них сделать что то свое css.yoksel.ru/css-figury и webformyself.com/figury-na-css-vvodnyj-kurs

Ответ написан более трёх лет назад

Комментировать

Сделал слайдер, а кнопки не работают?

Serdji @ssumatokhin

Может быть стоило бы подвесить событие не в самом теги span а в JS ? например так.

<span class="prev">&lt;</span>
		    <span class="next">&gt;</span>

$(  '.prev'  ).on('click',  function() {
	var newSlider = sliderInt - 1;
	showSlider(newSlider);
});

$( '.next' ).on('click',  function() {
	var newSlider = sliderInt + 1;
	showSlider(newSlider);
});

Если все равно работать не будет, можно попробовать сделать дилигирование

$(  docunent  ).on('click',  '.prev',  function() {
	var newSlider = sliderInt - 1;
	showSlider(newSlider);
});

$(  documetn  ).on('click',  '.next',  function() {
	var newSlider = sliderInt + 1;
	showSlider(newSlider);
});

Ответ написан более трёх лет назад

Комментировать

Как в третьем блоке div убрать бордер?

Serdji @ssumatokhin

.blglall > div:nth-of-type(2){
  border-right: none;
}

Ответ написан более трёх лет назад

8 комментариев

Как растянуть google-карту на всю высоту блока?

Serdji @ssumatokhin

Я бы на вашем месте подключил JQuery и сделал следующие. Допустим у нас есть<div id="mapBox"> у него своя высота, которая меняется как я понимаю от размеров монитора и у нас есть див в который обвернута карта <div id="map">, тогда в JQuery пишем всего две строчки и все будет работать

var mapHeight = $( '#mapBox' ).height();
$( '#map' ).css('height', mapHeight);

Ответ написан более трёх лет назад

3 комментария

Текст по центру блока?

Serdji @ssumatokhin

Можно попробовать с помощь Flexbox верстки. Видосики на эту тему тут

Ответ написан более трёх лет назад

1 комментарий

Как показать центральную часть < img > произвольного размера в блочном элементе с помощью CSS?

Serdji @ssumatokhin

Можно попробовать с помощь Flexbox верстки. Видосики на эту тему тут

Ответ написан более трёх лет назад

Комментировать

Как реализовать плавный сдвиг блока при изменении ширины браузера?

Serdji @ssumatokhin

Тут нужно условие, можно на JQuery написать, примерно так

var height = $(window).height(),
		width  = $(window).width();

		if (height > 600 && width > 1900) {
			$('.....').animate({
				param1: value1,
				param2: value2},
				speed, function() {
			});
		} else {
			$('.....').animate({
				param1: value1,
				param2: value2},
				speed, function() {
			});
		};

Это
$('.....').animate

Имеется в виду объект или объекты которые должны перемещаться.

Ответ написан более трёх лет назад

Комментировать

Почему криво работает transition?

Serdji @ssumatokhin

Да в самом деле есть не большие баги. Попробуй на прямую задать класс, а не по ветки в низ спускаться (#carousel img).

Ответ написан более трёх лет назад

Комментировать

Как поступить с сеткой bootstrap в моем случае?

Serdji @ssumatokhin

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
        Контент
      </div>
      <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          корзина
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          категории
        </div>
      </div>
    </div>
  </div>
</div>

Ну как то так. Только нужно поиграться с цифрами и вложенностью.

Ответ написан более трёх лет назад

1 комментарий

Как не дать тексту тега "a" вылезти за рамки родительского дива?

Serdji @ssumatokhin

Основному блоку, в котором текст, задай параметр в CSS overflow: hidden;

Ответ написан более трёх лет назад

4 комментария

Как скрыть отображение счетчиков?

Serdji @ssumatokhin

Просто поставьте заново счетчики и в настрой поставьте не отображать. Если не хотите с эти мочится, задайте класс счетчику, в свойствах display: none;
или opacity: 0;

Проще всего будет сделать, стиль прописать в теге, это не правильно, но проще всего

<div style="display: none;">счетчик</div>

Ответ написан более трёх лет назад

Комментировать

Как установить максимальную ширину картинкам в комментариях Disqus?

Serdji @ssumatokhin

Как вариант на клик, при нажатии на кнопку опубликовать.

$( 'button' ).on( 'click', function {
	$( 'img' ).addClass( '.media-container' );
} );

Ответ написан более трёх лет назад

3 комментария

Движение элементов на странице по скролу?

Serdji @ssumatokhin

Я думаю Вам будет интересно посмотреть этот урок

Ответ написан более трёх лет назад

3 комментария

Почему съезжают заглавные буквы?

Serdji @ssumatokhin

При фразе "после загрузки страницы" есть подозрение что дело в JS. Но так же если отображается нормально в CentOS 6 и Chromium может быть проблема в кроссбраузерности.
-webkit-
-moz-
-ms-
-o-
Конечно хорошо бы, что бы Вы дали ссылку на ваш сайт, так можно было бы точнее дать ответ.

Ответ написан более трёх лет назад

2 комментария

Как побороть глюк Animate.css в Chrome?

Serdji @ssumatokhin

Попробуйте удаль существующие классы и добавить новые и в CSS прописать ко всем браузером

-webkit-
-moz-
-ms-
-o-

$(div).removeClass('class').addClass('animated fadeInRight');

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт