Сегодня при верске темы столкнулся с проблемой. Дело в том, что мне необходимо, чтобы перед заголовком поста стоял квадратик.

 

 

Казалось бы ничего сложного - вставляешь картинку в фон заголовка и дело в шляпе:

h1 { background: url(’картинка’) no-repeat left;}

Однако, что будет, если мы увеличим или уменьшим шрифт в браузере? Заголовок изменит свой размер, а картинка отстанется такой же. А это уже “не есть гуд”.

После некоторых раздумий и я решил обмануть всех. Как вы помните, код выводящий заголовок в WordPress выглядит следующим образом:

<h2><a href=""><?php the_title(); ?></a></h2>

После тэга h2 я вставил символ. В принципе, символ можно было вставить любой, но я остановился на “¶”. Я сделал фон и цвет первого символа заголовка одним цветом. Причем важно было работать лишь с первым символом, т.к. в противном случае фон h2 заливал бы всю строку.

h2:first-letter {
 color:#0099CC;
 background:#0099CC;
}

h2 a {
 color:#333;
 text-decoration:none;
 padding-left:15px;
 background:#ffffff;
}

В результате получился необходимый мне квадратик.

Однако возник вопрос: а существуют ли другие варианты? Более практичные.

Черно-белых комментариев: 18

• Степ бай Стёп :

  15.04.2007 в 19:01

  1) Если выделить заголовок то и значок “¶” выделиться — это ужасно.
  2) У тебя квадрат больше на вертикальный прямоугольник похож — некрасиво, надо заменить знак.

  Ищи новый способ, и запости его — я слежу за фидами, а не за каментами.

• Delchyve :

  15.04.2007 в 19:35

  Вот я про тоже - при выделении заголовка мы увидим этот знак. Чего очень уж не хочется, потому что половина ользователей будут просто ржать над всей глупостью решения задачи, а вторая половина увидит здесь скрытый смысл.

• Neutrino :

  15.04.2007 в 22:49

  А почему не сделать полосочку 15 пикселей шириной и 1 пиксель высотой и нe задать ей repeat-y? По-моему сработает.

• Delchyve :

  16.04.2007 в 08:00

  Не-а. Понимаешь, в этом случае получится так:
  || Заголовок ||||||||||||||||||||

• Attlant :

  16.04.2007 в 10:36

  я бы сделал так border-left: 20px solid #1E90FF; padding-left: 10px;

• Delchyve :

  16.04.2007 в 10:46

  Attlant, отличная идея! Спасибо.

• Attlant :

  16.04.2007 в 11:01

  если что стучи в аську 145803318

• Neutrino :

  16.04.2007 в 16:44

  Да нет, повтор же только по оси y, а ширина картинки фиксированая. Да и Атлант дело говорит, тоже вариант.

• Delchyve :

  17.04.2007 в 08:08

  Neutrino, понял. Мы ж по вертикале ее повторяем. Согласен, тоже можно. Спасибо. Я думаю остановлюсь на варианте Attlant’a - он без графики

• Re.Актив :

  18.04.2007 в 09:59

  Ну да, вариан с бордером - самое очевидное решение =].

• Delchyve :

  18.04.2007 в 13:13

  Да. Самое легкое и от этого гениальное!

• Copoket :

  23.04.2007 в 07:09

  А почему бы например не так?
  h1 { border-left: 4px solid #333333}

• Copoket :

  23.04.2007 в 07:10

  аа, блин, проглядел, этот вариант уже предложили ))

• Степ бай Стёп :

  25.04.2007 в 15:23

  => я бы сделал так border-left: 20px solid #1E90FF; padding-left: 10px;

  Способ, конечно, хороший… но при масштабировании шрифта на странице квадратик не изменяет своих размеров.
  Думайте дальше!

• Степ бай Стёп :

  25.04.2007 в 16:16

  Надо в емах задавать ширину левого бордера.

• Delchyve :

  25.04.2007 в 16:20

  Почему же? Все отлично масштабируется. Куда ж ему деваться-то.

• pavel :

  6.06.2008 в 20:24

  почему бы не юзать буллиты?
  они имеют все возможные формы и шар и квадратик и ещё что то…

  li {
  list-style-type: square ;
  color: red;
  }

  - йа красный квадратег

• Delchyve :

  6.06.2008 в 21:47

  Павел, хороший вариант.
  Однако, он применим только к страницам с несколькими записями. А на странице single, где выводится одна запись… как-то не гуд.

  А код можно вставить нажав кнопку “»” и выбрать тэг «code»

Оставьте черный или белый комментарий :)

HTML: разрешено использование: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>