проблемы с расположением контента

kosst2006 · October 11, 2008

Здравствуйте уважаемые!

Есть дизайн с табличной версткой, в ячейке таблицы я расположил div для основного контента и картинки, высоту указал в %, но при этом сделать так чтобы при отсутсвии контента в этом div-е высота его оставалась неизменной, а при заполнении контентом сверх указаной высоты в % появлялся только вертикальный скроллинг ... вот воюю уже какой день и немогу найти решения...так как высота в % отображается по разному для IE и FF (именно под эти браузеры делается дизайн)...я начинающий, поэтому тут наверное много недочетов и кстати на валидность кода пофиг

Kод HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="Description" content="">
		<meta name="Keywords" content="">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="style_table.css"><title>Название сайта</title>
		<script language="JavaScript" type="text/javascript">
		<!--
			function popup(href)
				{
				window.open(href,"","status=no,toolbar=no,menubar=no");
				return true;
				}
		-->
		</script>
	</head>

	<body>
			<table cellpadding="0" cellspacing="0" class="table_main">
			   <tr><td class="logo" colspan="3" align="center" valign="center"> <br><a href="#">					<img class="logo_img" galeryimg="no" src=""></a>
			   <br><br></td></tr>
			   <tr>
			   <td  class="side_menu"> </td>
			   <td class="menu">
			      <a href="#">О фирме</a>		      <font>Bla bla bla</font>      
			   <a href="#">Контакты</a>   
			   </td>
			   <td class="side_menu"> </td>
			   </tr>


			   <tr class="bar"><td colspan="3" background="img/bar.png"></td></tr>
			   <tr  class="fon">

					<td rowspan="3" class="side_main"> </td>

					<td align="center" class="submenu" valign="center">    <a href="#">Фотогалерея</a>      <a href="#">Модельный ряд</a>      <a href="#">Технические характеристики</a>      <a href="#">Проекты</a>   </td>
					<td rowspan="3" class="side_main"> </td>
				</tr>
			   <tr class="main"><td>

				<div  class="main_div">
				   <a href="#" onClick="popup(this.href); return false;">
						<img class="img_main" src="" galleryimg="false"></a>

					 <br />
					  <br />
					 <small>Съеш еще этих мягких булочек Съеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочекСъеш еще этих мягких булочек</small>
							  <br />
			</div>
			 </td></tr>

			   <tr class="submenu">
			   <td> <small class="left">Страница 1 из 2</small>
			   <img class="low_img" hspace="3" galeryimg="no"  alt="1 страница" src=""><a href=""><img  class="low_img" hspace="3"  galeryimg="no" alt="2 страница" src=""></a>


			   </td></tr>

			   <tr class="bar"><td colspan="3" background="img/bar.png"> </td></tr>
			   <tr>
			   		<td class="side_main"></td>
					<td class="menu" background="img/title.gif">
					<div class="left_flags"><a href="#"><img src="" class="flag_img" hspace="10"></a><a href="#"><img src="#" class="flag_img"  hspace="10"></a><img src="#" class="flag_img" hspace="10"></div>

					<a  class="mail" href="mailto:anod2004@inbox.ru">anod2004@inbox.ru</a>


					</td>
					<td class="side_main"></td>
				</tr>
					<tr><td colspan="3" class="footer"> <br /> </td></tr>
			</table>

		</body>

</html>

Код CSS:

body {
	margin:0;
	padding:0;
	background-color:#2f1022;
}

.table_main {
	height:100%;
	width:100%;
}

.main {
	width: 100%;
	background-color:#dfd7b3;
}

.main_div {
	overflow-y:scroll;
	border-bottom:3px solid #6f5857;
	border-top:3px solid #bfaf6f;
	padding-bottom:10px;
	height:90%;
}

.logo_img {
	border:0;
}

.logo {
	margin:auto;
	height:10%;
}

.side_menu {
	width:12.5%;
	height:40px;
}

.menu {
	height:40px;
	background-repeat:repeat-y;
	background-position:center;
	text-align:center;
	width:75%;

}

.bar {
	height:15px;
	width:100%;
}

.submenu {
	height:30px;
	background-color:#dfd7b3;
}

.left {
	float:left;
}

.fon {
	background-color:#dfd7b3;
}

.side_main {
	width:12%;
}

a {
	color:#52383f;
	text-decoration:none;
	font-family: Arial;
	font-weight: bolder
}

a:hover {
	color:#7a022c

}

font {
	color:#7a022c;
	text-decoration:none;
	font-family: Arial;
	font-weight: bolder;
}

small {
	color:#52383f;
	font-size:79%;
	text-decoration:none;
	font-family: Arial;
	font-weight: bolder;
}

big {
	color:#52383f;
	font-size:110%;
	text-decoration:none;
	font-family: Arial;
	font-weight: normal;
}


.img_main {
	margin:25 0 25 25;
	border:0;
	width:340px;
	height:227px;
	float:right;
}

.low_img {
	border:0;
	float:right;
}

.top_img {
	float:right;
}

.flag_img {
	border:0;
}

.left_flags {
	float:left;
	margin:0;
}

.mail {
	margin-left:-15%;
}

.footer {
	height:10%;
}

td.menu {
	background: url(../img/title.gif) center top repeat-y;
	text-align: center;
	vertical-align: center;
}

Edited October 13, 2008 by kosst2006

Vlad · October 12, 2008

Как это на валидность кода пофиг?! доктайп для начала добавь в код.

kosst2006 · October 13, 2008

ну вот исправил сообщение сверху и поставил доктайп в хтмль, но все равно скроллинга(появляется тока сама полоса прокрутки но ползунка не видать) не появляется а div тока растягивается по содержимому

Edited October 13, 2008 by kosst2006

kosst2006 · October 15, 2008

удивительно что на таком вроде проффесиональном форуме никто не может ответить на простой вопрос, или эта проблема не решаема на данный момент??????

Edited October 15, 2008 by kosst2006

Searcher · October 15, 2008

Не торопись, дружище!

У Вас элементарная ошибка. Два правила:

1. Свойство height в процентах устанавливается относительно родительского объекта.

2. Если не установлена высота ячейки или строки таблицы, то она вычисляется по содержимому.

У Вас происходит следующее: строка класса main не имеет заданной высоты, следовательно сначала вычисляется высота содержимого, т.е. высота блока класса main_div. Указанная высота в классе main_div игнорируется, поскольку нет высоты у родительской ячейки. В результате высота блока формируется по содержимому и высота ячейки и строки вычисляется следом по полученной высоте блока.

Достаточно в классе main указать высоту, например, в 50% и все заработает.

А код для такого простого макета у Вас слишком запутанный.

Edited October 15, 2008 by Searcher

kosst2006 · October 16, 2008

странно, а Вы проверяли? у меня почему то не работает, то есть что ставлю что не ставлю height в main никак обоими браузерами не воспринимается, может что то почитать порекомендуете?может вабще переделать по нормальному надо?

потому что читал только справочники

Silverwind · October 17, 2008

Ну давайте попробуем порассуждать.

Итак, таблица у нас имеет 100% по высоте. 100% от чего? от страницы.

Далее класс main у нас тоже имеет 100%. Это уже от таблицы, которая 100% от страницы. То есть по сути, имеем теже 100% без изменений.

Следующим у нас идет div, который имеет 90% от строки таблицы, которая имеет 100% от таблицы, которая в свою очередь имеет 100% от страницы. В итоге имеем, что этот самый div у нас будет иметь 90% от страницы.

Что получаем в итоге: Вы всю страницу завязали на относительные размеры. Размер самой страницы у нас также плавающий, не имеющий заданного размера. Вернее размер страницы зависит от количества размещенного на ней материала. И броузеры просто не понимают, что Вы им хотите сказать. Относительное от относительного от относительного и т.д. В итоге каждый броузер будет по-своему истолковывать Ваш код: Эксплорер будет открывать страницу целиком, и прокрутка работать не будет. Файрфокс будет отображать прокрутку примерно так, как Вы задумывали, но за счет того, что % идет в %-те у Вас вся страница (при большом количестве текста) разъедется по высоте. Гугл Хром будет вообще Вашу строку свертывать в полоску, хотя прокрутка работать будет. Поставьте хоть где-то (хоть в таблице, хоть в строке таблицы) абсолютный размер и все у Вас получится. Без этого, имхо, никак.

Sign In

проблемы с расположением контента

Question

kosst2006

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

kosst2006

Link to comment

Share on other sites

kosst2006

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

kosst2006

Link to comment

Share on other sites

Silverwind

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information