Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 23
Эх… без js не разобратся :(
Теги скушались подправь.
Странная задача… Уж если выравнивать текст в таких заголовках по центру, то везде.
Или это обязательное требование по макету?
Или это обязательное требование по макету?
Верхние заголовки оформляются с text-align: center.
Задача подравнять нижний заголовок по левому краю с верхним левым
Задача подравнять нижний заголовок по левому краю с верхним левым
Ограничения:
- Ширина всего блока меняется в зависимости от разрешения
- Ширина верхних заголовков 50% от ширины блока
- Выравнивание в верхних заголовках по центру
- Размер шрифта задан в em
- Высота текстовых блоков между заголовками меняется в зависимости от объема текста (тексты разные)
При уменьшении\увеличении шрифта заголовки тогда не будут по середине.
Чем больше мы ублажаем идиотов, тем более уродливым выглядит этот мир. Я бы аргументированно отверг требование равнять нижний заголовок по верхнему.
Универсального решения вы врядли найдете.
Несколько нюансов:
1. Ширина блока;
2. Размер шрифта (в том числе и увеличение его при помощи броузера);
Несколько нюансов:
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
.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/
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>
<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>
не, без js точно никак. css такого точно никогда уметь не будет. по-крайней мере в семантичном виде точно. через жопу можно много вариантов придумать, но шаг влево, шаг вправо…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Задача — Головоломка, сложное для верстки выравнивание