Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в 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

Открыть новую тему     Написать ответ в эту тему

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
 

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

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



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Что-то снова застопорился, не знаю как сделать, чтобы аватарки показывались от завитков "облака/пузыря", независимо от размера и количества текста.
 
И ещё, не знаю, нормально, если будет разница в вертикальном расстоянии между сообщениями без аватарок и с ними?
 
Ссылка.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 20:06 16-06-2019 | Исправлено: WONDROUS, 21:52 16-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кто может подсказать, как можно в Foundation Progress Bar сделать так, чтобы текст в баре показывался по центру по вертикали? В Bootstrap как-то всё понятнее немного, а в этом никак.
И можно ли сделать stripes для Foundation Progress Bar или простую анимацию?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 15:18 26-06-2019
Mavrikii

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

Цитата:
сделать так, чтобы текст в баре показывался по центру по вертикали?

задать line-height равный высоте бара, если текст в одну строку
 

Цитата:
И можно ли сделать stripes для Foundation Progress Bar или простую анимацию?

через изменение .progress-meter
https://codepen.io/anon/pen/RzLMGB
https://codepen.io/anon/pen/YoraNv

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 20:53 26-06-2019 | Исправлено: Mavrikii, 20:57 26-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо! То есть, .progress указать height и у .meter line-height? Я что-то подобное делал, текст вертикально по центру не становился.
 
Спасибо за примеры, попозже попробую применить.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 21:11 26-06-2019
Mavrikii

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

Цитата:
То есть, .progress указать height

там и так уже по центру
https://codepen.io/anon/pen/RzLMGB

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 21:20 26-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Ещё раз спасибо, но вертикально по центру не ставится (ссылка). Делаю в веб-редакторе с применением темы и настроек для Foundation.
Получается, что полоски в этом Foundation не предусмотрены изначально, поэтому надо задавать цвет вручную, что неудобно.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 00:41 27-06-2019
Mavrikii

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

Цитата:
Получается, что полоски в этом Foundation не предусмотрены изначально

это уже ваши проблемы, все модифицируется с помощью css как хочется.
 

Цитата:
но вертикально по центру не ставится

все ставится, уберите padding внутри или учитывайте его при задании line-height

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 01:03 27-06-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ещё вопрос интересует по Foundation (5) Progress Bar и просьба подсказать, как сделать, чтобы при использовании нескольких значений/данных в одном баре, радиус у краёв был только по в начале и в конце, чтобы не выглядело сосисками, как здесь?
 
P.S. Хотя, вроде так получается:

Код:
.progress {
    border-radius: 20px;
}
 
.meter:first-child {
    border-radius: 20px 0px 0px 20px;
}
 
.meter:last-child {
    border-radius: 0px 20px 20px 0px;
}

Но это если изначально не использовать progress radius (или round).

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 18:08 01-07-2019 | Исправлено: WONDROUS, 19:01 01-07-2019
webproger



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

Цитата:
Но это если изначально не использовать progress radius (или round).

Если нужно переопределить стили, используйте !important

Всего записей: 23 | Зарегистр. 02-06-2019 | Отправлено: 21:30 02-07-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
webproger
А сделать как-то через child, чтобы первый и последний не затрагивались, а убрать радиус только у тех, которые между ними? Там как-то через n делается, как здесь, только я не пойму, как указать только промежуточные?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 21:51 02-07-2019
webproger



Newbie
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Исключить первый и последний элементы можно так

Код:
:not(:first-child):not(:last-child) {}

Всего записей: 23 | Зарегистр. 02-06-2019 | Отправлено: 22:21 04-07-2019
vs6262



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
у меня вопрос: как сделать кроссбраузерный css  для элемента <pre>. меня в основном интерессует: вот я делаю прямоугольник с текстом где текст в <pre>, чтобы размер прямоугольника до пикселя во всех браузерах был бы одинаковым
 
заранее спасибо

Всего записей: 2235 | Зарегистр. 25-02-2013 | Отправлено: 00:02 07-07-2019
Mavrikii

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

Цитата:
размер прямоугольника до пикселя во всех браузерах был бы одинаковым  

задать его в пикселях

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 00:13 07-07-2019
webproger



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

Цитата:
задать его в пикселях

Но ведь размер текста может быть разным...

Цитата:
делаю прямоугольник с текстом где текст в <pre>, чтобы размер прямоугольника до пикселя во всех браузерах был бы одинаковым  

Задайте для pre собственные стили (font, line-height, margin, padding), чтобы переопределить встроенные стили браузеров.

Всего записей: 23 | Зарегистр. 02-06-2019 | Отправлено: 16:18 07-07-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просьба подсказать, как с помощью CSS можно менять цвет у SVG файлов (пример)?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 23:47 14-07-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
https://stackoverflow.com/questions/22252472/change-svg-color

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 23:51 14-07-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо! А более простого решения нет? Например, чтобы можно было написать: .class svg path {fill: color;} ?

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 01:29 15-07-2019
Mavrikii

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

Цитата:
А более простого решения нет?

там все написано и это тоже.
только если содержимое описано прямыми командами, а не отдельным файлом.

Цитата:
You can't change the color of an image that way. If you load SVG as an image, you can't change how it is displayed using CSS or Javascript in the browser

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 01:33 15-07-2019
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Спасибо, вроде разобрался. Заработало с этим кодом:

Код:
$(document).ready(function() {
    $('img[src$=".svg"]').each(function() {
        var $img = jQuery(this);
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");
 
        $.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');
 
            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');
 
            // Loop through IMG attributes and apply on SVG
            $.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });
 
            // Replace IMG with SVG
            $img.replaceWith($svg);
        }, 'xml');
    });
});

Только, теперь ещё пара вопросов возникли: как менять название (title) SVG и как заменить ID у SVG? То есть, это, наверное, также прописывается через скрипт, но как и что именно? Понимаю, что это уже не тема CSS, но всё же спрошу.

Всего записей: 3440 | Зарегистр. 30-06-2002 | Отправлено: 14:00 15-07-2019 | Исправлено: WONDROUS, 14:39 15-07-2019
Mavrikii

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

Цитата:
как заменить ID у SVG

$(селектор).attr('id', 'значение')
Аналогично и title

Всего записей: 15689 | Зарегистр. 20-09-2014 | Отправлено: 14:46 15-07-2019
Открыть новую тему     Написать ответ в эту тему

Страницы: 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

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


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

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

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru