Консультации Портала - Консультация #172626

Задать вопрос Консультации Пользователи Форум

Задать вопрос экспертам

Консультация № 172626

25.09.2009, 17:51

0.00 руб.

0 6 1

Компьютеры Интернет и сети

уважаемые эксперты помогите новичку решить следующий вопрос.

у меня есть таблица 1003 рх
Правая и левая колонки по 150 рх.
в средней колонке вставлен див в который я хочу вставить еще 1 вложенную таблицу, но когда вставляю таблицу моя основная расплывается.
Примерно как на сайте http://elparfum.kiev.ua/page3/brand32/ (см. описание товара). Спасибо за консультацию.

Обсуждение

давно

FOXhunter

Профессионал
222505
728

25.09.2009, 23:27

общий

Вы бы хоть код вашей страницы дали, а то как-то не понятно что у Вас не получается.
Вот к примеру код моего варианта:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="ru" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Без названия 1</title>
<style type="text/css">
.style1 {
	background-color: #008080;
}
.style2 {
	background-color: #CC0066;
}
.style3 {
	text-align: center;
	font-family: Calibri;
	font-size: xx-large;
	color: #FFFFFF;
	background-color: #008080;
}
.style4 {
	color: #FFFFFF;
	font-family: Calibri;
	font-size: small;
	background-color: #008080;
}
.style5 {
	border-collapse: collapse;
}
.style6 {
	font-family: Calibri;
	font-size: small;
	color: #FFFFFF;
}
</style>
</head>

<body>

<table style="width: 100%">
	<tr>
		<td class="style3" colspan="3">Заголовок сайта</td>
	</tr>
	<tr>
		<td style="width: 150px; text-align:center" class="style4">НАВИГАЦИЯ:

		

		<div style="text-align:left">РАЗДЕЛ 1

		РАЗДЕЛ 2

		РАЗДЕЛ 3

		РАЗДЕЛ 4

		РАЗДЕЛ 5

		РАЗДЕЛ 6

		РАЗДЕЛ 7

		РАЗДЕЛ 8

		РАЗДЕЛ 9

		РАЗДЕЛ 10</div></td>
		<td style="width: 1003px; vertical-align:top; text-align:center" class="style2">
		<div style="width:99%">
			<table cellspacing="0" cellpadding="0" class="style5" style="width:95%">
				<tr>
				<td><span class="style6">у меня есть таблица 1003 рх
Правая и левая колонки по 150 рх.
в средней колонке вставлен див в который я хочу вставить еще 1 вложенную таблицу, но когда вставляю таблицу моя основная расплывается.
Примерно как на сайте http://elparfum.kiev.ua/page3/brand32/ (см. описание товара). Спасибо за консультацию.</span>
				</td>
				<td><span class="style6">у меня есть таблица 1003 рх
Правая и левая колонки по 150 рх.
в средней колонке вставлен див в который я хочу вставить еще 1 вложенную таблицу, но когда вставляю таблицу моя основная расплывается.
Примерно как на сайте http://elparfum.kiev.ua/page3/brand32/ (см. описание товара). Спасибо за консультацию.</span>
				</td>
				</tr>
				<tr>
				<td><span class="style6">у меня есть таблица 1003 рх
Правая и левая колонки по 150 рх.
в средней колонке вставлен див в который я хочу вставить еще 1 вложенную таблицу, но когда вставляю таблицу моя основная расплывается.
Примерно как на сайте http://elparfum.kiev.ua/page3/brand32/ (см. описание товара). Спасибо за консультацию.</span>
				</td>
				<td><span class="style6">у меня есть таблица 1003 рх
Правая и левая колонки по 150 рх.
в средней колонке вставлен див в который я хочу вставить еще 1 вложенную таблицу, но когда вставляю таблицу моя основная расплывается.
Примерно как на сайте http://elparfum.kiev.ua/page3/brand32/ (см. описание товара). Спасибо за консультацию.</span>
				</td>
				</tr>
			</table>
		</div>
		</td>
		<td style="width: 150px" class="style1"> </td>
	</tr>
</table>

</body>

</html>

Об авторе:
Куплю винчестер. Жесткие диски не предлагать.

Неизвестный

27.09.2009, 16:37

общий

Спасибо. Вот мой код

html>
<head>

<title>Новый шаблон</title>
<style>
table{
width: 1003px; /* Ширина таблицы */
border: 10px; /* Рамка вокруг таблицы */
background: #FBFFFF; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
height: 100%;
}
body{
margin: 0 auto; /* Выравниваем таблицу по центру окна */
background: #000078;
}

.header
{
height: 224px; /* Высота шапки */
background: url(\sayt\image\fon\header2.png) no-repeat;
}
.menu{ /*меню*/
text-align: left;
background: #005AD7;
height: 20px;
font-family: Georgia, sans-serif ;
font-weight: bold;
}

.menu a{
color: #bfeafe;
text-decoration: none;

}

.content
{
vertical-align: top; /*проверить вертикальное выравнивание в сss*/
text-align: center; /* Выравниваем текст */

}

}
.info
{
text-align: left; /* описание духов (текст) */
}

.footer {/* подвал */
height: 50px;
valign: top;
}

p
{
text-align: center; /* Выравниваем текст */
}
.text
{
text-align: top;
}

.leftcol{
vertical-align: top;
background: url(\sayt\image\fon\left.png);
width: 150px;

}
.rightcol{
vertical-align: top;
background: url(\sayt\image\fon\left.png);
width: 150px;
}

</style>
</head>
<body>

<table border ="1" align ="center">
<tr>
<td colspan ="3" class ="header">
/td>
</tr>
<tr>
<td colspan ="3" class ="menu">

<a href ="#">Главная</a>
<a href ="#">Каталог</a>
<a href ="\sayt\menu\нow_ to_order.html"> Как заказать</a>
<a href ="\sayt\menu\delivery.html"> Оплата и доставка</a>
<a href ="\sayt\menu\contacts.html"> Контакты</a>

</td>
</tr>

<tr>
<td class ="leftcol">
<form <form name="serch" method="get" action="#">Поиск
<input type="text" name="name" size="20"><form>

</td>

<td class ="content" width =58% valign="top">

<h1>Агент провокатор</h1>

<div class ="info">
<p>AGENT PROVOCATEUR Eau emotionelle</p>
<img src ="\\avtostrada.uti-ua.com\Resource\Personal\toyunda\Мои документы\sayt\image\a\agent provocateur \agent_provocateur_eau_emotionnelle.jpg" align ="left">
<b>Аромат:</b> цветочно-восточный

<b>Начальная нота:</b> индийский шафран, русский кориандр

<b>Нота "сердца":</b> марокканская роза, египетский жасмин, французская магнолия, иланг-иланг, белая гардения

<b>Конечная нота:</b> вирджинийский кедр, гавайский ветивер, амбра, мускус

</div>

<div class ="info">
<p>AGENT PROVOCATEUR Eau emotionelle</p>
<img src ="\\avtostrada.uti-ua.com\Resource\Personal\toyunda\Мои документы\sayt\image\a\agent provocateur \agent_provocateur_eau_emotionnelle.jpg" align ="left">
<b>Аромат:</b> цветочно-восточный

<b>Начальная нота:</b> индийский шафран, русский кориандр

<b>Нота "сердца":</b> марокканская роза, египетский жасмин, французская магнолия, иланг-иланг, белая гардения

<b>Конечная нота:</b> вирджинийский кедр, гавайский ветивер, амбра, мускус

</div>
</td>

</td>

<td class ="rightcol">
Статьи

</td>
</tr>
<tr>
<td colspan ="3" class="footer">
ПОДВАЛ

</td>
</tr>

</table>
</body>
</html>

давно

FOXhunter

Профессионал
222505
728

27.09.2009, 17:40

общий

Лилиана Ноевна:
У вас много ошибок в синтаксисе кода. Скажите, Вы пользуетесь какой-нибудь программой для создания html-страниц?

Об авторе:
Куплю винчестер. Жесткие диски не предлагать.

Неизвестный

27.09.2009, 18:36

общий

Да, Notepad.
Наличие ошибок не отрицаю, я только начинаю изучать, с благодарностью приму все Ваши поправки.

давно

FOXhunter

Профессионал
222505
728

27.09.2009, 23:40

общий

Ну с блокнота все начинали

Но я бы Вам посоветовал установить Microsoft Office SharePoint Designer 2007 - тем более что он бесплатен и скачать его можно с сайта Microsoft.

Цитата: Сайт Майкрософт

Краткое описание.
ПРИЛОЖЕНИЕ SHAREPOINT DESIGNER 2007 ТЕПЕРЬ ПРЕДОСТАВЛЯЕТСЯ БЕСПЛАТНО! Дополнительные сведения и планы дальнейшего развития см. в видеофайле.

С помощью этого редактора веб-страниц, Вы сможете с легкостью создавать страницы, как в режиме конструктора, так и врежиме работы с кодом. Скачать Microsoft Office SharePoint Designer 2007 можно тут URL >>
И если Вы только начинаете, то хотел бы порекомендовать вот такие ресурсы:
http://www.postroika.ru/
http://css.manual.ru/
Удачи!

Об авторе:
Куплю винчестер. Жесткие диски не предлагать.

давно

FOXhunter

Профессионал
222505
728

30.09.2009, 14:08

общий

это ответ

Здравствуйте, Лилиана Ноевна.
Как я сообщал в мини-форуме, у Вас много ошибок в коде. Но самая главная закралась в описании стилей, а конкретнее вот тут:

Код:

table{
width: 1003px; /* Ширина таблицы */
border: 10px; /* Рамка вокруг таблицы */
background: #FBFFFF; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
height: 100%;
}

Вы описали тег <table> а не стиль .table, в результате ко всем тегам <table> будут применяться одинаковые свойства. Вам нужно поставить "." (точку) перед table
Тогда эта часть кода будет выглядеть так:

