Вопросы по CSS - [129] :: Web-программирование :: Компьютерный форум Ru.Board

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?

Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Модерирует : Cheery
Версия для печати • Подписаться • Добавить в закладки
Страницы: 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

Xrobak

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Ссылки для самостоятельного изучения:

Теория + примеры + учебники:
• W3School: CSS Tutorial
• MDN: Cascading Style Sheets (CSS)
• WebReference: Уроки по HTML и CSS
• htmlbook: Справочник CSS
• YouTube: Основы CSS/CSS3
• CSS для JavaScript-разработчика
• Основы CSS - каскадные таблицы стилей
• Статьи по основам CSS

Применение на практике:
• StackOverflow: 'CSS' Questions
• CSS-Tricks

Первый пост темы (до включения шапки).. ··· Текущий бэкап шапки..

Всего записей: 940 | Зарегистр. 16-08-2004 | Отправлено: 18:46 27-10-2004 | Исправлено: TheBarmaley, 05:24 27-02-2019

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Vladsvn добавьте flex-shrink: 0; https://jsfiddle.net/pbgLz92r/
	Всего записей: 16646 \| Зарегистр. 20-09-2014 \| Отправлено: 09:37 19-09-2024

Vladsvn

Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Спасибо, я это уже сделал - размер картинки выровнялся, но текстовый див все равно прижимает ее к левой стороне экрана. Похоже, что это неотъемлемое свойство блочной верстки.

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

Всего записей: 351 | Зарегистр. 07-09-2016 | Отправлено: 09:52 20-09-2024 | Исправлено: Vladsvn, 16:57 20-09-2024

dneprcomp

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Vladsvn
Позиция left должна быть одинаковой для всех img или для всех h2
Если устроит word wrap to добавьте max-width: 350px; в примере Mavrikii для всех h2
Для реального кода выберите нужный max-width

Код:

<h2 style="margin:0; font-size:26px; text-align:center;max-width: 350px;"><a id="step2"></a>5. Соглашение об обработке персональных данных</h2>

Хотите без word wrap, динамически меняйте max-width перед показом по наибольшему h2 техт length используя JavaScript.
Но тогда я бы и min-width hard-coded для всех h2.

Всего записей: 3924 | Зарегистр. 31-03-2002 | Отправлено: 21:44 20-09-2024 | Исправлено: dneprcomp, 22:46 21-09-2024

Vladsvn Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Спасибо!
	Всего записей: 351 \| Зарегистр. 07-09-2016 \| Отправлено: 22:25 20-09-2024

dneprcomp

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Vladsvn
Еще можно посмотреть CSS Flex Items, но там тоже придеться играть с позицией и/или длиной для Items.
Я сейчас почти всю разметку делаю на Flex Items + CSS. Ни грид, ни display: flex; не использую.

Всего записей: 3924 | Зарегистр. 31-03-2002 | Отправлено: 22:34 20-09-2024 | Исправлено: dneprcomp, 22:41 20-09-2024

vs6262

Silver Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Код
нужна помощь: как с помощю css сделать: 1. top без absolute 2. и если на мобилниках чтобы элементы выстраивались бы вряд с переносом ?

Заранее Большое Спасибо

Добавлено:
https://breil.tech/-mm/Example_div1_0001.html

Добавлено:
осталось только 1. top без absolute

Всего записей: 2240 | Зарегистр. 25-02-2013 | Отправлено: 14:47 07-10-2024 | Исправлено: vs6262, 14:48 07-10-2024

vs6262 Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору вроде получилось https://breil.tech/-mm/Example_div1_0001.html
	Всего записей: 2240 \| Зарегистр. 25-02-2013 \| Отправлено: 16:53 07-10-2024

Demon Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Нужно будет строить много больших и разных форм. Может кто подскажет онлайн генератор форм, что бы я в итоге получил соответствующий html и css.
	Всего записей: 612 \| Зарегистр. 03-10-2001 \| Отправлено: 16:20 15-10-2024

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Demon https://beautifytools.com/html-form-builder.php https://bootsnipp.com/forms https://faary.com/ и так далее. с отдельным css сложнее - обычно используется какой то framework, например bootstrap.
	Всего записей: 16646 \| Зарегистр. 20-09-2014 \| Отправлено: 18:53 15-10-2024

b7music Advanced Member	Редактировать \| Профиль \| Сообщение \| ICQ \| Цитировать \| Сообщить модератору Здравствуйте! Подскажите с проблемкой. https://test.sigma-med.ru/ при наведении мыши на меню, оно вниз спускается, не могу понять какое правило срабатывает
	Всего записей: 684 \| Зарегистр. 04-03-2010 \| Отправлено: 10:56 21-10-2024 \| Исправлено: b7music, 10:57 21-10-2024

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

b7music
nav.mega-menu получает .visible
и

Цитата:

.mega-menu:not(.visible) {
overflow: hidden;
}

Всего записей: 16646 | Зарегистр. 20-09-2014 | Отправлено: 11:47 21-10-2024

destiny_child Silver Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору http://forum.ru-board.com/topic.cgi?forum=31&topic=19206&start=480#14 Вероятно этот вопрос именно тут и актуален. Пожалуйста, гляньте.похоже уже глядим.
	Всего записей: 4910 \| Зарегистр. 01-04-2006 \| Отправлено: 00:01 03-11-2024 \| Исправлено: destiny_child, 13:17 03-11-2024

pressF Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору del
	Всего записей: 1607 \| Зарегистр. 29-03-2023 \| Отправлено: 22:30 24-12-2024 \| Исправлено: pressF, 22:47 24-12-2024

Mavrikii Platinum Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору pressF .subforums:not(.list) > .me > .drop
	Всего записей: 16646 \| Зарегистр. 20-09-2014 \| Отправлено: 22:44 24-12-2024

pressF Advanced Member	Редактировать \| Профиль \| Сообщение \| Цитировать \| Сообщить модератору Mavrikii я через скобки [] решил, но спасибо
	Всего записей: 1607 \| Зарегистр. 29-03-2023 \| Отправлено: 22:59 24-12-2024

pressF

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

На странице есть список с маркерами которые необходимо скрыть.

<div id="sidebar">
<div class="123">
<h1>
<ul>
<li>

Как спецификация объясняет такой момент и почему скрытие НЕ срабатывают с явным указанием псевдоэлемента?

#sidebar li::marker {
list-style-type: none;
}

или

#sidebar li::marker {
display: none;
}

А вот такое правило срабатывает

#sidebar ul или li {
list-style: none;
}

Лично я скрываю пвседоэлемент занулив содержимое свойства content

#sidebar li::marker {
display: none;
content: "";
}

Добавлено:
И какие ещё есть варианты скрыть маркеры списка с явным указанием псевдоэлемента кроме моего варианта выше?

Всего записей: 1607 | Зарегистр. 29-03-2023 | Отправлено: 10:46 25-12-2024

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

pressF

Цитата:

На странице есть список с маркерами которые необходимо скрыть.

зачем делать иначе?

Код:

ul {
list-style-type: none;
}

Цитата:

#sidebar li::marker {
list-style-type: none;
}

у ::marker нет list-style-type
это только область (текстовый элемент) с "индексом"
его можно "спрятать", изменить свойства текста, но данного атрибута у него просто нет
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

Цитата:

Only a few elements (<li> and <summary>) have a default value of display: list-item. However, the list-style-type property may be applied to any element whose display value is set to list-item. Moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items.

Всего записей: 16646 | Зарегистр. 20-09-2014 | Отправлено: 12:17 25-12-2024 | Исправлено: Mavrikii, 12:23 25-12-2024

pressF

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:

у ::marker нет list-style-type

Понял. Думал раз список связан с псевдоэлементом то это всё будет вместе работать)

Всего записей: 1607 | Зарегистр. 29-03-2023 | Отправлено: 12:39 25-12-2024

pressF

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Не получается переопределить символ в правиле. Подскажите как правильно будет?

HTML
<div id="123">
<ul class="FL">
<li><a href....
<li><a href....
<li><a href....

и на странице перед 2 и 3 li идут символы

ul.FL > li:nth-child(2,3):before {
content: "\&#448" !important;
}

не срабатывает, понимаю что лажаю с синтаксисом

Всего записей: 1607 | Зарегистр. 29-03-2023 | Отправлено: 21:06 28-12-2024

Mavrikii

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

pressF

Цитата:

nth-child(2,3)

нет такого способа записи.
:nth-child(n+2):nth-child(-n+3)

Всего записей: 16646 | Зарегистр. 20-09-2014 | Отправлено: 00:15 29-12-2024

Страницы: 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

Компьютерный форум Ru.Board » Интернет » Web-программирование » Вопросы по CSS

Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

LiteCoin: LgY72v35StJhV2xbt8CpxbQ9gFY6jwZ67r