Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.66/47: Рейтинг темы: голосов - 47, средняя оценка - 4.66
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696

Почему все в теге p красным цветом

10.09.2015, 09:37. Показов 10156. Ответов 9
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
В общем как то случаем перевел сайт в translate google и все что находится в теге p (текст) стало красным. Единственное место в css где у меня стоит красный цвет это место
CSS
1
2
3
#content p span{
color:red;
}
Но мне нужно подсветить красным только спан в тексте, а не весь текст.
Тем более на той странице что я перевел нет спанов. А есть спаны на странице обратной связи. И то, они там генерируются при проверке валидности содержимого форм с помощью echo (php).
Почему так происходит (все выделяется красным в теге p), подскажите пожалуйста!
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
10.09.2015, 09:37
Ответы с готовыми решениями:

Почему часть или буква выделяется красным цветом?
почему когда вводиш функцыю или совершаеш другое действие то часть или буква выделяется красным цветом

Почему принтер вместо черного печатает красным цветом?
Печатает красным документы, место черного, картридж черный в порядки, я еще черный заправлял но нечего не происходит. Принтер HP 3845

Строка. Выделить все русские слова красным цветом
Помогите с заданием. Нужно в строке выделить все русские слова красным цветом.

9
1 / 1 / 2
Регистрация: 09.09.2015
Сообщений: 26
10.09.2015, 17:34
Код html и Css прикрепи.
0
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
10.09.2015, 17:52
У вас где-то ошибка, все работает хорошо
PHP/HTML
1
2
3
4
5
6
<div id="content">
    <p>
        <span>решено</span> 
        благодарю!
    </p> 
</div>
CSS
1
#content p span{color: red; font-size: 20px;}
https://jsfiddle.net/gera18/Ljmp3h8d/9/
0
87 / 86 / 27
Регистрация: 04.10.2012
Сообщений: 355
10.09.2015, 19:07
Лучший ответ Сообщение было отмечено Mikhail Shell как решение

Решение

Если красный цвет появился в переводе Google, то ничего удивительного. Google Translate добавляет свою разметку в код. Видимо, в том числе, и span'ы. Если в стилях заменить {color: red} на {color: blue}, все станет синим?
1
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
11.09.2015, 17:47  [ТС]
Цитата Сообщение от aj17 Посмотреть сообщение
У вас где-то ошибка, все работает хорошо
PHP/HTML
1
2
3
4
5
6
<div id="content">
    <p>
        <span>решено</span> 
        благодарю!
    </p> 
</div>
CSS
1
#content p span{color: red; font-size: 20px;}
Повторюсь
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
Тем более на той странице что я перевел нет спанов.
То бишь на переведенной.
Цитата Сообщение от homak9 Посмотреть сообщение
Код html и Css прикрепи.
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="content">
<p><!--нет спанов-->
<img />
</p>
<p>
<!--нет спанов-->
</p>
<p>
<!--нет спанов-->
</p>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#content{
    width:466pt;
    min-height:207pt;
    max-height:100%;
    margin-left:18pt;
    margin-top:18pt;
    padding:18pt;
    background-color:#ffffff;
    box-shadow:0.2pt 0.1pt 5pt #000000;
}
#content h1{
    color:#6A5ACD;
    font-size:37pt;
}
#content p{
    margin:15pt 0pt;
    margin-right:15pt;
    font-size:19pt;
    color:#2A52BE;
}
#content p span{
        color:red;
}
Но опять же - спанов нет. А есть на этой странице.
PHP/HTML
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
<div id="content">
    <h1>обратная связь</h1>
    <?php
       
                    echo '<p><span>Не все поля заполнены!</span><br />Вернитесь и заполните все поля <a href="javascript:history.go(-1)">здесь</a>.</p>';
                    echo '</div>';
                    include 'blocks/footer.php';
                    echo '</div>';
                    echo '</body>';
                    echo '</html>';
                    exit();
                }
                
                if (mb_strlen($name, 'utf-8') > 15 or mb_strlen($family, 'utf-8') > 15){
                    echo '<p><span>Превышен максимум символов в поле ввода имени или фамилии (15 символов)!</span><br />Вернитесь и сократите количество символов <a href="javascript:history.go(-1)">здесь</a>.</p>';
                    echo '</div>';
                    include 'blocks/footer.php';
                    echo '</div>';
                    echo '</body>';
                    echo '</html>';
                    exit();
                }
                            
                if (preg_match('/[0-9\<\>\}\{\\\'\"\)\(\/\$\@\#\;\%\^\&\?\*\-\+\`\~\:\,\.\&]/i', $name) or preg_match('/[0-9\<\>\}\{\\\'\"\)\(\/\$\@\#\;\%\^\&\?\*\-\+\`\~\:\,\.]/i', $family)) {
                    echo '<p><span>В поле ввода имени или фамилии указаны недопустимые символы!</span><br />Вернитесь и уберите нестандартные символы не являющиеся буквами <a href="javascript:history.go(-1)">здесь</a>.</p>';
                    echo '</div>';
                    include 'blocks/footer.php';
                    echo '</div>';
                    echo '</body>';
                    echo '</html>';
                    exit();
                }
                            
                if (mb_strlen($text, 'utf-8') < 3){
                    echo '<p><span>Слишком мало символов в поле ввода для отзыва!</span><br />Минимум - 3 символа. Вернитесь и наберите большее количество символов <a href="javascript:history.go(-1)">здесь</a>.</p>';
                    echo '</div>';
                    include 'blocks/footer.php';
                    echo '</div>';
                    echo '</body>';
                    echo '</html>';
                    exit();
                }
                 if (mb_strlen($text, 'utf-8') > 1000){
                    echo '<p><span>Превышен максимум символов в поле ввода отзыва (1000 символов)!</span><br />На данный момент в поле ввода ' . mb_strlen($text, 'utf-8') . ' символов. Вернитесь и сократите количество символов <a href="javascript:history.go(-1)">здесь</a>.</p>';
                    echo '</div>';
                    include 'blocks/footer.php';
                    echo '</div>';
                    echo '</body>';
                    echo '</html>';
                    exit();
                 }
                           
                if(preg_match('/[<\>]/i', $text)){
                    echo '<p><span>Не используйте символы "<" и ">" в тексте комментария!</span><br />Вернитесь и уберите эти символы <a href="javascript:history.go(-1)">здесь</a>.</p>';
                    echo '</div>';
                    include 'blocks/footer.php';
                    echo '</div>';
                    echo '</body>';
                    echo '</html>';
                    exit();
                }
                 // еще код      
