• 0
v01d0s

Границы не до конца ширины/высоты элемента

Вопрос

Поделитесь советом люди добрые.

Есть шаблон интернет магазина, там границы у элементов не до конца h_1352120354_9618602_274ccfa654.jpeg

Как лучше сделать?

У меня пока есть варианты - сделать с использованием дополнительных элементов(например: нижняя граница у одного элемента, а боковая у вложенного в него элемента, с большей шириной и меньшей высотой) , или бэкграундом.

Но эти варианты мне как-то не нравятся. Может кто чего подскажет еще.

Изменено пользователем v01d0s

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

6 ответов на этот вопрос

  • 0

Использовать таблицу. Линии между ячейками dotted. td:after { display: block; width: ...; height: ...; background-color: white; position: absolute; left: -(половина ширины); bottom: -(половина высоты); }

М.б. понадобиться z-index.

Изменено пользователем skvor

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Использовать таблицу. Линии между ячейками dotted. td:after { display: block; width: ...; height: ...; background-color: white; position: absolute; left: -(половина ширины); bottom: -(половина высоты); }

М.б. понадобиться z-index.

Извините, а что в Firefox-е прикажите делать, сударь?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Вот у меня такая же задача) Я тут с бреду решил дополнительные элементы делать.

Но у меня таблица, т.е. строка это и есть строка. А не элементы с float:left;

Ну и с вертикальными не ясно. А еще круче, внутрь таблицу делать :-) А может div с display: table-cell;

Можно конечно заменить :after, :before я думаю.

Но наверно надо еще гуглить)

Изменено пользователем npofopr

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Извините, а что в Firefox-е прикажите делать, сударь?

Повелеваю - под Fx не заморачиваться с вопросами не влияющими на доступность.

Впрочем, это относится ко всем браузерам. Дизайн д.б. - (1)доступным для 100% посетителей, (2)удовлетворительным для 80-90% и (3)ахренительным для 50-60%.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
границы у элементов не до конца

Не знаю, насколько там у меня float-ы в тему к данному случаю, но получилось так: http://jsfiddle.net/ujUwZ/

Дизайн д.б. ... ахренительным для 50-60%

... и адским для 0.2% :lol:

Изменено пользователем Kray Storm

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас