[решено] Раздвоение картинки [Версия для КПК]

lost8923142

07-02-2022, 04:07

Здравствуйте.
Имеются две картинки.
Вот они:
https://i116.fastpic.org/big/2022/0207/7b/c48b0c61b5ee48fb4cb3c7aa8930f97b.jpg (https://fastpic.org/view/116/2022/0207/c48b0c61b5ee48fb4cb3c7aa8930f97b.jpg.html)

https://i116.fastpic.org/big/2022/0207/76/9edf843620b7135d1d0674b804276976.jpg (https://fastpic.org/view/116/2022/0207/9edf843620b7135d1d0674b804276976.jpg.html)
Первая из них, при открытии html в браузере, "удваивается" снизу таким вот образом:
https://i116.fastpic.org/big/2022/0207/43/f739aeb6f0dbce4a3ada8420d2cc6843.jpg (https://fastpic.org/view/116/2022/0207/f739aeb6f0dbce4a3ada8420d2cc6843.jpg.html)
Вот код


<table width="513" height="78" background="file:///C:/Users/Desktop/3.jpg" cellspacing="0" cellpadding="0" border="0">
<tr><td height="6" colspan="2"></td></tr>
<tr>
<td width="10" rowspan="2"></td>
<td width="340" valign="top">

<table cellspacing="0" cellpadding="0" border="0">

<tr>
<td valign="top" width="60" rowspan="2"> <img src="file:///C:/Users/Desktop/4.jpg" width="50" height="64"></td>
<td valign="top"><nobr valign="top">
<font class="we">Текст 1</font></nobr></td>

</tr>
<tr>
<td valign="top">
<font class="wegrays">Текст 2</font></td>
</tr>
</table>

</td>

<td width="30"></td>

<td valign="middle">

<table width="126" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<font class="wegray">
<a href="javascript:sw('')" class="wegray">Текст 3</a><br>
<a href="http://www.сайт.ru" class="wegray">Текст 4</a><br><br><br>
</font>
<br>

</td>
</tr>
</table>

</td>
</tr>
</table>
<br>

Как это исправить?

Grabber2006

07-02-2022, 06:04

Три <br> подряд уберите.
<a href="http://www.сайт.ru" class="wegray">Текст 4</a><br><br><br>

lost8923142

07-02-2022, 06:55

Три <br> подряд уберите.
<a href="http://www.сайт.ru" class="wegray">Текст 4</a><br><br><br>

Помогло, спасибо!

lost8923142

07-02-2022, 07:14

А в этом случае что делать?

<table width="513" height="78" background="file:///C:/Users/Desktop/3.jpg" cellspacing="0" cellpadding="0" border="0">
<tr><td height="6" colspan="2"></td></tr>
<tr>
<td width="10" rowspan="2"></td>
<td width="340" valign="top">

<table cellspacing="0" cellpadding="0" border="0">

<tr>
<td valign="top" width="60" rowspan="2"> <img src="file:///C:/Users/Desktop/4.jpg" width="50" height="64"></td>
<td valign="top"><nobr valign="top">
<font class="we">Текст</font></nobr></td>

</tr>
<tr>
<td valign="top">
<font class="wegrays">Текст</font></td>
</tr>
</table>

</td>

<td width="30"></td>

<td valign="middle">

<table width="126" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<font class="wegray">
<br><a href="javascript:sw('camera')" class="wegray">Текст</a><br>
<br><br>
</font>
<font class="wered">
<img src="img/trg.gif" width="5" height="5" align="center"><a href="@r=2&p=1&a=camera" class="wered">  Текст</a>
</font><br>

</td>
</tr>
</table>

</td>
</tr>
</table>

<br>

lost8923142

07-02-2022, 14:01

Никто не знает?

Grabber2006

07-02-2022, 15:12

То же самое.
<br><a href="javascript:sw('camera')" class="wegray">Текст</a><br>
<br><br>

lost8923142

07-02-2022, 15:19

Да, помогло. Спасибо.

lost8923142

08-02-2022, 02:12

При добавлении текста, картинки вообще теряются.
https://i116.fastpic.org/big/2022/0208/ba/331897cd63f8da6e8228ffbb5e2282ba.jpg (https://fastpic.org/view/116/2022/0208/331897cd63f8da6e8228ffbb5e2282ba.jpg.html)

<table width="513" height="78" background="file:///C:/Users/Desktop/3.jpg." cellspacing="0" cellpadding="0" border="0">
<tr><td height="6" colspan="2"></td></tr>
<tr>
<td width="10" rowspan="2"></td>
<td width="340" valign="top">

<table cellspacing="0" cellpadding="0" border="0">

<tr>
<td valign="top" width="60" rowspan="2"> <img src="file:///C:/Users/Desktop/4.jpg" width="50" height="64"></td>
<td valign="top"><nobr valign="top">
<font class="we">Аааааааааааа</font></nobr></td>

</tr>
<tr>
<td valign="top">
<font class="wegrays">Аааааааа, ааааааааа аааааааааааа, ааааааа аа аааааааа, ааааа а ааа аа аааааа, ааа аааа аааааа аа аааааааааааа (ааа ааааа аа ааааааааааа)</font></td>
</tr>
</table>

</td>

<td width="30"></td>

<td valign="middle">

<table width="126" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<font class="wegray">
<br><a href="javascript:sw('camera')" class="wegray">Аааааааааа ааааа</a><br>

</font>
<font class="wered">
<img src="img/trg.gif" width="5" height="5" align="center"><a href="@r=2&p=1&a=camera" class="wered">  ААААААААА АААААА</a>
</font><br>

</td>
</tr>
</table>

</td>
</tr>
</table>

<br>

Habetdin

08-02-2022, 03:19

lost8923142, текст в других элементах не так влияет на отображение картинок, как перемещение или удаление самих файлов этих картинок. Проверьте, на месте ли используемые в коде файлы:

… background="file:///C:/Users/Desktop/3.jpg." …

… src="file:///C:/Users/Desktop/4.jpg" …

… src="img/trg.gif" …

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

Третий пример из вашего кода, например — img/trg.gif — указывает на файл trg.gif, который находится в папке img, которая, в свою очередь, будет запрашиваться браузером относительно того же пути, где лежит сам html-файл с приведённым кодом:
Папка проекта
│ └── Папка img
│ └── Файл trg.gif
└── Файл с кодом

lost8923142

08-02-2022, 05:00

Проверьте, на месте ли используемые в коде файлы: »
Все файлы на месте, кроме trg.gif, но он и не нужен.

Grabber2006

08-02-2022, 05:46

У вас скриншот не совпадает с кодом. В коде АААА, а на скриншоте РРРР.
А вообще, да переосмысления, следует перечитать раздел в учебнике по HTML "Таблицы". И посмотреть, каким образом заполняется картинками бекграунд.

lost8923142

08-02-2022, 05:55

У вас скриншот не совпадает с кодом. В коде АААА, а на скриншоте РРРР. »
Да, я тоже заметил. В коде АААА, а в браузере РРРР. Что это может значить?

Habetdin

09-02-2022, 13:01

Что это может значить? »
Если файлы картинок на месте, то может быть были перепутаны HTML-файлы?

Либо же, если файл единственный, то дело может быть в неверном определении кодировки файла браузером - тогда стоит добавить в код meta-атрибут charset (http://htmlbook.ru/html/meta/charset) с указанием кодировки текста.

lost8923142

11-02-2022, 01:20

может быть были перепутаны HTML-файлы? »
Нет, файлы не перепутаны.
стоит добавить в код meta-атрибут charset с указанием кодировки текста »
Добавил, получилось это:
https://i116.fastpic.org/big/2022/0211/64/d762834af6dc1099e97ec87f804fb764.jpg (https://fastpic.org/view/116/2022/0211/d762834af6dc1099e97ec87f804fb764.jpg.html)
<html>
<head>
<meta charset="utf-8">
<title>Тег META, атрибут charset</title>
</head>

<table width="513" height="78" background="file:///C:/Users/Desktop/3.jpg" cellspacing="0" cellpadding="0" border="0">
<tr><td height="6" colspan="2"></td></tr>
<tr>
<td width="10" rowspan="2"></td>
<td width="340" valign="top">

<table cellspacing="0" cellpadding="0" border="0">

<tr>
<td valign="top" width="60" rowspan="2"> <img src="file:///C:/Users/Desktop/4.jpg" width="50" height="64"></td>
<td valign="top"><nobr valign="top">
<font class="we">Аааааааааааа</font></nobr></td>

</tr>
<tr>
<td valign="top">
<font class="wegrays">Аааааааа, ааааааааа аааааааааааа, ааааааа аа аааааааа, ааааа а ааа аа аааааа, ааа аааа аааааа аа аааааааааааа (ааа ааааа аа ааааааааааа)</font></td>
</tr>
</table>

</td>

<td width="30"></td>

<td valign="middle">

<table width="126" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<font class="wegray">
<br><a href="javascript:sw('camera')" class="wegray">Аааааааааа ааааа</a><br>

</font>
<font class="wered">
<img src="img/trg.gif" width="5" height="5" align="center"><a href="@r=2&p=1&a=camera" class="wered">  ААААААААА АААААА</a>
</font><br>

</td>
</tr>
</table>

</td>
</tr>
</table>

<br>

Habetdin

12-02-2022, 14:37

lost8923142, судя по скриншоту, кодировку указали не совсем ту :)
<meta charset="utf-8"> »
Если вы не сохраняли явно в UTF-8, и пользуетесь стандартными редакторами из состава Windows (блокнотом?) — попробуйте указать виндовую кодировку для кириллицы:
<meta charset="windows-1251">
[hr]Кстати, в путях до картинок, кажется, не хватает имени пользователя — обычно путь до рабочего стола выглядит как C:/Users/имя_пользователя/Desktop — проверьте ещё раз, пожалуйста, актуальность местоположения файлов картинок.
img src="file:///C:/Users/Desktop/3.jpg"
[hr]Upd:

Прикрепил к посту пример с исправленной кодировкой, original-utf8.html и original-win1251.html - файлы в кодировках utf-8 и windows-1251 соответственно.

Для ускорения решения оригинальной проблемы (повторение картинки) рекомендую перейти от оформления в виде html-тегов:

<table width="513" height="78" background="img/3.jpg" cellspacing="0" cellpadding="0" border="0">
... к оформлению в виде CSS-стилей:
<style>
table.main { /* оформление таблицы с классом main */
width: 513px;
height: 78px;
background-image: url(img/3.jpg);
background-repeat: no-repeat;
border-spacing: 0px; /* аналог cellspacing */
border: 0px;
}
table.main td { /* оформление ячеек (td) таблицы с классом main */
padding: 0px; /* аналог cellpadding */
}
</style>

<table class="main">
В таком виде намного легче управлять оформлением — в частности, чего не было в оригинале — свойство повторяемости картинки background-repeat (https://developer.mozilla.org/ru/docs/Web/CSS/background-repeat). В архиве приложил дополнительный пример (файл example-utf8.html).

lost8923142

15-02-2022, 14:11

Прикрепил к посту пример с исправленной кодировкой, original-utf8.html и original-win1251.html - файлы в кодировках utf-8 и windows-1251 соответственно.
Спасибо. Корректно отображается только example-utf8. У остальные также картинка раздваивается.

https://i116.fastpic.org/big/2022/0215/ad/5004bb246ef4260bdc76c21e495e8fad.jpg (https://fastpic.org/view/116/2022/0215/5004bb246ef4260bdc76c21e495e8fad.jpg.html)

bredych

16-02-2022, 10:43

Если ставите картинку фоном ячейки, она и будет занимать весь фон. Пробуйте разметку слоями, а не таблицей, если вам столь критично, чтоб фоном была именно картинка, а не фон.

Habetdin

16-02-2022, 11:47

Корректно отображается только example-utf8. »
Потому что в нём есть то,
чего не было в оригинале — свойство повторяемости картинки background-repeat. »
Но я бы подумал над переносом картинки из стиля таблицы (table) в стиль строки (tr), она словно под строку, раз ещё и повторяться не должна.
А возможно, что именно картинка не так сильно и нужна — вот вам пример использования CSS вместо картинки (https://jsfiddle.net/86p4ovq0/), похожий результат оформления?
У остальные также картинка раздваивается. »
А их я не трогал, только сохранил в правильной кодировке (и совсем чуть-чуть автоматически отформатировал в редакторе кода) :)

lost8923142

16-02-2022, 12:27

вот вам пример использования CSS вместо картинки, похожий результат оформления?
Результат похожий, но нужна именно картинка.
Но я бы подумал над переносом картинки из стиля таблицы (table) в стиль строки (tr)
Как это сделать?
Пробуйте разметку слоями, а не таблицей
Как это сделать?

lost8923142

24-02-2022, 02:52

Назрело несколько вопросов:
1) Как сделать отступ от таблицы (внизу)?
2) Почему при добавлении кода "font-size: 9pt" вот сюда "}table.main td {padding: 0px; /* аналог cellpadding */font-size: 9pt}</style>", то шрифт изменяется везде, а не только на одной таблице?
3) Какую роль выполняет картинка img/trg.gif? (Этот вопрос к Habetdin)
https://i116.fastpic.org/big/2022/0224/9f/12f4762bde6f565e44f94f4d8d88839f.jpg (https://fastpic.org/view/116/2022/0224/12f4762bde6f565e44f94f4d8d88839f.jpg.html)

<html>

<head>
<meta charset="utf-8">

<title>Эксперименты с таблицей</title>

<style>
table.main {

width: 513px;

height: 78px;
background-image: url(img/3.jpg);

background-repeat: no-repeat;

border-spacing: 0px; /* аналог cellspacing */
border: 0px;

}

table.main td {
padding: 0px; /* аналог cellpadding */

font-size: 9pt}

</style>
</head>

<body>



<table class="main">

<tr>
<td height="6" colspan="2"></td>
</tr>

<tr>
<td width="10" rowspan="2"></td>

<td width="340" valign="top"> <table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top" width="60" rowspan="2"> <img src="img/4.jpg" width="50" height="64"></td>
<td valign="top"> <nobr valign="top">
<font class="we">Aaaaaaaaaaaa</font> </nobr>
</td>
</tr> <tr>
<td valign="top">
<font class="wegrays">Aaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaa
</font>
</td>
</tr> </table>
</td>

<td width="30"></td>
<td valign="middle">
<table width="126" border="0" cellspacing="0" cellpadding="0">
<tr> <td align="right">
<font class="wegray">
<br><a href="javascript:sw('camera')" class="wegray">aaaaaaaaaaaaaaa</a><br> </font> <font class="wered">

<img src="img/trg.gif" width="5" height="5" align="center"><a href="@r=2&p=1&a=camera" class="wered">  aaaaaaaaaaaaaaaa</a> </font><br>
</td>
</tr>
</table>
</td> </tr> </table>
</body>

</html>


<html>

<head>
<meta charset="utf-8">

<title>Эксперименты с таблицей</title>

<style>
table.main {

width: 513px;

height: 78px;
background-image: url(img/3.jpg);

background-repeat: no-repeat;

border-spacing: 0px; /* аналог cellspacing */
border: 0px;

}

table.main td {
padding: 0px; /* аналог cellpadding */

}

</style>
</head>

<body>



<table class="main">

<tr>
<td height="6" colspan="2"></td>
</tr>

<tr>
<td width="10" rowspan="2"></td>

<td width="340" valign="top"> <table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top" width="60" rowspan="2"> <img src="img/4.jpg" width="50" height="64"></td>
<td valign="top"> <nobr valign="top">
<font class="we">Aaaaaaaaaaaaaa</font> </nobr>
</td>
</tr> <tr>
<td valign="top">
<font class="wegrays">Aaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa
</font>
</td>
</tr> </table>
</td>

<td width="30"></td>
<td valign="middle">
<table width="126" border="0" cellspacing="0" cellpadding="0">
<tr> <td align="right">
<font class="wegray">
<br><a href="javascript:sw('camera')" class="wegray">Aaaaaaaaaaa aaaaaaaaa</a><br> </font> <font class="wered">

<img src="img/trg.gif" width="5" height="5" align="center"><a href="@r=2&p=1&a=camera" class="wered">  Aaaaaaaaaaaa aaaaaaaaaaa</a> </font><br>
</td>
</tr>
</table>
</td> </tr> </table>
</body>

</html>