ReSQL.ru
     
powered by simpleCommunicator - 2.0.49     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите организовать правильную верстку
9 сообщений из 9, страница 1 из 1
Помогите организовать правильную верстку
    #40059644
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
У меня есть на странице текст с дополнительной информацией по его разметке.
Примерно так:
Код: html
1.
2.
3.
4.
5.
6.
<article>
...
<span class="row"><span class="word body">Привет</span><span class="word tag t1" alt="Привет">-+</span>, <span class="word body">Андрей</span><span class="word tag t2" alt="Андрей">-+</span>!</span>
<span class="row"><span class="word body">Ну</span><span class="word tag t0" alt="Ну">+</span> <span class="word body">где</span><span class="word tag t0" alt="где">+</span> <span class="word body">ты</span><span class="word tag t2" alt="ты">+</span> <span class="word body">был</span><span class="word tag t1" alt="был">+</span>?</span>
...
</article>



Должно быть три режима отображения этого текста.
Первый режим: .word.body отображаются обычным образом, .word.tag скрываются.
Второй режим: .word.body скрывается, .word.tag отображается.
Третий режим: вывод в две колонки, в левой колонке отображается .word.body, в правой колонке отображается .word.tag, строки в обоих колонках выровнены.

Вот с последним сложности. Не представляю, как это сделать средствами CSS.
...
Рейтинг: 0 / 0
05.04.2021, 10:13
| Ответить | Цитировать | Написать  
Помогите организовать правильную верстку
    #40059704
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
Alibek B.,
Приведите пример вывода третьего режима.
(Сделать можно используя flex)

Заодно скажите, как вы режимы переключать собираетесь?
...
Рейтинг: 0 / 0
05.04.2021, 11:42
| Ответить | Цитировать | Написать  
Помогите организовать правильную верстку
    #40059721
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Для переключения попробую использовать option и условные селекторы.

Пример — как должно выглядеть?
Как-то так.
...
Рейтинг: 0 / 0
05.04.2021, 12:11
| Ответить | Цитировать | Написать  
Помогите организовать правильную верстку
    #40059722
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Хотя нет, так будет невозможно.
Тогда в правой колонке должны быть только span.word.tag, без пробелов, запятых и прочего.
Всё остальное (кроме span.word.tag) должно остаться в левой колонке.
И атрибут alt видимо тогда стоит перенести из внутренних span во внешний span.row.
...
Рейтинг: 0 / 0
05.04.2021, 12:14
| Ответить | Цитировать | Написать  
Помогите организовать правильную верстку
    #40059723
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
То есть основная хотелка заключается в следующем: в HTML элементы указаны последовательно, а отображаться должны в разные flow (наверное) параллельно.
span.row можно сделать блочным элементом и тем самым упростить выравнивание по высоте.
...
Рейтинг: 0 / 0
05.04.2021, 12:18
| Ответить | Цитировать | Написать  
Помогите организовать правильную верстку
    #40059753
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
Alibek B.
То есть основная хотелка заключается в следующем: в HTML элементы указаны последовательно, а отображаться должны в разные flow (наверное) параллельно.
span.row можно сделать блочным элементом и тем самым упростить выравнивание по высоте.

Сначала нужно ТОЧНО определить, что должно получиться, а потом уже думать как это сделать

И почему ! и ? отображаются в обоих колонках? Задано то только один раз (вне всякого span).

Атрибут средствами CSS точно перенести нельзя.

Кстати, а как должен работать атрибут alt у span?
...
Рейтинг: 0 / 0
05.04.2021, 13:10
| Ответить | Цитировать | Написать  
Помогите организовать правильную верстку
    #40059757
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
voraa
Атрибут средствами CSS точно перенести нельзя.

Разумеется. Я его в HTML-коде перенесу.

voraa
Кстати, а как должен работать атрибут alt у span?

Во втором или третьем режиме при наведении курсора на значки должна отображаться всплывающая подсказка с текстом строки.
Да и в первом режиме может отображаться, не мешает.
...
Рейтинг: 0 / 0
05.04.2021, 13:21
| Ответить | Цитировать | Написать  
Помогите организовать правильную верстку
    #40059928
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
Alibek B.

voraa
Кстати, а как должен работать атрибут alt у span?

Во втором или третьем режиме при наведении курсора на значки должна отображаться всплывающая подсказка с текстом строки.
Да и в первом режиме может отображаться, не мешает.

Правда?
Проверяли или просто предположение?
Обычно alt работает в другом месте и по-другому.
...
Рейтинг: 0 / 0
05.04.2021, 16:44
| Ответить | Цитировать | Написать  
Помогите организовать правильную верстку
    #40059932
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Раньше по крайней мере работало.
Если поменялось, могу на title поменять, это уже не принципиально.
...
Рейтинг: 0 / 0
05.04.2021, 16:48
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите организовать правильную верстку
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru             Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=4&tid=1443263]:
 0ms
get settings:
 11ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 41ms
get topic data:
 14ms
get forum data:
 3ms
get page messages:
 52ms
get tp. blocked users:
 2ms
others: 15ms
total:  161ms
созд. / загр.: 161ms
x
x
Закрыть


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