Кодирование заголовков div с изменяемой шириной фонового изображения - PullRequest
Новая
       0

Кодирование заголовков div с изменяемой шириной фонового изображения

0 голосов
/ 11 декабря 2011

Я не могу понять это, но вижу изображение ниже:

see this image

Существует множество заголовков div с различной длиной текста. Из-за того, как шаблон закодирован, они не могут иметь отдельные имена классов. Все они используют один и тот же класс. Пример кода выглядит так: 

<div class="headerText"></div>
<div class="headerDots"></div>

Прямо сейчас у меня есть текст заголовка внутри div "headerText" и изображение точек в качестве фонового изображения при повторении внутри "headerDots". Я не могу понять, как заставить изображение точек становиться все меньше и меньше в зависимости от того, насколько широк заголовок рядом с ним. Можно ли кодировать HTML / CSS таким образом, чтобы это обеспечивало эту функциональность, если у меня нет доступа, чтобы дать каждому заголовку собственное имя класса?

Ответы [ 4 ]

2 голосов
/ 11 декабря 2011 
.headerText{background:white; display:inline-block; position:relative; z-index:100;}
.headerDots{background:url(dots.gif); height:10px; position:relative; top:-25px; z-index:10;}

Демо (с цветом фона, но принцип применим.)

Лучше Демо

0 голосов
/ 11 декабря 2011

Только с jquery и без изменений HTML .... Применяет цвет фона к самому тексту, который будет покрывать точки. 

jQuery(document).ready(function() {

  var Texttext = $('.headerText').html();
  $('.headerText').html('<span style="background: #ddd; padding: 0 5px 0 0;">' + Texttext + '<span>');

  var Dotstext = $('.headerDots').html();
  $('.headerDots').html('<span style="background: #ddd; padding: 0 5px 0 0;">' + Dotstext + '<span>');

});

Рабочий пример здесь

0 голосов
/ 11 декабря 2011

Вот что я бы попробовал:

  1. Оберните его в DIV с фиксированной шириной.
  2. Установите дочерние DIVs на ширину: 100%
  3. Сделайте вертикальную черту изображением и используйте «background-repeat: repeat-x», чтобы заполнить пространство.

Если у вас возникли проблемы со словом и тире, установите слово с цветом фона, равным серому, на более высоком z-index, чем вертикальные черты. Тогда черточки всегда заполняют одно и то же пространство, а слова накладываются, создавая видимость переменных черточек.

Это просто идея.

0 голосов
/ 11 декабря 2011

Что делать, если вы используете что-то вроде этого и просто замените цвета фоновым изображением или чем-либо еще: 

<html>
<head>
<style type="text/css">

#container {
  height: 100px;
  width: 200px;
  background: #ccc;
}

.headerText {
padding-right:20px;
background: yellow;
color: black;
float: left;
clear: left;
}
.headerDots {
  padding: 10px, 10px;
  float: left;
  width: 100%;
  background: blue;
}
</style>

<body>
<div id="container">

  <div class='headerDots'>
    <div class='headerText'>My Header Text</div>
   <div class='headerText'>small</div>
   <div class='headerText'>A little more text than usual</div>
  </div>
</div>

</body>
</html>
...