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

UndineS

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

  • Как сверстать такую сетку?

    @UndineS
    гриды (display: grid и свойства для описания гридов) позволяют задать такое.

    С помощью гридов можно на уровне родительского блока указать стандартную ширину/высоту ячейки сетки (как в долях от экрана, так и в пикселях, в процентах, чередуя различные варианты), а уже у конкретного блока указывать границы его начала/окончания по вертикали и по горизонтали, основываясь на сетке, описанной в родительском блоке (например, указать, что первый блок по высоте идет от линии 1 до линии 3, а по ширине - от линии 1 до линии 2 и т.п.). Можно даже в описании родительского блока указать, какие ячейки должны занимать потомки, указывая их класс (пример тут: https://developer.mozilla.org/en-US/docs/Web/CSS/C... )

    Подробнее о гридах на русском языке тут: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать такое фон?

    @UndineS
    Задать список бэкграундов: 
    body {
    background:  linear-gradient(to right, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0), rgba(0, 0, 0, 1)),  url(background_picture.jpg) 0 0 no-repeat;
    background-size: auto 100%;
}


    Такие настройки позволяют сделать фоном картинку "background_picture.jpg", а поверх нее наложить градиент слева направо: черный - прозрачный - черный. Если черный создает слишком темное оформление, можно поставить вместо "1" (это степень непрозрачности, измеряется от 0 до 1) что-то ближе к нулю (например, "0,5").
    В свойстве background-size указываем: если нужно растянуть картинку по высоте - "auto 100%", если по ширине - "100% auto".

    Подробнее об использованных свойствах:
    htmlbook.ru/css/background
    htmlbook.ru/css/background-size
    htmlbook.ru/css3-na-primerakh/lineinyi-gradient
    Ответ написан
    Комментировать
    Комментировать

  • Как раскрыть блок?

    @UndineS
    В большинстве случаев, такой эффект скрывающегося текста происходит из-за наличия свойства overflow:hidden + конкретно заданных размеров блока. (подробнее про overflow: htmlbook.ru/css/overflow). Свойство overflow отвечает за наличие полосы прокрутки. В режиме "hidden" полоса прокрутки скрыта и "лишний" текст просто обрезается.

    Для решения проблемы можете либо задать высоту блока (height) как height:auto (высота блока будет подстраиваться под размер текста), либо просто сделать число побольше, чтобы точно влезло всё, но блок на всех страницах был одинаковой высоты.
    Другой вариант - заменить значение свойства overflow с "hidden", например, на "scroll" - тогда размеры блока можно не менять, но на больших текстах будет появляться полоса прокрутки.
    Ответ написан
    Комментировать
    Комментировать

  • Как убрать отступы?

    @UndineS
    Текст страницы заключен в div со следующими классами:
    <div id="content" class="site-content">
		<div class="container">

    На странице подключен бутстрап (bootstrap.min.css), который задает тегам с классом "container" фиксированную ширину:
    @media (min-width: 768px) { //это означает, что в родительском классе с шириной от 768 пикселей (фактически, в данном случае, при экранах от 768 пикселей) блок с контентом будет иметь ширину от 750 пикселей
    .container {
        width:750px
    }
}

@media (min-width: 992px) { //на экранах от 992 пикселей - блок "container" будет иметь ширину 970 пикселей
    .container {
        width:970px
    }
}

@media (min-width: 1200px) { //на экранах от 1200 пикселей - блок "container" будет иметь ширину 1170 пикселей
    .container {
        width:1170px
    }
}


    Чтобы "перебить" стандартные настройки - рекомендую добавить более сложный селектор для текущего случая (более сложные селекторы имеют приоритет над более общими):
    .site-content .container {
width:100%;
}

    Таким образом, зададим ширину по размеру родительского блока "site-content" (фактически, на ширину экрана).
    Если хочется убрать и оставшиеся отступы по краям, то кроме условия на ширину добавляем:
    padding-right: 0px;
    padding-left: 0px;

    Стандартно паддинги стоят 15 пикселей.
    Ответ написан
    4 комментария
    4 комментария