Как стать автором
Обновить

Комментарии 23

Эх… без js не разобратся :(
Теги скушались подправь.
Не получается совладать с парсером. Весь код вставил в <>
<code>
</code>
<div> текст </div>
Cкушал теги я через &-lt, &-gt имел ввиду
Странная задача… Уж если выравнивать текст в таких заголовках по центру, то везде.
Или это обязательное требование по макету?
Требование по макету. Так получилось, что нужно выравнивать именно таким образом. Причем избавиться от этого никак не получится и в любом случае придется сверстать макет именно в таком виде. Просто я противник оформления таких вещей при помощи javascript, поэтому хочу сделать через CSS.
НЛО прилетело и опубликовало эту надпись здесь
Верхние заголовки оформляются с text-align: center.
Задача подравнять нижний заголовок по левому краю с верхним левым
НЛО прилетело и опубликовало эту надпись здесь
Ограничения:
  • Ширина всего блока меняется в зависимости от разрешения
  • Ширина верхних заголовков 50% от ширины блока
  • Выравнивание в верхних заголовках по центру
  • Размер шрифта задан в em
  • Высота текстовых блоков между заголовками меняется в зависимости от объема текста (тексты разные)
Невозможно реализовать средствами css
При уменьшении\увеличении шрифта заголовки тогда не будут по середине.
Чем больше мы ублажаем идиотов, тем более уродливым выглядит этот мир. Я бы аргументированно отверг требование равнять нижний заголовок по верхнему.
Универсального решения вы врядли найдете.
Несколько нюансов:
1. Ширина блока;
2. Размер шрифта (в том числе и увеличение его при помощи броузера);
Единственное, что приходит в голову — использовать для нижнего заголовка аналогичную конструкцию (ul)(li)(/li)(li)(/li)(/ul), но для первого элемента li использовать overflow: visible. Тегами не могу пользовать, так что, надеюсь, идею Вы поняли. Очевидные минусы — не валидно, ибо пустой элемент списка; возможно, если длина текста превысит ширину элемента ul, он не будет переноситься.
сделал так: <_div class=«hui»><_a href=«#»>текст заголовка<_/a><_/div>
.x {width: 80px;} width — заведомо короче, чем строка на самом деле

затем:

<_div class=«qqq»>длинный текст, выровненный с заголовком<_/div>
.xxx {padding-left:25%; margin-left:45px} margin-left=80px/2+5px.

Проверил при 60,70,80,90px — работает.

Но, верстал я конструкцию с помощью таблиц и не знаю почему появилась необходимость добавлять 5px

Ссылки на картинки с кодом и результатом:
img176.imageshack.us/img176/8412/11al5.jpg
img244.imageshack.us/img244/7679/22fc4.jpg

Можете код показать? Так не совсем понятна идея.
Прежде чем делать такую вёрстку я бы порекомендовал почитать вам про модульные сетки, возможно это избавит вас от проблемы:

1. kak.ru/columns/serov/a2526
2. ru.wikipedia.org/wiki/%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D0%B2%D1%91%D1%80%D1%81%D1%82%D0%BA%D0%B8
3. 24ways.org/2006/compose-to-a-vertical-rhythm
4. www.aether.ru/blog/2006/07/04/easy-grid
5. www.awd17.com/movement/article/layout_grid.aspx

Отличный пример:
6. www.artlebedev.ru/everything/routine/2007/09/17/
могу предложить только через «попу» (фишка в том, что нужно сдублировать заголовок и перекрыть его...):

<html>
<body>
<style>
table
{
   width:100%
}
.center
{
   text-align: center;
   width:50%;
}
.omg
{
   position: absolute;
   background:#FFF;
   width:100%;
   text-align: left
}
</style>
<table>
   <tr>
      <td class=«center»>67567567567</td>
      <td class=«center»>2</td>
   </tr>
   <tr>
      <td class=«center»><span><span class=«omg»>234</span>67567567567</span></td>
      <td class=«center»>2</td>
   </tr>
</table>
</body>
</html>
Я сам склоняюсь к такой идее, спасибо за предложение.

На самом деле верхний левый заголовок меняться не будет и его длина мне известна, поэтому в моем случае даже дублировать ничего не придется, просто сделать ширину блока в em.
не, без js точно никак. css такого точно никогда уметь не будет. по-крайней мере в семантичном виде точно. через жопу можно много вариантов придумать, но шаг влево, шаг вправо…
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Публикации

Истории