0 Пользователей и 1 Гость просматривают эту тему.
  • 6 Ответов
  • 354 Просмотров
*

bovinkm

  • Осваиваюсь на форуме
  • 17
  • 0 / 0
друзья, я уже голов сломал с подчёркиванием в таблице
нужно подчеркнуть жирным по аналогии с верхней полосой (см. рисунок), но получается только тонкая серая (параметры цвета и размеров <hr /> не отрабатывают)
страница http://www.teleru.net/index.php?option=com_content&view=article&layout=teleru:clean&id=46&Itemid=164&site_section=individuals

P.S. я пытался примеры спрятать под спойлеры, но тогда весь текст моего поста здесь пропадает


при подстановке строки
Код
<td style="border-width: 2px 0px 0px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">
из 28 строки в 34
полоса не появляется

Демонстрирую:
исходный кусок кода
Код
<tr>
<td style="border-width: 2px 0px 0px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">
<p><strong>СЛУЖБА ТЕХНИЧЕСКОЙ ПОДДЕРЖКИ</strong></p>
<p><strong>Телефон:</strong><br /> (495) 780-50-88, круглосуточно<br /> (499) 272-50-88, круглосуточно<br /> (985) 960-19-44, круглосуточно</p>
<p> </p>
<p><strong>E-mail:</strong> <a href="mailto:support@teleru.net">support@teleru.net</a></p>
<tr>

превращаю в этот (скопирована первая строка и поставлена последней)
Код
<td style="border-width: 2px 0px 0px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">
<p><strong>СЛУЖБА ТЕХНИЧЕСКОЙ ПОДДЕРЖКИ</strong></p>
<p><strong>Телефон:</strong><br /> (495) 780-50-88, круглосуточно<br /> (499) 272-50-88, круглосуточно<br /> (985) 960-19-44, круглосуточно</p>
<p> </p>
<p><strong>E-mail:</strong> <a href="mailto:support@teleru.net">support@teleru.net</a></p>
<tr>
<td style="border-width: 2px 0px 0px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">


1 как должна выглядеть полоса и 2 как она у меня получилась)



макет страницы в ячейках



код страницы:
Код
<table style="width: 800px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<table style="border-collapse: collapse; border: none; width: 740px;">
<tbody>
<tr>
<td style="border-width: 2px 0px 2px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">
<p><strong>ЦЕНТР ПО РАБОТЕ С КЛИЕНТАМИ:</strong></p>
</td>
</tr>
<tr>
<td style="border-width: 2px 0px 2px 0px; border-style: solid; padding: 5pt; vertical-align: top;">
<p> </p>
<p> </p>
<p>Тел.: +7 (495) 780-89-33<br /> Факс: +7 (495) 780-89-95<br />E-mail: <a href="mailto:lk@teleru.net">lk@teleru.net</a></p>
<p> </p>
<p> </p>
<p>{zhyandexmap:2}</p>
</td>
<td style="border-width: 2px 0px 2px 0px; border-style: solid; padding: 5pt; vertical-align: top;">
<p><strong><span style="color: red;">Прием клиентов <br />производится по предварительной записи:</span></strong><br />
<p><strong>ЖК «ЗОЛОТЫЕ КЛЮЧИ 2»</strong></p>
<p>Адрес: 119590, г. Москва, ул. Минская д.1Г, корп.4</p>
<p>Вторник: с 10:00 до 12:00<p>Четверг: с 14:00 до 16:00</p>
<p><img src="images/photoobject/zk2.png" border="0" alt="zk2" width="300" height="225" /><br /><br /></p>
</td>
</tr>
<tr>
<td style="border-width: 2px 0px 0px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">
<p><strong>СЛУЖБА ТЕХНИЧЕСКОЙ ПОДДЕРЖКИ</strong></p>
<p><strong>Телефон:</strong><br /> (495) 780-50-88, круглосуточно<br /> (499) 272-50-88, круглосуточно<br /> (985) 960-19-44, круглосуточно</p>
<p> </p>
<p><strong>E-mail:</strong> <a href="mailto:support@teleru.net">support@teleru.net</a></p>
<tr>
</td>
</tr>
</tbody>
</table>
<tr>
<td width="350">
<p><strong>ГЛАВНЫЙ ОФИС</strong></p>
<p> </p>
<p><strong>Секретариат</strong></p>
<p>Адрес: 119590, г. Москва, ул. Минская д.1Г, корп.4</p>
<p>Тел.: (495)780-89-99, факс: (495)780-89-95</p>
<p>E-mail: <a href="mailto:info@teleru.net">info@teleru.net</a></p>
<p> </p>
<p><strong>Необходимо заранее позвонить и заказать пропуск!</strong></p>
<p> </p>
<p><strong>Пешком:</strong></p>
<p><strong>от ст. м. Минская или ст. м. Ломоносовский проспект или одну остановку на авт.№ 67, 103, 130, 187, 260, 4 или троллейбусе №34 до остановки «Мосфильмовская улица»</strong></p>
<p> </p>
<p><strong>Общественным транспортом:</strong></p>
<p><strong>от ст. м. Киевская</strong></p>
<p>Муниципальное маршрутное такси № 394 до остановки «Мосфильмовская улица».</p>
<p>Троллейбус № 17 или 34 до остановки «Мосфильмовская улица»</p>
<p> </p>
<p><strong>от ст. м. Университет</strong></p>
<p>Автобус № 67, 103, 130, 187, 260, 487 до остановки «Мосфильмовская улица»</p>
<p>Троллейбус № 34, до остановки «Мосфильмовская улица»</p>
<p> </p>
<p> </p>
</td>
<td>
<p><br /><br /><strong>Режим работы:</strong></p>
<p>Пн.-Чт.: с 09:00 до 18:00</p>
<p>Пт.: с 09:00 до 16:45</p>
</td>
</tr>
</tbody>
</table>
<p> </p>
« Последнее редактирование: 20.11.2019, 12:11:06 от bovinkm »
*

Biss

  • Давно я тут
  • 960
  • 98 / 0
Re: Подчёркивание жирной полосой
« Ответ #1 : 20.11.2019, 12:21:15 »
Цитировать
<td style="border-width: 2px 0px 0px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">
<p><strong>СЛУЖБА ТЕХНИЧЕСКОЙ ПОДДЕРЖКИ</strong></p>
<p><strong>Телефон:</strong><br /> (495) 780-50-88, круглосуточно<br /> (499) 272-50-88, круглосуточно<br /> (985) 960-19-44, круглосуточно</p>
<p> </p>
<p><strong>E-mail:</strong> <a href="mailto:support@teleru.net">support@teleru.net</a></p>
<tr>
<td style="border-width: 2px 0px 0px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">
так нельзя, открывать следущую таблицу, не закрыв первую
Код
<td style="border-width: 2px 0px 0px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">
....
</td>
<td style="border-width: 2px 0px 0px 0px; border-style: solid; padding: 5pt; vertical-align: top;" colspan="2">
....
</td>
*

beliyadm

  • Легенда
  • 9512
  • 1650 / 66
  • Севастополь == Россия
Re: Подчёркивание жирной полосой
« Ответ #2 : 20.11.2019, 13:31:30 »
Используйте псевдоэлементы. Для абзаца задаете класс, прописываете position: relative и делаете псевдо в любом месте с любым стилем
Код
p.redline:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    content: '';
    background: red;
}

Скрин http://tinyurl.com/tzfuzy7


P.S. И верстать таблицами не табличные данные это как-то фуу
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

bovinkm

  • Осваиваюсь на форуме
  • 17
  • 0 / 0
Re: Подчёркивание жирной полосой
« Ответ #3 : 20.11.2019, 15:23:04 »
я не умею цеплять CSS файлы) как просто воткнуть эту полосу?  !


Мои потуги:

создал фаил, положил в отдельную папку, прописал в коде страницы ссылку на фаил - она определилась как часть текста страницы
Код
<link rel="p.redline:after" href="/templates/testcss/linecss.css">
System EasyScript не нашёл у себя
В шаблонах тоже не понятно каким именно пользоваться, чтоб фаил цеплять
В Материалах - медиа-менеджере попробовал создать папку CSS и загрузить в неё фаил - Данный тип файлов не поддерживается
*

beliyadm

  • Легенда
  • 9512
  • 1650 / 66
  • Севастополь == Россия
Re: Подчёркивание жирной полосой
« Ответ #4 : 20.11.2019, 15:33:07 »
Код
<link rel="p.redline:after" href="/templates/testcss/linecss.css">
рукалицо, такого я еще не видел никогда

Открываете файл http://www.teleru.net/templates/teleru/css/style.css, в конце пишите нужные стили (с определением position: relative для родителя и ниже оформление псевдоэлемента). В теле материала прописываете нужный класс для блока (абзаца\дива\женщины, не важно) и все работает.

Итого у вас в теле страницы есть
Код
<p class="redline">Необходимо заранее позвонить и заказать пропуск!</p>

Дальше в указанном CSS файле пишите
Код
p.redline {
    position: relative;
}
p.redline:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    content: '';
    background: red;
}

Все, у вас результат как на скрине выше - толстая красная линия, дальше только ваша фантазия
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

bovinkm

  • Осваиваюсь на форуме
  • 17
  • 0 / 0
Re: Подчёркивание жирной полосой
« Ответ #5 : 20.11.2019, 17:04:18 »
Не подцепился код(

рукалицо, такого я еще не видел никогда
https://www.youtube.com/watch?v=FWXbktZZw20&t=3s 1:53 это всё он ^-^ но это отношения к делу уже не имеет, не будем заострять внимание.

по сути моя задача уже сведена к копи-пасту, НО
в CSS код вставил
для примера в коде подменил строку на Вашу
это
Код
<p><strong>Необходимо заранее позвонить и заказать пропуск!</strong></p>
на это
Код
<p class="redline">Необходимо заранее позвонить и заказать пропуск!</p>
и ничего! текст просто перестал быть выделенным жирным и всё. что не так или чего не хватает, подскажите плз?
« Последнее редактирование: 20.11.2019, 17:20:53 от bovinkm »
*

beliyadm

  • Легенда
  • 9512
  • 1650 / 66
  • Севастополь == Россия
Re: Подчёркивание жирной полосой
« Ответ #6 : 20.11.2019, 17:51:14 »
и ничего! текст просто перестал быть выделенным жирным и всё. что не так или чего не хватает, подскажите плз?
На странице http://www.teleru.net/index.php?option=com_content&view=article&layout=teleru:clean&id=46&Itemid=164&site_section=individuals не вижу класса у абзаца. Если вы работаете локально - помочь с конкретикой будет сложнее.
А так все просто (хоть инлайн стили пишите)/
Вот вам два простейших примера (границы абзацев добавил для понимания, где находятся псевдоэлементы)
https://jsfiddle.net/beliyadm/v1m92tc8/

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Не могу убрать подчеркивание ссылок!

Автор geral

Ответов: 2
Просмотров: 2967
Последний ответ 05.02.2013, 20:06:23
от geral