Схлоп границы CSS

delletc

http://solsticegraphics.eu/

Это мой сайт. Чуть ниже заголовка находится сетка элементов div, для которых требуется граница шириной 1 пиксель.

Это CSS для класса элементов, для которых мне нужна граница:

 [/URL]


[URL='https://lumtu.com/yti/dl55ldS9odHRwOi8vc29sc3RpY2VncmFwaGljcyjlG'].elem {


float: left;


width: 220px;


height: 150px;


border: 1px solid #f1f1f1;


border-collapse: collapse !important;


-webkit-box-shadow: inset 10px 10px 50px -13px rgba(0,0,0,0.17);


-moz-box-shadow: inset 10px 10px 50px -13px rgba(0,0,0,0.17);


box-shadow: inset 10px 10px 50px -13px rgba(0,0,0,0.17);


}

Код (разметка): элементы div между другими элементами div имеют границу шириной 2 пикселя и не сворачиваются. :/

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

SystemIP

Таблицы определенно НЕ являются ответом; это не табличные данные, поэтому вы будете тратить время на доступность, семантику и логическую структуру документа, используя их для этого.

Тем не менее, вы уже разозлились на доступность этого дизайна; у вас есть макет фиксированной ширины с нулевым планом для автоматической настройки, а также огромная область одинаковой ширины с элементами одинаковой высоты для загрузки.

Первое, что нужно сделать, это фиксированная ширина...

Хотя вся ваша страница наполнена проблемами, начиная от неразборчивого сжатого веб-шрифта, объявлений шрифтов с пиксельной метрикой, отсутствия гибкого дизайна, неразборчивых цветовых контрастов, намного ниже минимальных значений WCAG AA и т. д. и т. п., и это до того, как мы поговорим о крушении поезда " как не писать HTML» и мусорные скрипты, которые у него под капотом.

что приводит к полному отсутствию изящной деградации.

следовательно, эта страница извергает 24 КБ HTML, выполняя работу 8 КБ... тем более нелепо Я бы выбросил всю эту катастрофу в мусор, даже не подумав о чем-то обыденном, например, о границе в 1 пиксель. Извините, если это кажется немного резким, но правда всегда такова.

Это ОЧЕНЬ то, чего я ожидал, когда искусство ставится на передний план дизайна, а не как окончательная очистка процесса - результат оказывается бесполезным для большого количества пользователей из-за полного игнорирования доступности и удобства использования.

или пользовательский опыт.

SweetDie

Вы же понимаете, что схлопывание границ применимо и к таблицам, верно? Видеть 17.6 Границы

. ваше здоровье, Гэри

_Aleksey_

Поместите вокруг них обёртывающий div, border:solid #FFF; ширина границы: 1px 0 0 1px; Для каждого дочернего элемента внутри него, предполагая, что они плавающие, добавьте border:solid #FFF; ширина границы:0 1px 1px 0; Вместо того, чтобы пытаться заставить их свернуть друг на друга, установите границу только в правом нижнем углу каждого элемента и поместите верхнюю левую границу родительского элемента.

Sapfiras

Я помню тебя, тень смерти.

Ты заставила меня ухмыльнуться, как в прошлый раз.

Спасибо за ваш ответ. Я определенно не являюсь отличным веб-дизайнером и интерфейсным дизайнером, и на данный момент у меня не так много времени, чтобы научиться профессионально писать html и css.

Я обязательно сделаю это позже, обещаю.

Мне нравится изучать HTML и CSS, но, к сожалению, я не смог выучить все сразу. В любом случае, если есть способ разрушить эти проклятые границы и кто-то опубликует решение, я буду очень признателен. Спасибо ребята.

Похожие темы	Дата
Общение дизайнеров	19.10.2024, 18:10
Какова стоимость отрисовки ииллюстрации в векторе	19.10.2024, 18:10
Как расставить мебель в картинке дизайна?	19.10.2024, 18:10
13 статистических данных WordPress, о которых должен знать каждый веб-дизайнер	19.10.2024, 18:10
Совет по CMS — WordPress или Joomla	19.10.2024, 18:10
Интерфейс крошечного mce не работает	19.10.2024, 18:10
Дизайн сайта	19.10.2024, 18:10
Сайт для обмена дизайнерскими изображениями	19.10.2024, 18:10
JoomlaBundle — первый в мире пакет «ВСЕ в ОДНОМ» для Joomla!	19.10.2024, 18:10
Как стать успешным блоггером: советы начинающим	19.10.2024, 18:10

Схлоп границы CSS

delletc

SystemIP

SweetDie

_Aleksey_

Sapfiras

I AM

Интересно