Код:

.table{
width: 1003px; /* Ширина таблицы */
border: 10px; /* Рамка вокруг таблицы */
background: #FBFFFF; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
height: 100%;
}

И Вам надо назначить Вашей табличке класс .table :

Код:

<table border ="1" align ="center" class="table">

И тогда, вставленная в среднюю ячейку, в тег <div>, таблица не будет растягивать основную таблицу.
Вот Ваш код поправленный и отредактированный с вставленной таблицей. И ничего не "расплывается":

Код:

<html>
<head>

<title>Новый шаблон</title>
<style type="text/css">
.table{
width: 1003px; /* Ширина таблицы */
border: 10px; /* Рамка вокруг таблицы */
background: #FBFFFF; /* Цвет фона */
border: 1px solid #333; /* Параметры рамки */
height: 100%;
}
body{
margin: 0 auto; /* Выравниваем таблицу по центру окна */
background: #000078;
}


.header
{
height: 224px; /* Высота шапки */
background: url(\sayt\image\fon\header2.png) no-repeat;
}
.menu{ /*меню*/
text-align: left;
background: #005AD7;
height: 20px;
font-family: Georgia, sans-serif ;
font-weight: bold;
}

.menu a{
color: #bfeafe;
text-decoration: none;

}

.content
{
vertical-align: top; /*проверить вертикальное выравнивание в сss*/
text-align: center; /* Выравниваем текст */

}


}
.info
{
text-align: left; width:99% /* описание духов (текст) */
}

.footer {/* подвал */
height: 50px;
valign: top;
}

p
{
text-align: center; /* Выравниваем текст */
}
.text
{
text-align: top;
}


.leftcol{
vertical-align: top;
background: url(\sayt\image\fon\left.png);
width: 150px;


}
.rightcol{
vertical-align: top;
background: url(\sayt\image\fon\left.png);
width: 150px;
}

</style>
</head>
<body>

<table border ="1" align ="center" class="table">
<tr>
<td colspan ="3" class ="header">
</td>
</tr>
<tr>
<td colspan ="3" class ="menu">

<a href ="#">Главная</a>
<a href ="#">Каталог</a>
<a href ="\sayt\menu\нow_ to_order.html"> Как заказать</a>
<a href ="\sayt\menu\delivery.html"> Оплата и доставка</a>
<a href ="\sayt\menu\contacts.html"> Контакты</a>

</td>
</tr>

<tr>
<td class ="leftcol" width="150px">
<form name="serch" method="get" action="#">Поиск 
 <input type="text" name="name" size="20"></form>

</td>

<td class ="content" width =58% valign="top">

<h1>Агент провокатор</h1>

<div class ="info">
<p>AGENT PROVOCATEUR Eau emotionelle</p>
<img alt="" src ="file://avtostrada.uti-ua.com/Resource/Personal/toyunda/Мои%20документы/sayt/image/a/agent%20provocateur%20/agent_provocateur_eau_emotionnelle.jpg" align ="left">
<b>Аромат:</b> цветочно-восточный

<b>Начальная нота:</b> индийский шафран, русский кориандр

<b>Нота "сердца":</b> марокканская роза, египетский жасмин, французская магнолия, иланг-иланг, белая гардения 

<b>Конечная нота:</b> вирджинийский кедр, гавайский ветивер, амбра, мускус 



</div>

<div class ="info">
<p>AGENT PROVOCATEUR Eau emotionelle</p>
<img alt="" src ="file://avtostrada.uti-ua.com/Resource/Personal/toyunda/Мои%20документы/sayt/image/a/agent%20provocateur%20/agent_provocateur_eau_emotionnelle.jpg" align ="left">
<b>Аромат:</b> цветочно-восточный

<b>Начальная нота:</b> индийский шафран, русский кориандр

<b>Нота "сердца":</b> марокканская роза, египетский жасмин, французская магнолия, иланг-иланг, белая гардения 

<b>Конечная нота:</b> вирджинийский кедр, гавайский ветивер, амбра, мускус 


<table cellspacing="0" class="style1" cellpadding="2">
<tr>
<td style="border: 1px solid #000000;"><span>какой-то текст</span></td>
<td style="border: 1px solid #000000;"><span>какой-то текст</span></td>
<td style="border: 1px solid #000000;"><span>какой-то текст</span></td>
</tr>
<tr>
<td style="border: 1px solid #000000;"><span>какой-то текст</span></td>
<td style="border: 1px solid #000000;"><span>какой-то текст</span></td>
<td style="border: 1px solid #000000;"><span>какой-то текст</span></td>
</tr>

</table>
</div>
</td>
<td class ="rightcol" width="150px">
Статьи

</td>
</tr>
<tr>
<td colspan ="3" class="footer">
ПОДВАЛ

</td>
</tr>

</table>
</body>
</html>

Удачи!

Об авторе:
Куплю винчестер. Жесткие диски не предлагать.

Форма ответа

Отправка постов/ответов доступна только зарегистрированным и подтвержденным пользователям.

Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.