VPF::Требуется помощь с созданием «временной линии»

Scream

Дата 9.7.2007, 17:27 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 59
Регистрация: 30.7.2006
Где: Deep

Репутация: 1
Всего: 1

Незнаю как такое воплотить в жизнь — http://llexa.ru/timeline/img.gif
Нужна линейка с большими точками по краям и маленькими (их может быть сколько угодно) в середине... Над каждой (или под каждой) точкой пишется год. Это типа линии жизни. TimeLine.

Всё это с шириной в 100%.

Делаю такую конструкцию:

Код


<div style="width:100%; height:14px; background-image: url(line_1.gif); background-repeat: repeat-x;">
    <div style="float:left;"><img src="line_1_bigpoint.gif" width="14" height="14" /></div>
    
    <div style="float:left; padding-left:20%;"><img src="line_1_smallpoint.gif" width="10" height="14" /></div>
    <div style="float:left; padding-left:40%;"><img src="line_1_smallpoint.gif" width="10" height="14" /></div>
    
    <div style="float:right;"><img src="line_1_bigpoint.gif" width="14" height="14" /></div>
</div>

но если делать больше точек в середине, то всё ломается :(

Помогите найти решение. Очень прошу.

Изображения, которые используются:
1. Большая точка http://llexa.ru/timeline/line_1_bigpoint.gif ( user posted image

)
2. Маленькая точка http://llexa.ru/timeline/line_1_smallpoint.gif ( user posted image

)
3. Сама линия http://llexa.ru/timeline/line_1.gif ( user posted image

)

ksnk

Дата 9.7.2007, 18:15 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

А таблицы - не круче?

Код


<table border=1 style="text-align:center;table-layout:fixed;width:100%; height:14px; background: url(line_1.gif) 0px 4px repeat-x;">
<tr><td>
    <img src="line_1_bigpoint.gif" width="14" height="14" />
</td><td>
    <img src="line_1_smallpoint.gif" width="10" height="14" />
</td><td>
    <img src="line_1_smallpoint.gif" width="10" height="14" />
</td><td>
    <img src="line_1_smallpoint.gif" width="10" height="14" />
</td><td>
    <img src="line_1_smallpoint.gif" width="10" height="14" />
</td><td>
    <img src="line_1_smallpoint.gif" width="10" height="14" />
</td><td>
    <img src="line_1_bigpoint.gif"/>
</td></tr>

</table>

И надписи найдется куда вставлять...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

SelenIT

Дата 10.7.2007, 00:56 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Как вариант:

Код


<style>
div#timeline { 
    background: #000;
    height: 1px;
    font: 1px/1px;
    position: relative;
    overflow: visible;
    margin: 17px 10px 27px;
}
div#timeline div {
    position: absolute;
    top: -7px;
    padding: 15px 0 0 0;
    background: url(http://llexa.ru/timeline/line_1_smallpoint.gif) 0 0 no-repeat;
    font: bold 12px/12px Arial;
}
div#timeline div.start, div#timeline div.end {
    background-image: url(http://llexa.ru/timeline/line_1_bigpoint.gif);
}
div#timeline div.start {
    left: -7px;
}
div#timeline div.end {
    right: -7px;
    text-align: right;
    background-position: 100% 0;
}
</style>

<div id="timeline">
    <div class="start">1935</div>
    <div style="left: 15%">1945</div>
    <div style="left: 25%">1950</div>
    <div style="left: 55%">1970</div>
    <div class="end">2007</div>
</div>

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Scream

Дата 10.7.2007, 05:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 59
Регистрация: 30.7.2006
Где: Deep

Репутация: 1
Всего: 1

ksnk, заказчик просит дивами.

SelenIT, большое спасибо! Взял ваш код на изучение smile

Scream

Дата 13.7.2007, 12:35 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 59
Регистрация: 30.7.2006
Где: Deep

Репутация: 1
Всего: 1

SelenIT, а как можно сделать, чтобы даты не накладывались друг на друга при сжатии странички?

ksnk

Дата 13.7.2007, 14:32 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(Scream @ 13.7.2007, 12:35

)

чтобы даты не накладывались друг на друга при сжатии странички

Цитата(Scream @ 10.7.2007, 05:47

)

заказчик просит дивами

Заказчика фтопку... smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Бонифаций

Дата 13.7.2007, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 827
Регистрация: 15.9.2005
Где: Brisbane

Репутация: нет
Всего: 40

может вот это подойдет?

--------------------

Бонифаций.

SelenIT

Дата 13.7.2007, 14:56 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Можно 1) ограничить минимальную ширину всей линии, 2) ставить подписи в 2 ряда (в шахматном порядке) или вообще часть под линией, часть над ней. Например, так (привожу только изменившиеся или добавленные части кода, остальное - как в прошлом примере):

Код


<style>
div#timeline { 
    /* остальные свойства как были */
    margin: 32px 10px 27px; /* увеличен отступ сверху для 2-го ряда подписей */
    min-width: 200px; /* минимальная ширина для FF, Оперы... */
    width: expression(parentNode.clientWidth > 200 ? "auto" : "200px"); /* мин. ширина для IE */
}
/* div#timeline div, .start и .end - как были */
div#timeline div.top { /*  */
    top: -19px;
    padding: 0 0 15px 0;
    background-position: 0 12px;
}
</style>
<div id="timeline">
    <div class="start">1935</div>
    <div class="top" style="left: 15%">1945</div>
    <div style="left: 25%">1950</div>
    <div class="top" style="left: 55%">1970</div>
    <div class="end">2007</div>
</div>

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »