[решено] Раздвоение картинки

Grabber2006 · Конфигурация компьютера

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

lost8923142 · Отправлено: **05:55, 08-02-2022** | #12

Цитата Grabber2006:

У вас скриншот не совпадает с кодом. В коде АААА, а на скриншоте РРРР. »

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

Habetdin · Отправлено: **13:01, 09-02-2022** | #13

Цитата lost8923142:

Что это может значить? »

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

Либо же, если файл единственный, то дело может быть в неверном определении кодировки файла браузером - тогда стоит добавить в код meta-атрибут charset с указанием кодировки текста.

lost8923142 · Отправлено: **01:20, 11-02-2022** | #14

Цитата Habetdin:

может быть были перепутаны HTML-файлы? »

Нет, файлы не перепутаны.

Цитата Habetdin:

стоит добавить в код meta-атрибут charset с указанием кодировки текста »

Добавил, получилось это:

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">&nbsp; ААААААААА АААААА</a>
						  </font><br>
						  
						  
						  
						  </td>					 
						 </tr>
                        </table>

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

Habetdin · Отправлено: **14:37, 12-02-2022** | #15

lost8923142, судя по скриншоту, кодировку указали не совсем ту

Цитата lost8923142:

Если вы не сохраняли явно в UTF-8, и пользуетесь стандартными редакторами из состава Windows (блокнотом?) — попробуйте указать виндовую кодировку для кириллицы:

Код:

<meta charset="windows-1251">

Кстати, в путях до картинок, кажется, не хватает имени пользователя — обычно путь до рабочего стола выглядит как C:/Users/имя_пользователя/Desktop — проверьте ещё раз, пожалуйста, актуальность местоположения файлов картинок.

Цитата:

img src="file:///C:/Users/Desktop/3.jpg"

Upd:

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

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

HTML код:

<!--- основная таблица -->
<table width="513" height="78" background="img/3.jpg" cellspacing="0" cellpadding="0" border="0">

... к оформлению в виде CSS-стилей:

HTML код:

<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. В архиве приложил дополнительный пример (файл example-utf8.html).

lost8923142 · Отправлено: **14:11, 15-02-2022** | #16

Цитата Habetdin:

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

Спасибо. Корректно отображается только example-utf8. У остальные также картинка раздваивается.

bredych · Отправлено: **10:43, 16-02-2022** | #17

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

Habetdin · Отправлено: **11:47, 16-02-2022** | #18

Цитата lost8923142:

Корректно отображается только example-utf8. »

Потому что в нём есть то,

Цитата Habetdin:

чего не было в оригинале — свойство повторяемости картинки background-repeat. »

Но я бы подумал над переносом картинки из стиля таблицы (table) в стиль строки (tr), она словно под строку, раз ещё и повторяться не должна.
А возможно, что именно картинка не так сильно и нужна — вот вам пример использования CSS вместо картинки, похожий результат оформления?

Цитата lost8923142:

У остальные также картинка раздваивается. »

А их я не трогал, только сохранил в правильной кодировке (и совсем чуть-чуть автоматически отформатировал в редакторе кода)

lost8923142 · Отправлено: **12:27, 16-02-2022** | #19

Цитата Habetdin:

вот вам пример использования CSS вместо картинки, похожий результат оформления?

Результат похожий, но нужна именно картинка.

Цитата Habetdin:

Но я бы подумал над переносом картинки из стиля таблицы (table) в стиль строки (tr)

Как это сделать?

Цитата Habetdin:

Пробуйте разметку слоями, а не таблицей

Как это сделать?

lost8923142 · Отправлено: **02:52, 24-02-2022** | #20

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

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">&nbsp; 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">&nbsp; Aaaaaaaaaaaa aaaaaaaaaaa</a> </font><br>
 </td>
 </tr>
 </table>
 </td> </tr> </table>
	</body>

</html>