1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

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

Тема в разделе "OFF-топик", создана пользователем CyberAP, 23.11.2010.

Загрузка
  1. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Никак не могу вспомнить :) Помогите, пожалуйста.
    P.S. если кто-то знает как это красиво реализуется на css буду благодарен (без img)
     

    Вложения:

    CyberAP, 23.11.2010
    #1
  2. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Не совсем понял вопрос. Это должно быть одним тегом + CSS?
    Или просто вопрос - как сделать?
     
    Romchik®, 23.11.2010
    #2
  3. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Вопрос в том как называется эта линия и как её можно сделать на css не прибегая к background-image
     
    CyberAP, 23.11.2010
    #3
  4. FractalizeR

    FractalizeR XenForo Addicted

    Регистрация:
    27.09.10
    Сообщения:
    1 085
    Симпатии:
    832
    Версия XF:
    1.3.2
    По-моему, это strikethrough пробелы. Или нет? Делаются <s> или <strike> тегами.
     
    FractalizeR, 23.11.2010
    #4
  5. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Проблема в том что мне нужно чтобы текст не перекрывался. Как на изображении.
     
    CyberAP, 23.11.2010
    #5
  6. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    А текст обязательно должен быть по центру? Если нет, то вот примерно решение.
    CSS:
    HTML:
    fieldset {
  margin:0;
  padding:0 0 0 20%;;
  border:none;
  border-top:1px solid #ddd;
}
fieldset legend {
  margin:0;
  padding:0 20px;
}
    HTML:
    HTML:
    <fieldset>
 <legend>Какой-нить заголовок</legend>
</fieldset>
     
    Romchik®, 23.11.2010
    #6
  7. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Структура такая:
    HTML:
    <h2 class="title"><a></a></h2>
    Изменять html не хотелось бы.
     
    CyberAP, 23.11.2010
    #7
  8. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Ну вот с этого и надо было начинать )
    Код:
    h2.title {
  margin:0;
  padding:0;
  line-height:12px;
  text-align:center;
  border-top:1px solid #ddd;
}
h2.title a {
  display:inline-block;
  font-size:12px;
  margin-top:-6px;
  padding:0 20px;
  background:#fff;
  color:#777;
  text-decoration:none;
}
     
    Romchik®, 23.11.2010
    #8
    CyberAP нравится это.
  9. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Нет, не пашет такой вариант.
    line-height лучше вообще не трогать, потому что тогда вся вёрстка едет :)
     
    CyberAP, 23.11.2010
    #9
  10. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    У меня все пашет на чистом листе. Пример выше - это именно пример. Ты теперь знаешь куда копать. Я же, не видя твоей верстки, больше ничем помочь не могу, не телепат.
     
    Romchik®, 23.11.2010
    #10
  11. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Я сделал вот так:
    Код:
     h2.title{
  line-height: normal;
  margin-bottom: 2px;
  position: relative;
  top: -15px;
  border-bottom: #ddd 1px solid;
  padding-bottom: 2px;
  text-align:center;
}


h2.title a{
  color:#4e4e4e;
  position: relative;
  top: 15px;
  background-color: white;
  padding: 0 10px;
}
    --- добавлено : 23 ноя 2010 в 22:04 ---
    Собственно сам код и идею я подхватил из этой темы: Manifest.
     
    CyberAP, 24.11.2010
    #11
  12. FractalizeR

    FractalizeR XenForo Addicted

    Регистрация:
    27.09.10
    Сообщения:
    1 085
    Симпатии:
    832
    Версия XF:
    1.3.2
    Переименовал тему. Не знаю, насколько удачное придумал новое название :) Если что - поправьте.
     
    FractalizeR, 24.11.2010
    #12
    CyberAP нравится это.
  13. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Я думаю пойдёт :)
     
    CyberAP, 24.11.2010
    #13

Поделиться этой страницей