Как прописать текст в горизонтальной линии?

[Irish]

Доброе всем время! 

Делала цветную линию и в нее хотела прописать название товара, но не получается. Название пишется под линией. В интернете ничего не нашла((( Подскажите пожалуйста где моя ошибка (2 картинка пример как должно получиться).

Файл с которым работаю лежит в catalog\view\theme\default\template\product\category.tpl

Код:

<div class="container">
    <div class="line">
        <hr style="margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 50px solid #e68b14;">
        <p><h1><?php echo $heading_title; ?></h1></p>
    </div>
  <!--<ul class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
    <?php } ?>
  </ul>-->

[todaymars]

Извращение какое c hr. О_о

Цитата

Делала цветную линию и в нее хотела прописать название товара, но не получается

 

<div class="line">
        <h1><?php echo $heading_title; ?></h1>
</div>

.line { 
margin-top: 20px;
margin-bottom: 20px;
background-color: #e68b14;
}

 

Змінено 5 вересня 2018 користувачем todaymars

[Wadamir]

или попробуйте position:absolute для hr

но извращение - однозначно

 

или вот:

https://jsfiddle.net/crs8yenu/

[Irish]

2 часа назад, todaymars сказал:

Извращение какое c hr. О_о

 

<div class="line">
        <h1><?php echo $heading_title; ?></h1>
</div>

.line { 
margin-top: 20px;
margin-bottom: 20px;
background-color: #e68b14;
}

 

Спасибо. Но не помогло, полоска исчезла, а название осталось.

[Irish]

43 минуты назад, Wadamir сказал:

или попробуйте position:absolute для hr

но извращение - однозначно

 

или вот:

https://jsfiddle.net/crs8yenu/

Спасибо) position:absolute - не помогло. А по ссылке получилось))))

[Irish]

Только надо теперь под свои параметры подогнать.

[todaymars]

1 час назад, Irish сказал:

Спасибо. Но не помогло, полоска исчезла, а название осталось.

Того, что .line в css добавить нужно

[Irish]

38 минут назад, todaymars сказал:

Того, что .line в css добавить нужно

Я не такая уж и тупая в этом)))) Добавляла стили в stylesheet.css. Все равно не работает.)

[todaymars]

17 часов назад, Irish сказал:

Я не такая уж и тупая в этом)))) Добавляла стили в stylesheet.css. Все равно не работает.)

https://jsfiddle.net/3jo4sx6p/1/

[Irish]

В 06.09.2018 в 11:33, todaymars сказал:

https://jsfiddle.net/3jo4sx6p/1/

Сделала, все равно не получилось(

[todaymars]

1 час назад, Irish сказал:

Сделала, все равно не получилось(

Посмотрите стили у вас на скрине в .line и в моем примере:

.line { 
margin-top: 20px;
margin-bottom: 20px;
background-color: #e68b14;
}

 

Змінено 7 вересня 2018 користувачем todaymars

[Irish]

В 07.09.2018 в 15:30, todaymars сказал:

Посмотрите стили у вас на скрине в .line и в моем примере:

.line { 
margin-top: 20px;
margin-bottom: 20px;
background-color: #e68b14;
}

 

Я так делала уже, линия вообще исчезает.