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

Habetdin · Отправлено: **15:22, 24-02-2022** | #21

Цитата lost8923142:

Как сделать отступ от таблицы (внизу)? »

Используйте свойство padding-bottom

Цитата lost8923142:

то шрифт изменяется везде, а не только на одной таблице? »

Возможно, что браузер "додумывает" и применяет данное свойство ко всей странице, т.к. для неё самой не задано никаких подобных свойств. Можно попробовать явно определить иное значение для основной части страницы:

Код:

body { font-size: 12pt; }

Цитата lost8923142:

Какую роль выполняет картинка img/trg.gif? (Этот вопрос к Habetdin) »

Увидел её в Вашем коде и заменил её на заглушку за неимением оригинала:

Цитата lost8923142:

<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> »

lost8923142 · Отправлено: **13:51, 25-02-2022** | #22

Цитата Habetdin:

Используйте свойство padding-bottom »

Вставил код вот сюда:

Код:

border: 0px;
padding-bottom: 70px;
}

Но как сделать отступ не от текста, а от картинки?

Цитата Habetdin:

Можно попробовать явно определить иное значение для основной части страницы:
Код:
body { font-size: 12pt; }
»

Покажите пожалуйста на примере, а то я разобраться не могу. Не только шрифт, но и картинка отображается в обоих случаях одна и та же.

Цитата Habetdin:

Увидел её в Вашем коде и заменил её на заглушку за неимением оригинала: »

Понятно. А почему она не отображается в браузере? (Хотя она и не нужна).

img/3.jpg

img/6.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;
padding-bottom: 70px;
}
			
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: 118px;
background-image: url(img/6.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>

lost8923142 · Отправлено: **17:45, 27-02-2022** | #23

Цитата Habetdin:

Можно попробовать явно определить иное значение для основной части страницы:
Код:
body { font-size: 12pt; }
»

Покажите пожалуйста на примере, а то я разобраться не могу. Не только шрифт, но и картинка отображается в обоих случаях одна и та же.

Habetdin · Отправлено: **18:19, 27-02-2022** | #24

Цитата lost8923142:

Не только шрифт, но и картинка отображается в обоих случаях одна и та же. »

У вас получился документ с близнецом внутри себя, браузеру никак не построить нормально обе таблицы, не говоря уже об отличиях между ними. Необходимо добавить вторую таблицу под первую в единый документ, а не плодить два содержимых <body> друг рядом с другом

HTML код:

<html>
	<head>
		<meta charset="utf-8">
		<title>Эксперименты с таблицей</title>
		<style>
			body {
				font-size: 12pt;
			}

			table.main3 {
				width: 513px;
				height: 78px;
				background-image: url(img/3.jpg);
				background-repeat: no-repeat;
				border-spacing: 0px;
				border: 0px;
				padding-bottom: 70px;
			}

			table.main3 td {
				padding: 0px;
				font-family: serif; /* стиль шрифта для визуального отличия */
				font-size: 9pt
			}

			table.main6 {
				width: 513px;
				height: 118px;
				background-image: url(img/6.jpg);
				background-repeat: no-repeat;
				border-spacing: 0px;
				border: 0px;
			}

			table.main6 td {
				padding: 0px;
				font-family: sans-serif; /* стиль шрифта для визуального отличия */
				font-size: 9pt
			}
		</style>
	</head>

	<body>
		<h1>Первая таблица</h1>
		<p>Имеет класс main3</p>
		<table class="main3">
			<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>
		<h1>Вторая таблица</h1>
		<p>Имеет класс main6</p>
		<table class="main6">
			<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>

Цитата lost8923142:

А почему она не отображается в браузере? (Хотя она и не нужна). »

Из-за непонятного нагромождения элементов в коде документа. Если возникают проблемы с редактированием HTML-кода, может быть стоит попробовать онлайн WYSIWYG-редактор или тот же Microsoft Word?

lost8923142 · Отправлено: **10:32, 02-03-2022** | #25

При открытии в браузере получилось вот это:

Habetdin · Отправлено: **12:22, 02-03-2022** | #26

lost8923142, опять кодировка файла не совпала с кодировкой из кода — нужно сохранить в UTF-8

Цитата:

Кажется, проще всего заменить в этом участке кода "utf-8" на "windows-1251", раз не получается найти кодировку в редакторе.
Ну а помимо кириллицы, сами картинки то правильно в этот раза отображаются?

lost8923142 · Отправлено: **03:46, 05-03-2022** | #27

Цитата Habetdin:

проще всего заменить в этом участке кода "utf-8" на "windows-1251" »

Да, в "windows-1251" текст отображается.

Цитата Habetdin:

Ну а помимо кириллицы, сами картинки то правильно в этот раза отображаются? »

Да, картинки отображаются правильно.

lost8923142 · Отправлено: **04:22, 05-03-2022** | #28

А ещё вопросик, что сделать, чтобы этот код отобразился на странице браузера?

HTML код:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Заголовок страницы</title>
</head>
  <body>
<div style="display:none" class="video-subtitles"><p><span class="video-subtitles-time" href="#t=0m29s">00:00:29</span>AAA  AAAAAA</p><p><span class="video-subtitles-time" href="#t=1m45s">00:01:45</span>Скрытый текст</p></div>
  </body>
</html>

Отображается белый фон.

Habetdin · Отправлено: **13:56, 05-03-2022** | #29

lost8923142, уберите этот скрывающий атрибут:

Цитата lost8923142:

style="display:none" »

lost8923142 · Отправлено: **14:38, 05-03-2022** | #30

Цитата Habetdin:

уберите этот скрывающий атрибут: »

Спасибо большое, помогли.