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

noeer

Ответы пользователя по тегу Вёрстка

  • Возможно ли выполнить верстку блока на Bootstrap?

    @noeer
    С помощью вложенных рядов можно сделать колонки практически любой ширины.
    Ответ написан
    2 комментария
    2 комментария

  • Article или section, без заголовка, как вернее?

    @noeer
    ИМХО правильней сделать section>article*4, так как section задаёт раздел документа и может применяться для блока новостей. (htmlbook.ru/html/section)
    А article задает содержание сайта вроде новости, статьи, записи блога (htmlbook.ru/html/article)
    Хотя валидатор w3 принимает без ошибок оба варианта.

    Заголовки должны должны быть и у section, и у article. Хотя это не критично. Тот же валидатор выдает предупреждение Warning, а не ошибку.
    Скрывать заголовок не стоит. Страница должна быть одинаковой для пользователей и поисковиков.
    Ответ написан
    Комментировать
    Комментировать

  • Как выровнять высоту изображения absolute в родительском div relаtive?

    @noeer
    1. Нельзя заставить блок растягиваться в соответствии с высотой содержимого, если последнее имеет position: absolute. Ищите другие способы реализации.
    2. Чтобы выровнять абсолютно спозиционированные кнопки по центру, относительно высоты родительского блока, нужно знать высоту самих кнопок. Например, если высота кнопок 30px
    .prev,
.next{
	position: absolute;
	top: 50%;
	height: 30px;
	margin-top: -15px;
}
    Ответ написан
    Комментировать
    Комментировать

  • Как этолендинг на три экрана?

    @noeer
    Лендинг должен быть из 3 секций.
    "Экран" - это секция размером с экран монитора.
    Ответ написан
    Комментировать
    Комментировать

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

    @noeer
    Нужно обернуть каждую карточку в дополнительный блок с фиксированной высотой.
    <div class="news__item-wrap">
	<div class="news__item">
		<div class="products__image">
			<img src="https://i.ibb.co/Jm1BgzF/picture-image.jpg" alt="">
		</div>
		<div class="news__text">  
			<div class="news__title">
				Выработка масла в год ...
			</div>
			<p class="news__description">
				В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. 
			</p>
		</div>
	</div>
</div>


    .news__item-wrap {
  	height: 352px;
    width: -webkit-calc(100% / 3 - 16px);
    width: calc(100% / 3 - 16px);
    margin-right: 8px;
    margin-left: 8px;
    padding-bottom: 15px;
    margin-bottom: 35px;
  }
    @media screen and (max-width: 960px) {
      .news__item-wrap {
        width: -webkit-calc(100% / 2 - 16px);
        width: calc(100% / 2 - 16px); } }
    @media screen and (max-width: 767px) {
      .news__item-wrap {
        width: -webkit-calc(100% / 1 - 16px);
        width: calc(100% / 1 - 16px); } }

  .news__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); }
   	.news__item:hover {
   		z-index: 2;
   	}
    Ответ написан
    4 комментария
    4 комментария

  • Как сделать следующую пагинацию?

    @noeer
    Это называется постраничная навигация или пагинация, что одно и то же.
    На эту тему есть много статей. Например php-zametki.ru/php-prodvinutym/104-extends-paginat...
    Ответ написан
    4 комментария
    4 комментария

  • Как сделать отступы в ссылках?

    @noeer
    Вместо padding задавайте margin
    Ответ написан
    2 комментария
    2 комментария

  • Как выбить изображение за пределы блока?

    @noeer
    Нужно прижать к левой стороне страницы?
    Или к левой стороне контейнера?
    Если привязка нужна именно экрану, то псевдоэлемент нужно создавать для секции.
    Примерно так
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.block{
			position: relative;
		}
		.block:before{
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100px;
			height: 100px;
			background: url('https://via.placeholder.com/100.png/09f/fff');
		}
		.container{
			width: 1200px;
			margin: 0 auto;
			position: relative;
			z-index: 2;
		}
	</style>
</head>
<body>
	<div class="block">
		<div class="container">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed temporibus, aliquam. Explicabo, unde eos officia dignissimos ducimus cum esse rem fugiat, dolorum odio non natus neque repellat asperiores! Fuga, dolores.</p>
		</div>
	</div>
</body>
</html>
    Ответ написан
    Комментировать
    Комментировать

  • Есть курсы по адаптивной верстке с быстрым стартом?

    @noeer
    Насчет boostrap, - решение верное. Очень облегчает жизнь верстальщика.
    Но если верстать собираетесь разово, то лучше нанять специалиста, т.к. комплексный курс по бутстрапу будет стоить денег. И плюс, с первого раза все-равно качественно не сверстаете.
    Ответ написан
    Комментировать
    Комментировать