Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выделять пункт оглавления при просмотре соответствующей части текста? / 10 сообщений из 10, страница 1 из 1
30.09.2012, 17:30:29
    #37977497
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
Видел на каком-то сайте слева оглавление а справа контент - при скроллировании текста справа - соответствующие пункты оглавления выделялись
Все это было реализовано средствами CSS
Помогите вспомнить, а то не знаю как :)
...
Рейтинг: 0 / 0
30.09.2012, 18:23:58
    #37977531
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
Хм ... очень-очень сомневаюсь, что на чистом CSS такое можно реализовать. Наверняка без поддержки скриптом не сделать. А с ним уже и помощь не особо понадобится.
...
Рейтинг: 0 / 0
30.09.2012, 19:13:42
    #37977565
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
IDVsbruckХм ... очень-очень сомневаюсь, что на чистом CSS такое можно реализовать.Пожалуйста:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE HTML>
<html>
<head>
  <style>    
    #content {
      border: solid #000 1px;
      height: 400px;
      padding-left: 200px;
      overflow-y: scroll;
      width: 400px;
    }
      
    #content h4 {
      position: absolute;
      left: 12px;
    }
     
    #content div:hover h4 {
      color: red;
    }
  </style>
</head>
<body>
  <div id="content">
    <div>
      <h3>Что такое Lorem Ipsum?</h3>
      <h4 style="top:8px">Что такое Lorem Ipsum?</h4>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
    <div>
      <h3>Откуда он появился?</h3>
      <h4 style="top:24px">Откуда он появился?</h4>
Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32
    </div>
    <div>
      <h3>Почему он используется?</h3>
      <h4 style="top:40px">Почему он используется?</h4>
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).
    </div>
  </div>
</body>
</html>
...
Рейтинг: 0 / 0
30.09.2012, 19:20:10
    #37977568
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
Лучше так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
  <style>    
    #content {
      border: solid #000 1px;
      height: 400px;
      overflow-y: scroll;
      width: 600px;
    }
      
    #content h4 {
      position: absolute;
      left: 12px;
    }
    
    #content div {      
      padding-left: 200px;
    }
     
    #content div:hover h4 {
      color: red;
    }
  </style>

Скроллировать колёсиком мыши :)
...
Рейтинг: 0 / 0
30.09.2012, 19:51:05
    #37977578
Ифреймов Вася
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
skyANA,

Думаю - если нужна поддержка ie старых - то такой скрипт не подойдет
div:hover там не будет работать
Но если пренебречь стандартами и запихнуть div в anchor - то будет работать во всех браузерах(за оперу не совсем уверен)
Но это очень некрасиво, просто ужастно
...
Рейтинг: 0 / 0
30.09.2012, 22:12:26
    #37977658
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
Ифреймов Вася, да сия фигня - шняга на коленке писаная :)
...
Рейтинг: 0 / 0
01.10.2012, 02:11:48
    #37977764
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
А, блин, то, что ты описал и то, что сделал - две большие разницы. Может, кто-то так и понял, но я точно ТЗ воспринял иначе: одним из ключевых слов было "при скроллировании", но само скроллирование имеет очень отдаленное применение - только для подведения определенного текста под мышку. При больших габаритах контейнера, когда скролла нет, смысл имеет исключительно подвод мыши к тексту.

Но если это то, что планировалось, рад, что нашел решение.
...
Рейтинг: 0 / 0
01.10.2012, 08:42:46
    #37977827
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
skyANA,

спасибо большое! то что надо!
...
Рейтинг: 0 / 0
01.10.2012, 10:24:08
    #37977976
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
IDVsbruckА, блин, то, что ты описал и то, что сделал - две большие разницы. Может, кто-то так и понял, но я точно ТЗ воспринял иначе: одним из ключевых слов было "при скроллировании", но само скроллирование имеет очень отдаленное применение - только для подведения определенного текста под мышку. При больших габаритах контейнера, когда скролла нет, смысл имеет исключительно подвод мыши к тексту.

Но если это то, что планировалось, рад, что нашел решение.Описал товарищ sp, а сделал я :) Вы будто нас за одного человека считаете.

P.S.: ничего кстати не искал, эта шняга писалась мной минут 15-20 в ожидании такси. Даже удивлён, что это то, что надо :)
...
Рейтинг: 0 / 0
01.10.2012, 14:20:39
    #37978565
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выделять пункт оглавления при просмотре соответствующей части текста?
skyANAОписал товарищ sp, а сделал я :) Вы будто нас за одного человека считаете.

P.S.: ничего кстати не искал, эта шняга писалась мной минут 15-20 в ожидании такси. Даже удивлён, что это то, что надо :)
Да, сорри, перепутал.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выделять пункт оглавления при просмотре соответствующей части текста? / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]