Телеграмм чат группы css

20:34пожаловаться #1

Р

Ребят помогите разобраться плс

Нужно чтобы <p> шел под контентом таба, а сам контент в первом табе был растянут на ширину всего блока, ну то есть список нужно чтоб выглядел корректно, 1 запись 1 строка

https://codepen.io/roman369th/pen/zYrbMWW

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество

20:56пожаловаться #2

ZA

Ребят помогите разобраться плс

Нужно чтобы <p> шел под контентом таба, а сам контент в первом табе был растянут на ширину всего блока, ну то есть список нужно чтоб выглядел корректно, 1 запись 1 строка

https://codepen.io/roman369th/pen/zYrbMWW

тебе вёрстку надо переделать

20:59пожаловаться #3

Р

Ребят помогите разобраться плс

Нужно чтобы <p> шел под контентом таба, а сам контент в первом табе был растянут на ширину всего блока, ну то есть список нужно чтоб выглядел корректно, 1 запись 1 строка

https://codepen.io/roman369th/pen/zYrbMWW

контент по блоку растянул, а вот последующий код не могу засунуть под него, абсолют мешает

20:59пожаловаться #4

Р

ну если убираю абсолют, то таб плавать по ширине начинает((

21:00пожаловаться #5

Р

Zahar Avsievich

тебе вёрстку надо переделать

(((((( совсем все?(

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество

21:01пожаловаться #6

ZA

(((((( совсем все?(

ну табайтемы должны быть в одном контейнере сверху
а под ним контейнер с табконтентом

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество

21:01пожаловаться #7

ZA

а так получается фигня какая-то: чтобы растянуть контент на всю ширину, придётся делать его абсолютом, но он выпадает из потока

21:02пожаловаться #8

Р

плак плак шо я могу сказать

21:03пожаловаться #9

Р

спасибо что подсказал все равно)) лучше чем время тратить

Игорь in HTML/CSS — русскоговорящее сообщество

21:04пожаловаться #10

И

Zahar Avsievich

можно подробнее этот момент?)

Href # оставляет ссылку ссылкой и является якорем, скролящим на верх страницы. Раньше делали такие костыльные заглушки через #, потом через javascript:void(0), который возвращал undefined (тогда undefined можно было заменить в скрипте, поэтому использовали ещё один костыль с void(0)). С html5 href атрибут больше не является обязательным для ссылок, поэтому самое лучшее решение сделать, как указано в спецификации, - убрать href совсем, если ссылка пока ещё не ссылка.

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество

21:10пожаловаться #11

ZA

Игорь

Href # оставляет ссылку ссылкой и является якорем, скролящим на верх страницы. Раньше делали такие костыльные заглушки через #, потом через javascript:void(0), который возвращал undefined (тогда undefined можно было заменить в скрипте, поэтому использовали ещё один костыль с void(0)). С html5 href атрибут больше не является обязательным для ссылок, поэтому самое лучшее решение сделать, как указано в спецификации, - убрать href совсем, если ссылка пока ещё не ссылка.

хм, а если я делаю href="#" для того, чтобы бэкендер мне заполнил ссылки на нужные, мне тоже href надо удалять?
там был вопрос, как заменить все на #, а не как лучше сделать)

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество

21:13пожаловаться #12

ZA

https://youtu.be/Ze2muJxPQFg

спасибо что подсказал все равно)) лучше чем время тратить

YouTube

Как сделать табы на: чистом CSS / чистом JS / грязном jQuery?

В этом видео вы увидите 4! способа реализации Табов (ещё их называют Вкладками).
Я покажу 2 способа реализации на CSS (Первый с использованием input и ~, второй с :target), потом будет на jQuery и завершает хит-парад - JavaScript.

=======================================

Записаться на консультацию:
https://prosto-razrabotka.ru/

Стать спонсором канала:
https://www.youtube.com/channel/UCn-P_F0tfY21cfnkyv2lsRQ/join

=======================================

Telegram
Канал - https://t.me/prostorazrabotka
Чат - https://t.me/prostorazrabotkachat

=======================================

Подписывайтесь в соц. сетях:
Facebook - https://www.facebook.com/vitaliy.kirenkov
VKontakte - https://vk.com/vitaliy.kirenkov
LinkedIn - https://www.linkedin.com/in/kirenkov
Twitter - https://twitter.com/VitaliyKirenkov
Instagram - https://www.instagram.com/vitaliy.kirenkov

=======================================

Мой второй канал:
https://www.youtube.com/channel/UC-QLh1F3Rzp6HY-FW1E3Eaw

=======================================

Привет…

Игорь in HTML/CSS — русскоговорящее сообщество

21:16пожаловаться #13

И

Вот вам расово верные табы с полной и правильной поддержкой доступности https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

www.w3.org

WAI-ARIA Authoring Practices 1.1

This document provides readers with an understanding of how to use WAI-ARIA 1.1 [WAI-ARIA] to create accessible rich internet applications.
It describes considerations that might not be evident to most authors from the WAI-ARIA specification alone and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties.
This document is directed primarily to Web application developers, but the guidance is also useful for user agent and assistive technology developers.

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество

21:19пожаловаться #14

ZA

Игорь

Вот вам расово верные табы с полной и правильной поддержкой доступности https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel

www.w3.org

WAI-ARIA Authoring Practices 1.1

This document provides readers with an understanding of how to use WAI-ARIA 1.1 [WAI-ARIA] to create accessible rich internet applications.
It describes considerations that might not be evident to most authors from the WAI-ARIA specification alone and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties.
This document is directed primarily to Web application developers, but the guidance is also useful for user agent and assistive technology developers.

ох, если зайти на кодпен, который он кинул, то можно понять, что там неплохо так надо поднимать знания по вёрстке
доступность, жёсткий джс и ариа-атрибуты могут отбить сейчас всё желание верстать и к тому же вызовут непонимание

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество

21:22пожаловаться #15

ZA

на определённые запросы определённые ответы)