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

Почему у nav есть внешний отступ?

Sergey @sergey155

1) зачем перекрученный html ?? Может есть смысл nav поставить перед тегом main ??
2) Вы же сами центруете контент по центру " margin: 0 auto;"
3) Такой подход с float это самоубийство

#container {
    width: 800px;
    margin: 0 auto;
}

4) опечатка в : margin left заменить на margin-left:

main {
  float: left;
  margin left: 200px;
  width: 600px;
}

5) Обнуление, как вариант reset

header{
    background-color: #c0c0c0;
}

aside {
    background-color: #ff8040;
    width: 200px;
}

h1 {
  padding:0;
  margin:0;
}

p {
  margin:0;
}

nav {
    background-color: #8080ff;
    width: 200px;
    float: left;
}

main {
  margin-left: 200px;
  width: 600px;
}

footer {
    background-color: #400000;
    color: white;
    clear: left;
}

#container {
    width: 800px;
}

Ответ написан более года назад

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

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

Sergey @sergey155

Если вы хотите создать табы без использования JavaScript, вы можете использовать чекбоксы и псевдоклассы

Простые табы на HTML и CSS. Как это сделать?
Как сделать табы на: чистом CSS / чистом JS / гряз...

<div class="container">
  <div class="tab">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
</div>

<div>
    <input type="radio" id="tab1" name="tab" checked>
    <div class="tabcontent">
        <h3>Content for Tab 1</h3>
    </div>

    <input type="radio" id="tab2" name="tab">
    <div class="tabcontent">
        <h3>Content for Tab 2</h3>
    </div>

    <input type="radio" id="tab3" name="tab">
    <div class="tabcontent">
        <h3>Content for Tab 3</h3>
    </div>
</div>
</div>

.container {
  width:800px;
  margin: 0 auto;
}

.tab {
  display:flex;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab label {
  display: block;
  float: left;
  padding: 14px 16px;
  cursor: pointer;
  width: 33.3%;
  text-align: center;
}

input {
  display: none;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

input:checked + .tabcontent {
  display: block;
}

Ответ написан более года назад

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

Как сверстать такой блок на флексах с изменением порядка его элементов?

Sergey @sergey155

Так а чем такой вариант вас не устраивает ?

<div class="container">
        <div class="block">
            <div class="sub-block">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div>
            <div class="sub-block">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor iure unde! Ab error ipsum minima non possimus quia tenetur. Autem eveniet, harum id ipsam labore nostrum sequi similique voluptate!</div>
        </div>
        <div class="block">
            <div class="sub-block">Блок 3</div>
        </div>
    </div>

.container {
        width:800px;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
    }
    .block {
        width: 100%;
        border: 1px solid black;
        padding: 20px;
        box-sizing: border-box;
    }
    .sub-block {
        margin-bottom: 20px;
    }

Ответ написан более года назад

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

Как лучше оформить такую галерею?

Sergey @sergey155

Создание несимметричной сетки с помощью Grid Layout
Second step

Ответ написан более года назад

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

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

Sergey @sergey155

Используете свойство overflow: scroll, есть два варианта прокрутки - горизонтальная и вертикальная. Вот как вы можете настроить каждый из них:

Горизонтальная прокрутка
Если вам нужно добавить горизонтальную прокрутку к вашему контейнеру, вы можете использовать следующее:

.scroll-container {
  width: 300px; /* Ширина вашего контейнера */
  height: 200px; /* Высота вашего контейнера */
  overflow-x: scroll; /* Добавление горизонтальной прокрутки */
}

Вертикальная прокрутка
Если вы хотите добавить вертикальную прокрутку к вашему контейнеру, используйте следующий код:

.scroll-container {
  width: 300px; /* Ширина вашего контейнера */
  height: 200px; /* Высота вашего контейнера */
  overflow-y: scroll; /* Добавление вертикальной прокрутки */
}

Ответ написан более года назад

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

При создании div боковое меню сдвигается, что делать?

Sergey @sergey155

Проблема в float

Как вариант можно использовать flexboxили grid

body {
  display: flex;
  margin: 0;
}

aside {
  background: #5c8a21fa;
  width: 17%;
  padding: 2.5%;
  height: 100vh;
  color: #fff;
  border-right: 5px solid #4d4d4d;
}

aside img {
  width: 65%;
  align-self: center;
  margin-bottom: 20px;
}

aside ul {
  list-style: none;
  padding: 0;
}

aside ul li {
  color: #fff;
  margin-top: 20px;
  transition: all 0.6s ease;
}

aside ul li,
aside ul a {
  text-decoration: none;
}

aside ul li:hover,
aside ul a:hover {
  color: #eb5959;
  text-decoration: none;
  transform: scale(1.05);
}

.content {
  flex: 1;
  background: #a6fa52fa;
  padding: 2.5%;
}

Когда работаете с float, вам нужно использовать clear fix

body {
  background: #a6fa52fa;
}

aside {
  float: left;
  background: #5c8a21fa;
  width: 17%;
  padding: 2.5%;
  height: 100vh;
  color: #fff;
  border-right: 5px solid #4d4d4d;
}

aside::after {
  content: "";
  display: table;
  clear: both;
}

aside img {
  width: 65%;
  float: left;
  position: relative;
  left: -40px;
  top: -30px;
}

aside ul {
  list-style: none;
}

aside ul li {
  color: #fff;
  display: block;
  margin-top: 20px;
  transition: all .6s ease;
}

aside ul li,
aside ul a {
  text-decoration: none;
}

aside ul li:hover,
aside ul a:hover {
  color: #eb5959;
  text-decoration: none;
  transform: scale(1.05);
}

Ответ написан более года назад

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

Как мне исправить анимацию?

Sergey @sergey155

*,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      border: 0;
      padding: 0;
      white-space: nowrap;
      clip-path: inset(100%);
      clip: rect(0 0 0 0);
      overflow: hidden;
    }

    .wrapper {
      width: fit-content;
      padding: 50px;
      margin: 20px auto;
      outline: 2px dashed tomato;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .check-label {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 20px;
      background-color: lightgrey;
      border: 1px solid grey;
      border-radius: 10px;
      box-shadow: 1px -2px 3px 2px rgba(0, 0, 0, 0.2) inset;
      background: linear-gradient(to right, blue, navy);
      background-repeat: no-repeat;
      background-size: 80%;
      background-position: -50px;
      transition: background-position 0.2s ease;
    }

    .check-label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 23px;
      height: 23px;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      background-color: gainsboro;
      border: 5px solid dimgrey;
      border-radius: 50%;
      transition: left 0.25s ease;
    }

    #check:checked ~ .check-label {
      background-position: left;
    }

    #check:checked ~ .check-label::before {
      left: 27px;
    }