?>
</div>
Цитата Сообщение от mytilus Посмотреть сообщение
Google Translate добавляет свою разметку в код.
mytilus, а как понять какую разметку он обавляет и возможно ли это исправить?
0
87 / 86 / 27
Регистрация: 04.10.2012
Сообщений: 355
11.09.2015, 19:28
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
как понять какую разметку он обавляет
Правой кнопкой по красному тексту, далее "Просмотр кода элемента" или "Исследовать элемент", или что-то похожее (от браузера зависит).
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
11.09.2015, 19:38  [ТС]
mytilus, и правда он добавляет спаны, типа
HTML5
1
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">Текст</span> Text</span>
0
87 / 86 / 27
Регистрация: 04.10.2012
Сообщений: 355
12.09.2015, 13:39
Лучший ответ Сообщение было отмечено Mikhail Shell как решение

Решение

Тогда вижу несколько вариантов.
1. Если твоя разметка НЕ предполагает наличие атрибута class тега html:
CSS
1
2
#content p span {color: red}
html[class] #content p span {color: inherit !important}
2. Если предполагает:
CSS
1
2
3
#content p span {color: red}
html[class~=translated-ltr] #content p span,
html[class~=translated-rtl] #content p span {color: inherit !important}
3. Универсальный вариант, но нужна поддержка CSS3 со стороны браузера:
CSS
1
:root:not([class*=translated]) #content p span {color: red}
4. Универсальный вариант на CCS1 - каждому спану дать атрибут class и в стилях ссылаться на него. И надеяться, что не всплывут новые косяки при переводе.
5. И самый нетрудозатратный метод - смириться и забить на Google Translate.

Добавлено через 2 минуты
Кстати, еще вариант: заменить все спаны на <mark></mark> или <em></em>. Не думаю, что Google ими пользуется.
1
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
12.09.2015, 14:20  [ТС]
Цитата Сообщение от mytilus Посмотреть сообщение
Кстати, еще вариант: заменить все спаны на <mark></mark> или <em></em>. Не думаю, что Google ими пользуется.
Я сначала так и сделал, но побоялся что поддержки тега марк нет в старых версиях версиях браузеров.
Применил к нему id потому что он один единственный на странице генерируется.
Спасибо большое за ответ!
0
87 / 86 / 27
Регистрация: 04.10.2012
Сообщений: 355
13.09.2015, 00:02
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
побоялся что поддержки тега марк нет в старых версиях версиях браузеров
Ничего страшного. Они воспримут его согласно спецификации как {display: inline}, то есть - тот же <span>, чем он - по сути - и является, если отбросить семантику. Только специально для новых версий надо в стилях прописать:
CSS
1
mark {background-color: inherit}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
13.09.2015, 00:02
Помогаю со студенческими работами здесь

Выделить на экране красным цветом все цифры (tasm)
Ребята нужна помощь! Выделить на экране красным цветом все цифры.

В произвольном тексте все e-mail адреса вывести красным цветом
В произвольном тексте все e-mail адреса вывести красным цветом и привести к виду &lt;a href=”mailto:EMAIL”&gt;EMAIL&lt;/a&gt;

В тексте все полиндромы выделить красным цветом с увеличеной яркостью
Помогите пожалуйста. Задача не тяжелая, но не могу понять как выделить в самом тексте. Напишите код пожалуйста, если не сложно:good:

Дан текст в контейнере выделить все гласные буквы красным цветом
Как на подобие вот такого вот сприпта сделать чтобы все гласные быквы в тексте выделялись красным цветом. function f() { a...

Все чётные положительные числа вывести жёлтым, отрицательные красным, нули зелёным цветом
Условие - генерировать 50 чисел от числа, указанного пользователем, до числа, которое также указывает пользователь. Полученный результат...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Программный отбор элементов справочника Номенклатура по группе 1С
Maks 22.03.2026
Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор под наименованию группы (на. . .
Как я обхитрил таблицу Word
Alexander-7 21.03.2026
Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .
Krabik - рыболовный бот для WoW 3.3.5a
AmbA 21.03.2026
без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
Программный отбор элементов справочника Сотрудники по перечислениям 1С
Maks 21.03.2026
Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .
Переходник USB-CAN-GPIO
Eddy_Em 20.03.2026
Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого
Argus19 18.03.2026
Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++
8Observer8 17.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru