Форум Сайтостроение Веб-строительство

Как сделать такой текст?

Илья Игоревич
На сайте с 07.02.2010
Offline
100
Илья Игоревич
847

Здравствуйте. Весь день не могу найти как сделать подчёркивание у текста не обычной сплошной линией, а что бы она состояла из точек и толщиной была в 1 пиксель - как на картинке.

Подскажите плиз код html, без css - что бы я в нужном месте только на нужной странице вставил и работало)

kimberlit
На сайте с 13.03.2007
Offline
370
kimberlit
#1

<span style="border-bottom: 1px dotted;">bla-bla</span>

Илья Игоревич
На сайте с 07.02.2010
Offline
100
Илья Игоревич
#2

kimberlit, большое спасибо, то, что нужно

[Удален]
#3
kimberlit:
<span style="border-bottom: 1px dotted;">bla-bla</span>

Да , но текст будет прижат, а на картинке есть отступ в микселей 5. По этому я думаю на прозрачном фоне сделать пару точек, и бэкграундом репитеть по оси x под картинкой...

T
На сайте с 13.04.2008
Offline
67
t3s
#4
CrazyMyxa:
Да , но текст будет прижат, а на картинке есть отступ в микселей 5. По этому я думаю на прозрачном фоне сделать пару точек, и бэкграундом репитеть по оси x под картинкой...

зачем советовать чушь с картинками? - ведь кто-то может последовать данному совету...

если нужен отступ, то пример который дал kimberlit можно изменить на такой: 

<span style="border-bottom: 1px dotted; padding-bottom:10px;">bla-bla</span>

ТС, вы напрасно просите "без css" , смотрите простой пример

внешний файл со стилями будет кешироваться

CSS 

.mylink{

border-bottom: 1px dotted;

padding-bottom:10px;

}

хтмл 

<span class="mylink">bla-bla</span>

в этоге "наоптимизировали" аж 41 байт 🤪

однако если учесть что подобных ссылок на странице может быть несколько, то выводы очивидны...

да и в админке дописать class="mylink" будет гораздо проще чем весь предложенный хтмл...

да и если через месяц захочится сделать подчеркивание не точками а пунктиром? или синими точками? или без подчеркивания?

webamator (http://webamator.ru) приглашает потестить сервис бесплатной оптимизации CSS и JavaScript (http://service.webamator.ru/) Занимаюсь проектами любой сложности. Качественно. Дорого. Примеры некоторых работ (http://blog.webamator.ru/category/portfolio)
5 SEO-тактик для максимизации Google: найти канонический URL В конструкторе Директа появилась
Lix
На сайте с 23.09.2007
Offline
55
Lix
#5
Да , но текст будет прижат, а на картинке есть отступ в микселей 5. По этому я думаю на прозрачном фоне сделать пару точек, и бэкграундом репитеть по оси x под картинкой...

border-bottom: 1px dotted #000; padding: 0px 0px 5px 0px;

---

Упс, чуть опередили :)

Get Rich Or Die Trying
[Удален]
#6

Я не только это имел ввиду, так же мой пример полезен в том случае, если бордеру нужно немного вылазить за текст на 1-4px. Хотя я могу ошибаться...

ЗЫ: Это обычный бордер ( border:1px .... ), но если на макете бордер более красивее, который css нельзя сделать, тогда можно по моему варианту.

Имхо...

Как вывести элемент: last-child ньюб ждет критики от CSS
T
На сайте с 13.04.2008
Offline
67
t3s
#7

CrazyMyxa, я ничуть не сомневаюсь, что вы хороший вебмастер - но постом выше Lix писал:

padding: 0px 0px 5px 0px;

если перевести данную конструкцию на русский язык то она быдет выглядеть так:

отступ: сверху 0 справа 0 снизу 5пикселов слева 0;

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

имхо на сегодня картинки оправданы если нужно что-то "сверхкрасивое", например анимация...

Картинка по вертикали в Зацените сайт по капоэйро Двухязычный сайт vs. отдельный
[Удален]
#8
t3s:
CrazyMyxa, я ничуть не сомневаюсь, что вы хороший вебмастер - но постом выше Lix писал:

если перевести данную конструкцию на русский язык то она быдет выглядеть так:

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

имхо на сегодня картинки оправданы если нужно что-то "сверхкрасивое", например анимация...

Да , да , да. Только он допустил не большую оплошность , чем ошибку. На сколько я знаю , нулевое значение в пикселях не измеряется, было бы правильнее:

padding: 0 0 5px 0;

или

padding-bottom:5px; Так будет удобнее редактировать, если значение не применяется, только как bottom!

В Яндекс.Директе появилась почасовая В YouTube Analytics появились ROI для SEO: Как
Saitoff
На сайте с 27.05.2011
Offline
71
Saitoff
#9
CrazyMyxa:
padding: 0 0 5px 0;

Все правильно. Для нулевых значений px не ставится. Если отступа нет - указывается просто 0.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий