Растянуть ячейку с контентом, не трогая соседние.

Aspart · April 6, 2009

чОрт, ошибся разделом, перенесите в HTML. Хотя здесь и по CSS вопрос, так что я не знаю даже.)

Нужно сделать так, чтобы основная ячейка с контентом растягивалась по вертикали, при этом не смещая/дублируя ячейки соседней строки.

И чтобы в Опере воспринималось расстояние между элементами меню.

Макет:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title><?php $kernel->show_title()?></title>
<meta name="description" content="<?php $kernel->show_description()?>">
<meta name="keywords" content="<?php $kernel->show_keywords()?>">

<meta http-equiv="Content-Language" content="ru">
<meta content="text/html; charset=<?php echo SITE_CODING?>" http-equiv=Content-Type>

<?php $kernel->show_CSS()?>

<script type="text/javascript" src="/templates/template1/hostcms.js"></script>
<script type="text/javascript" src="/hostcmsfiles/ajax/JsHttpRequest.js"></script>
<script type="text/javascript" src="/hostcmsfiles/ajax/ajax.js"></script>
<script type="text/javascript" src="/cssverticalmenu.js"></script>
<link rel="stylesheet" type="text/css" href="/cssverticalmenu.css" />

<script src="/hostcmsfiles/main.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/hostcmsfiles/style.css" />

<!-- Визуальный редактор -->
<script language="javascript" type="text/javascript" src="/admin/wysiwyg/tiny_mce_src.js"></script>
<script type="text/javascript" language="JavaScript">
tinyMCE.init(
{
	mode : "textareas",
	theme : "simple",
	editor_selector : "mceEditor",
	editor_deselector : "mceNoEditor",
	width: "400px",
	theme_simple_resizing : true
}
);
</script>

</head>

<body>
<table cellpadding="0" cellspacing="0" width="1024" align="center">
<tr>
<td width="28"></td>
<td width="15"></td>
<td width="170"></td>
<td width="140"></td>
<td width="180"></td>
<td width="183"></td>
<td width="164"></td>
<td width="127"></td>
<td width="15"></td>
</tr>
<tr>
<td colspan="9" height="14" width="1024" background="/images/bg/1_1-9.gif">
</td>
</tr>

<tr>
<td colspan="3" width="214" background="/images/bg/2_1-3.gif">
</td>

<td colspan="5" width="794">
<img src="/images/bg/2_4-8.gif">
</td>

<td width="16" background="/images/bg/2_9.gif">
</td>
</tr>

<tr>
<td rowspan="3" width="29" background="/images/bg/3-8_1.gif" class="norepeat">
</td>

<td rowspan="3" width="15" background="/images/bg/3-8_2.gif" class="norepeat">
</td>

<td width="170" background="/images/bg/3_3.gif">
</td>

<td colspan="5" height="49" width="764" background="/images/bg/3_4-8.gif">
</td>

<td rowspan="3" width="16" background="/images/bg/3-8_9.gif" class="norepeat">
</td>
</tr>

<tr>
<td  height="15" width="170" background="/images/bg/4_3.gif">
</td>

<td colspan="5" height="15" width="764" background="/images/bg/4_4-8.gif">
</td>
</tr>

<tr>
<td width="170"  height="288" background="/images/bg/5_3.gif" class="norepeat">
<div class="menu_left">
<ul id="verticalmenu" class="glossymenu">
<li><a href="">О нас</a>
	<ul>
	<li><a href="/about/us">О компании</a></li>
	<li><a href="/about/objects">Объекты</a></li>
   </ul>
</li>
<li><a href="">Продукция</a>
	<ul>
	<li><a href="/products/trplit/">Тротуарная плитка</a></li>
	<li><a href="#">Трубопровод</a></li>
	<li><a href="#">Комплектующие</a></li>
	<li><a href="#">Ограждающие констр.</a></li>
	<li><a href="#">Очистные сооружения</a></li>
	<li><a href="#">Насосные установки</a></li>
	<li><a href="#">Водонагреватели</a></li>
	</ul>
</li>
<li><a href="/doc/">Документы</a></li>
<li><a href="/vacansy/ ">Вакансии</a></li>
<li><a href="/contacts/">Контакты</a></li>
</ul>
</div>
</td>
<td colspan="5" rowspan="2" background="/images/bg/bg.gif" class="content_main">
<?php 
$kernel->show_current_template();
?>
</td>
</tr>

<tr>
<td background="/images/bg/bg.gif"></td>
<td background="/images/bg/bg.gif"></td>
<td background="/images/bg/bg.gif"></td>
<td background="/images/bg/bg.gif"></td>
</tr>
<div class="hostcms_adress">
<a href="http://www.hostcms.ru" target="_blank">Система управления сайтом HostCMS</a>
</div>
</table>
</body>
</html>

CSS:

a:link
{
	color: #000000;
}

A:visited
{
	color: #000000;
}

html
{
	height: 100%;
}

body
{
	background-color: #d2d2d2;
	font-family: Arial;
	font-size: 10pt;
	padding: 20px 20px 0px 20px;
	line-height: 150%;
	height: 100%;

}

h1, .title
{
	color: #4f3327;
	font-weight: normal;
	font-family: Georgia;
	font-size: 20pt;
	line-height: 150%;
	margin: 0px 0px 10px 0px;
}

h2
{
	font-family: Georgia;
	font-weight: normal;
	font-size: 16pt;
	padding: 0px 0px 10px 0px;
	margin: 0px;
	line-height: 110%;
	color: #5D432A;
}


.footer
{
	position: relative;
	bottom: 0px;
}

.contacts_footer
{
	text-align: right;
	margin: 0px 60px 0px 0px;
	color: #ffffff;
	line-height: 10px;
}

.footer td
{
	padding: 5px 0px 5px 30px;
}

.copyright
{
	color: #000000;
	font-size: 3pt;
	vertical-align: bottom;
}

.hostcms_adress
{
	vertical-align: bottom;
	text-align: left;
	color: #ffffff;
	font-size: 5pt;
}

.content_main
{
	padiing: 25px;
	vertical-align: top;
}

.menu_left
{
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
}

.menu_left .a:line
{
	color: #000000;
}

.norepeat
{
background-repeat: no-repeat;
}

В I.E. растягивает верхние ячейки, из-за этого уползает меню и появляются "дырки" в фоне. В опере CSS меню (отступы между элементами) не воспринимается и меню косячится.

ЗЫ: Верстка совсем любительская, поэтому можно пинать ногами, но с советами "как надо". Буду рад.)

Edited April 7, 2009 by Aspart

Aspart · April 7, 2009

Проблему решил. Просто сделал столбцы и выравнивание по верхней границе.

Sign In

Растянуть ячейку с контентом, не трогая соседние.

Question

Aspart

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Aspart

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information