Как этот ужОс исправить?

Question

[Bosper130]

Псс. Я про ползунок и тот ужас который он открывает (белая полоса)


Буду очень рад если поможете исправить мой косяк. Так как не придется писать заново
код https://codepen.io/Bosper67/pen/XWrgXwG

Comments

[Rustam Bainazarov]

А в чем проблема заключается? Я, честно, не понял даже с указательной стрелкой красного цвета.

Выложите код на CodePen или Jsfiddle.

Смотрите, если это у вас некий домашний проект для души, почему бы не использовать готовый какой-нибудь HTML-шаблон? Их полно в Интернете. Скачивайте любой и пользуйтесь, видоизменяйте и т. д.

Ну, конечно, если вы обучаетесь на практике, то это иное дело.

[Bosper130]

Рустам Байназаров, Так и есть. Не знаю почему не использую макеты для тренировки просто пишу то что в голову придет. Даже если нужен был сайт то просто взять шаблон как то не так... Скучно чтоли

[Brad9aga]

Рустам Байназаров, 3.8, давай до свидания )

[Ankhena]

Тонюсенькая вдоль полосы прокрутки? Это браузера полоска.

[Bosper130]

Ankhena, ну так полосы прокрутки небыло бы тогда снизу. Разве не так?

[Bosper130]

Ankhena, а может я с катушки поехал

[Rustam Bainazarov]

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

[Владислав Лысков]

Bosper130, да, ты поехал с катушек, ты сейчас упомянул про горизонтальную, а в вопросе стрелка на вертикальную

[Ankhena]

Bosper130, про горизонтальную прокрутку это другой вопрос, мне кажется.
Не надо верстать флоатами, сейчас это совсем позорно.
Переделайте .raw на флекс. Сайдбару задать ширину, а контентному блоку просто flex:1

[Bosper130]

Владислав Лысков, эта хрень была на 8px больше это точно не могла быть полоса прокрутки

Answer 1

[Александр Логинов-Солоницын]

проблема в .name-iv. Ему нужно дать box-sizing:border-box. Вообще я вижу у тебя есть такой код:

* {
    padding: 0;
    margin: 0;
}

Значит нужно добавить еще немного

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

Вообще советую почитать про свойство box-sizing ) Очень полезно будет и сохранит кучу нервов)

Comments

[Bosper130]

Спасибо выручил, как будет время обезательно почитаю.

[Rustam Bainazarov]

Зачем так сложно, когда надо так делать сброс боковой модели:

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

Тем более с таким подходом, как у вас в ответе, может быть проблема, когда border-box будет наследоваться от родителя, если вы его переназначите для чего бы то ни было.

Исправьте, пожалуйста, ибо это ошибка по сути.

Bosper130, обратите внимание, пожалуйста, и вы. Не копируйте ошибочный код из ответа.

[Александр Логинов-Солоницын]

Рустам Байназаров, это как раз таки не проблема, а фича. Если головой немножко подумать.

[Rustam Bainazarov]

Александр Логинов-Солоницын, эм… тогда скажите, пожалуйста, почему этой фичей не пользуются ни на одном большом сайте, а пользуются тем кодом, что прислал я?

Зачем создавать узкие места? Если надо сделать наследование, то родителю меняйте border-box и через .parent * { border-box: inherit; } делаете ваше наследование для вложенных элементов, как все обычные люди.

Я помню, сколько проблем было, когда в Bootstrap это сделали таким макаром. Потом забывали, что там везде наследование стоит.

В Bootstrap 4, как вижу, исправили эту ахинею на нормальное:

https://github.com/twbs/bootstrap/blob/v4-dev/dist...

[Александр Логинов-Солоницын]

Рустам Байназаров, И что из того? Я статистики по этому поводу не веду.

[Александр Логинов-Солоницын]

Рустам Байназаров, лично я ни разу проблем с этим не испытывал.

[Rustam Bainazarov]

Александр Логинов-Солоницын, мда. То из того, что это не самая хорошая практика и что так уже никто не делает.

[Александр Логинов-Солоницын]

Рустам Байназаров, и? я например бутстрап вообще считаю ужасной практикой.

[Rustam Bainazarov]

Александр Логинов-Солоницын, Bootstrap сделан достаточно хорошо с точки зрения технологии. Другое дело, что его надо и не надо используют все и вся. Я тоже вообще его не использую, но сути это не меняет.

Это просто пример, где был ваш подход использован раньше. Посмотрите любой другой крупный хороший сайт — вы не увидите ваш код данного сброса. По весьма очевидным причинам.

[Александр Логинов-Солоницын]

Рустам Байназаров, какое мне дело до того как кто сбрасывает box-sizing? Я сбрасываю так и у меня нет никаких проблем. Если бы сбрасывал по другому - предоставил бы другой код. В каких-то проектах я вообще глобальным сбросом не пользуюсь, по тому что это большое зло. Ну и очевидно, что диалог уже не несёт никакого практического смысла =)

[Rustam Bainazarov]

Александр Логинов-Солоницын, просто есть стандарт, а есть предпочтения. Особенно когда работаете в команде. Тут уже не до личных предпочтений, когда дело касается таких вещей.

Мы так однажды несколько часов отлавливали подобное «предпочтение» другого разработчика, из-за которого ломалось всё.

Ну, собственно, делайте как хотите, конечно, если позволяет ситуация. Просто я бы не учил людей такому.

[Александр Логинов-Солоницын]

Рустам Байназаров, так не учите, я против чтоли? ))
Если есть стандарт - он должен быть описан и все в команде должны с ним ознакомиться. Если стандарт не описан, то какие могут быть претензии?
"Ну, собственно, делайте как хотите, конечно, если позволяет ситуация" - спасибо что разрешили, сам бы не догадался ))
Я же говорю - в диалоге больше нет практического смысла)

[Rustam Bainazarov]

Александр Логинов-Солоницын, мда.

[Александр Логинов-Солоницын]

Рустам Байназаров, да ладно) а, на всякий случай - никакого негатива не испытываю)

Answer 2

[Cheizer]

Выкладывайте на https://codepen.io код, никто не будет качать ваш архив.

Comments

[Bosper130]

https://codepen.io/Bosper67/pen/XWrgXwG

[Cheizer]

Bosper130, если вам не нравится стиль полосы прокрутки, измените ее стиль, добавьте css стили

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: #e9ae30
}

Answer 3

[Талян]

.main {
    width: calc(75% - 2px);

где-то там невидимый бордер затесался и тырит 2 пикселя