Задать вопрос

lodas

Ответы пользователя по тегу HTML

  • Как выровнять по центру абсолютно позиционированный блок?

    @lodas
    На родителя в котором находится кнопка вешаем:
    display: flex;
justify-content: center;
align-items: center;
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать в слайдере slick подсчет слайдов?

    @lodas
    В одну сторону выводишь просто переменную общего кол-ва слайдов slideCount, а к динамической смене цифры применяешь такой код:
    /*Смена цифры в слайдере*/
$(".slider").on("afterChange", function(event, slick, currentSlide, nextSlide){
    $(".countsSlides span").text(currentSlide + 1);
});
    Ответ написан
    1 комментарий
    1 комментарий

  • Конфликт слайдера и ссылок в блоке?

    @lodas
    Для 
    .theme-light.slider-wrapper{
overflow: hidden;
}
    Ответ написан
    Комментировать
    Комментировать

  • HTML редактор для сайта?

    @lodas
    Можете использовать sublime text 3, у него есть плагин sftp позволяющий коннектиться к серверу и редактировать файлы прямо на нем.
    Ответ написан
    2 комментария
    2 комментария

  • Owl carousel как сделать так чтобы менялось только изображение?

    @lodas
    Вынесите по структуре before и after вне листающегося слайда(прикрепите их к родительскому элементу слайдера например) - тогда листаться будет только картинка.
    Ответ написан
    Комментировать
    Комментировать

  • Как зафиксировать карточки bootstrap?

    @lodas
    Фиксированную высоту давать не лучший вариант, можно сделать через флексбокс... но тут нужно учитывать сколько строк с товарами у вас будет т.к. flexbox выравнивает по самому высокому элементу в строке. Если строка одна, то делаем через флексы, если строк больше 1 пишем скрипт на js который пробегается по всем строкам ищет там максимальный блок по высоте и присваивает всем блокам эту высоту.
    Ответ написан
    Комментировать
    Комментировать

  • Как растянуть контент по высоте меню?

    @lodas
    Можно сделать так, html:
    <!DOCTYPE html>
<html>
<head>
	<meta http-equiv=Content-Type content='text/html; charset=utf-8'>
	<link href="style.css" rel="stylesheet" type="text/css"></head>
	<body>
		<div class="main">
			<div class="content">
				<div class="menu">
					<ul>
						<li><a href="#">Главная</a></li>
						<li><a href="#">Ссылка</a></li>
						<li><a href="#">Ссылка</a></li>
						<li><a href="#">Ссылка</a></li>
						<li><a href="#">Ссылка</a></li>
						<li><a href="#">Ссылка</a></li>
					</ul>
					Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков
				</div>
				<div class="left">
					<h1>Что такое Lorem Ipsum</h1>
					Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
				</div>
			</div>
			<div class="bottom">Copyright 2018</div>
	</div>
</body>
</html>

    И css:
    * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html, body {padding: 0; margin: 0;}
body {
  font-size: 70%;
  color: #325050;
  font-family: Arial, Tahoma, sans-serif;
  background: #eff3f6;
}

div {font-size: 1.2em;}
a:link, a:visited {color: #111; text-decoration: underline;}
a:hover {color: #000; text-decoration: underline;}
h1,h2 {font-size: 1.5em; font-weight: normal; color: #222; margin: 0; padding: 4px 0; text-decoration: none;}

.main {max-width: 1200px; min-width: 1000px; margin: 40px auto; position: relative;}
.main:after{
  content: "";
  display: table;
  clear: both;
}
.menu {
  width: 20%;
  background: #77c4d3;
  float:left;
  padding: 20px;
}

.left{
    float:left;
    width:80%;
    padding: 0 20px;
    box-sizing: border-box;
}

.content {
  float:left;
  background: #fff;
  width:100%;
  margin: 0 0 0 0px;
  text-align: justify;
  box-sizing: border-box;
}

.bottom {
  text-align: center;
  height: 80px;
  background: #fff;
  margin: 10px 0;
  width: 100%;
  float:left;
}
    Ответ написан
    1 комментарий
    1 комментарий

  • Как адаптировать блок?

    @lodas
    Для .prof-left и .prof-right ставьте ширину в процентах, т.е. например .prof-left {width:30%;} и .prof-right {width:70%;}. Подобрать процентное соотношение можно на максимально возможной ширине главного блока.
    Ответ написан
    Комментировать
    Комментировать