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

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

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

Загрузка
  1. CyberAP

    CyberAP Местный

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

    Вложения:

  2. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Не совсем понял вопрос. Это должно быть одним тегом + CSS?
    Или просто вопрос - как сделать?
     
  3. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Вопрос в том как называется эта линия и как её можно сделать на css не прибегая к background-image
     
  4. FractalizeR

    FractalizeR XenForo Addicted Команда форума

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

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Проблема в том что мне нужно чтобы текст не перекрывался. Как на изображении.
     
  6. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    А текст обязательно должен быть по центру? Если нет, то вот примерно решение.
    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>
     
  7. CyberAP

    CyberAP Местный

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

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Ну вот с этого и надо было начинать )
    Код:
    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;
    }
     
    CyberAP нравится это.
  9. CyberAP

    CyberAP Местный

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

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    У меня все пашет на чистом листе. Пример выше - это именно пример. Ты теперь знаешь куда копать. Я же, не видя твоей верстки, больше ничем помочь не могу, не телепат.
     
  11. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия 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.
     
  12. FractalizeR

    FractalizeR XenForo Addicted Команда форума

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

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2.577
    Симпатии:
    1.614
    Версия XF:
    1.5.10
    Я думаю пойдёт :)
     

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