Недавно потребовалось сверстать страницу в виде оглавления, как в книге. С левой стороны текст, с правой цифры. У каждой строки должно быть визуальное сопровождение, чтобы четко видеть какой текст к какой странице относится. Было одно условие – без картинок.
В первую очередь я подумал про полосатые таблицы. Но потом решил что это не комильфо и начал думать в сторону списка. Но в списке надо было либо прописывать фоновое изображение, либо дополнительный элемент для каждой строки.
Поэтому я постарался максимально упростить задачу, то есть минимум кода + минимум стилей. Решение мне понравилось, и я решил поделиться им с вами.
Что же нам нужно для выполнения задачи? Элемент-контейнер, и внутри него еще два элемента, прижатые к краям контейнера. И конечно же возможность повторить это все n раз.
HTML:
<body>
<h1>Оглавление как в книге</h1>
<div>
<p class="left">Введение</p>
<p class="right">1</p>
</div>
<div>
<p class="left">Часть первая</p>
<p class="right">2</p>
</div>
<div>
<p class="left">Часть двадцать вторая</p>
<p class="right">3</p>
</div>
</body>Уж проще вроде бы некуда. Задерживаться на коде не будем, двигаемся дальше. Единственный недостаток – классы, прописаные для обоих p.
Мысль моя заключалась вот в чем. Если не ставить фоновое изображение с пунктиром по центру конрейнера, то нужно сделать так чтобы border-bottom контейнера поднялся до середины текста.
Отрицательный margin отлично справляется с этой задачей в Файрфоксе, Опере и IE7, а для IE6 еще придется текстовые блоки вынести из общего потока с помощью position:relative.
Для того чтобы пунктирная линия была не видна под текстом задаем для текстовых блоков background любого цвета.
Смотрим на стили:
div { margin:0 auto; height:10px; /*высота контейнера - половина высоты строки*/ width:760px; border-bottom:1px dotted #000000; clear:both; /*исправление для повторяющихся блоков*/ margin-bottom: 10px; } div p { background:#FFFFFF; border-bottom: 1px solid #FFFFFF; padding: 0 5px; } /*исправление для IE6*/ * HTML div p{ margin-bottom: -10px; position:relative; }/*конец исправления для IE6*/.left{ float:left; } .right{ float:right; }
У этого примера есть несколько неудобств и спорных моментов, и возможность его использования довольно сомнительна, но он может послужить неплохим примером использования CSS “не по назначению” ;)
P.S.
Комментарий pepelsbey‘a натолкнул меня на интересную мысль. Я опять начал думать в сторону списка, но под другим углом :)
Допустим у нас есть нумерованый список. Но как же нам заставить цифры быть справа, а текст слева? Да очень просто! Мы зададим списку direction: rtl и все! :) А текст в списке будет в блоках, у которых прописан float:left. Кода становится на много меньше, и реализация становится явнее :)
HTML:
<ol>
<li><span>Введение</span></li>
<li><span>Глава первая</span></li>
<li><span>Глава двадцать вторая</span></li>
</ol>CSS:
ol{
direction: rtl;
margin: 0 auto;
width: 740px;
padding-right: 20px;
}
ol li{
clear: both;
margin: 0 10px 10px 0;
border-bottom: 1px dotted #000000;
height: 10px;
}
ol li span{
display:block;
float:left;
height: 20px;
background: #FFFFFF;
padding-right: 5px;
*margin-bottom: -10px;/*исправление для IE*/
_position: relative; /*исправление для IE6*/
}Краткость – сестра таланта! Спасибо, Вадим :)
P.S.2
Рано радовался… в браузерах семейства мелкомягких для каждого элемента нумерованого списка остается цифра 1, а не меняется по порядку.. :( А если вставлять цифры в отдельный блок то вся задумка теряется.
Замечательно!
А я бы запихнул это дело в нумерованный список вместо DIV/P и раздал бы классы «chapter» / «page» ;)
[quote comment="193"]А я бы запихнул это дело в нумерованный список вместо DIV/P и раздал бы классы «chapter» / «page» ;)[/quote]
Вадим, ты натолкнул меня на классную мысль! :) Смотри апдейт поста.
Супер !!!
Как мне добавить сюда ссылку на пример такой задачи? Похоже, что комментарий принимается за спам.
А идея со списком не совсем верна: страницы не всегда идут как 1, 2, 3…
[quote comment="210"]Как мне добавить сюда ссылку на пример такой задачи? Похоже, что комментарий принимается за спам.[/quote]
Хм, вроде не должны ссылки как спам приниматься.. Можно с underscore попробовать :)
Ok. dmitry.baranovskiy.com / temp / contents.html
[quote comment="212"]Ok. dmitry.baranovskiy.com / temp / contents.html[/quote]
ну и в чем прикол?
Прикол в том, как та же задача реализована. На мой взгляд, моя реализация лучше. :)
Во-первых разметка более семантически корректная, во-вторых учитывается возможность увеличения шрифта, а в третьих, как я уже писал, номер страницы в общем случае не имеет ничего общего с порядковым номером.
P.S. И похоже, что функция «Получать email когда кто-то комментирует эту запись» не работает.
Вот тут понравилось как сделано hereyesterday.com ;)
[quote post="82"]Рано радовался… в браузерах семейства мелкомягких для каждого элемента нумерованого списка остается цифра 1, а не меняется по порядку.. А если вставлять цифры в отдельный блок то вся задумка теряется.[/quote]Искал информацию как сделать так, чтобы нумерованый список начинался не с еденицы, а с произвольной цифры и вышел на эту статью.
А решение оказалось таким: в атрибут li прописываем value=цифра
Попробуйте! ;)