Ответ написан более года назад

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

Почему стилизация select отличается в браузерах?

Sergey @sergey155

Стилизация элементов<select> и <option> с помощью CSS в некоторых аспектах ограничена. Это связано с тем, что рендеринг выпадающего списка и его пунктов (<option>) веб-браузерами в значительной степени зависит от нативного операционной системы интерфейса пользователя (OS UI). В результате многие аспекты этих элементов, такие как ширина выпадающего списка, оформление выпадающего списка, и стилизация пунктов списка, могут оказаться сложными для полного контроля с помощью обычных CSS.

Для стилизации можете воспользоваться например select2

Ответ написан более года назад

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

Как сделать тень для класса?

Sergey @sergey155

Так ??

.item {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 13px;
}

.item_box {
  position: relative;
  overflow: hidden;
  width: 350px;
  height: 345px;
  border-radius: 4px;
  background: #1b2837;
}

.item_box_icon {
  width: 136px;
  height: 102px;
  border-radius: 50%;
  background: #003adb;
  position: absolute;
  bottom: -100px;
  right: -100px;
  z-index: 0;
  transition: 0.3s;
  box-shadow: 0px 10px 29px 0px rgba(64, 129, 255, 0.24);
}

.item_box:hover .item_box_icon {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  bottom: -180px;
  right: -180px;
  z-index: 0;
  transition: 0.3s;
}

Ответ написан более года назад

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

Адаптивный background html css?

Sergey @sergey155

.container {
  margin: 0 auto;
  max-width: 1200px; /* Измените ширину на максимальную ширину, а не фиксированную */
  padding: 0 20px; /* Добавьте небольшие отступы по бокам для контента */
  box-sizing: border-box;
}

#home_page .section-header .container:nth-child(2) h1 {
  font-size: clamp(2rem, 5vw, 9.375rem);  /* Замените на ваши значения */
}

Ответ написан более года назад

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

Как сделать боксы подряд?

Sergey @sergey155

<div class="container">
        <input type="search" placeholder="Поиск товаров" class="search-engine">
        <div class="button"></div>
    </div>

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.search-engine{
    font-family: Noto;
    color: rgba(19,75,92,0.32);
    border: 5px solid rgb(92, 195, 255);
    border-radius: 20px;
    background-color: rgb(234, 245, 255);
    width: 300px;
    height: 50px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 15px;
    margin-right: 10px;
}

.button{
    border: 1px solid rgb(92, 195, 255);
    height: 50px;
    border-radius: 10px;
    background-color: rgb(92, 195, 255);
    width: 100px;
}

Ответ написан более года назад

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

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