Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите организовать правильную верстку / 9 сообщений из 9, страница 1 из 1
05.04.2021, 10:13
    #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, 11:42
    #40059704
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите организовать правильную верстку
Alibek B.,
Приведите пример вывода третьего режима.
(Сделать можно используя flex)

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

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

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

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

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

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

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

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

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

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

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

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


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