Помогите Пожалуйста С Версткой. Не Могу Найти Решение Проблемы.

dopgroup · September 13, 2010

Всем доброго времени суток.

У меня проблемма следующего рода

Необходимо сверстать страницу таким образом, чтобы она состояла из сладующих полей:

левый блок - меню

правый блок - контент. контент обрамлен белой полосой, которая удлиняется в зивсимости от высоты блока контента. Проблема в том, что полоса в верхней и нижней части затухающая.

Что я делаю

вариант 1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head></head>

<body bgcolor="#000000">
<table width="100%" height="1" border="1" cellspacing="0" cellpadding="0"  >
    <tr align="center" height="100%">
        <td width="430" rowspan="3" align="right" valign="top">
            Располагается левое меню
        </td>
        <td width="20" height="255" style="background: url('img/top_line.png') no-repeat top center;"/>
        <td align="center" height="800" rowspan="3" valign="top">
            Располагаеся контент сайта
        </td>
        <td width="20" height="255" style="background: url('img/top_line.png') no-repeat top center;"/>
    </tr>
    <tr>
        <td width="20" style="background: url('img/center_line.png') repeat-y top center;"/>
        <td width="20"  style="background: url('img/center_line.png') repeat-y top center;"/>
    </tr>
    <tr>
        <td width="20" height="255" style="background: url('img/bottom_line.png') no-repeat bottom center;"/>
        <td width="20" height="255" style="background: url('img/bottom_line.png') no-repeat bottom center;"/>
    </tr>
</table>    
</body>
</html>

вариант 2.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head></head>

<body bgcolor="#000000">
<table width="100%" height="1" border="1" cellspacing="0" cellpadding="0"  >
	<tr align="center" height="100%">
		<td width="430" align="right" valign="top">
			Располагается левое меню
		</td>

		<td align="center" height="800" valign="top">
			<div style="position: absolute; float: left; left: 450px; min-width: 20px; min-height: 100%;">
			<div style="position: relative; min-width: 20px; top: 0px; min-height: 255px;  background: url('/img/top_line.png') no-repeat top center;"></div>
			<div style="position: relative; min-width: 20px; min-height: 100%;  background: url('/img/center_line.png') repeat-y top center;"></div>
			<div style="position: relative; min-width: 20px; bottom: 100%; min-height: 255px;  background: url('/img/bottom_line.png') no-repeat bottom center;"></div> 
			</div>
			<div class="napoln" style="margin: 0 auto;">
				Располагается код расположения контента
			</div>
			<div style="position: absolute; float: right; right: 20px; min-width: 20px; min-height: 100%;">
				<div style="position: relative; min-width: 20px; top: 0px; min-height: 255px;  background: url('/img/top_line.png') no-repeat top center;"></div>
				<div style="position: relative; min-width: 20px; min-height: 100%;  background: url('/img/center_line.png') repeat-y top center;"></div>
				<div style="position: relative; min-width: 20px; bottom: 100%; min-height: 255px;  background: url('/img/bottom_line.png') no-repeat bottom center;"></div> 
			</div>
		</td>

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

В обоих случаях полоски обрамляющие контент не заполняются по центры. если top_line и botton_line не нужно повторять, то center_line не хочет повторяться ни в одном браузере, и работает только в мозиле с включенными границами.

Как сделать так чтобы все браузеры отображали корректно две полных линии по бокам от контента???

Может у меня где ошибка или есть какой другой вариант???

С праздником Программиста

psywalker · September 13, 2010

1) Покажи рисунок того, что должно получиться

2) Дай ссылку на то, что уже есть

npofopr · September 13, 2010

прикрепите картинку лучше, того что хотите

опоздал (

Edited September 13, 2010 by npofopr

dopgroup · September 13, 2010

смотрите страницу www.hostcms.dopgroup.ru

на главной странице таблица с границами, в разделе "статьи без границ"

1) Покажи рисунок того, что должно получиться
2) Дай ссылку на то, что уже есть

смотрите сайт http://hostcms.dopgroup.ru/

главная страница с таблицами, раздел "статьи без таблиц"

Searcher · September 13, 2010

Во-первых, доктайп не совпадает с кодом. Все визуальные свойства перенесите в css. Во-вторых, если вы укажете высоты ячеек через стили, то все должно заработать.

dopgroup · September 13, 2010

Во-первых, доктайп не совпадает с кодом.

а можно мне как ламеру пояснить фразу?

Да я делал все в виде классов css, просто на форум вынес в виде стилей, чтобы можно было по коду картинку всю сразу видеть.

Проблема в том, что на паре форумов наткнулся на утверждения, будто бы опера плевать ходила на параметр height в процентах.

Мне странно, почему такой стандартный тег как table до сих пор не могут правильно отображать все браузеры, но это ладно....

Так реально решить мою задачку???? Я не понимаю разницы представления в стилях и классах (наверное потому что не увидел ее, решая эту задачу и далеко немногие други) и в стили не запихнуть cellspacing cellpadding rowspan

dopgroup · September 14, 2010

Ну как? Есть какие варианты разобраться с этим?

swetlana · September 14, 2010

Для начала совершенно неясно при чём тут какие-то таблицы.

На странице нет ни капли табличных данных.

А сами эти полосы не сделать без лишних несемантических элементов. То есть, они неизбежно привносят мусор в страницу. Стоит ли оно того?

dopgroup · September 14, 2010

Для начала совершенно неясно при чём тут какие-то таблицы.
На странице нет ни капли табличных данных.
А сами эти полосы не сделать без лишних несемантических элементов. То есть, они неизбежно привносят мусор в страницу. Стоит ли оно того?

Простите, Светлана. Таблицы, лишь один из способов верстки страницы. Можно все на div сделать, но проблема динамического изменения ширины линии не исчезает ни в каком варианте. Я привел два вида кода.

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

Searcher · September 14, 2010

Интересно, как не понимая значения доктайпа вы беретесь за заказы?! Это ж основа! С Таким доктайпом непредсказуема реакция броузеров на атрибуты в тэгах. Вот реакция валидатора на ваши атрибуты width и height. И, конечно, броузер имеет полное право игнорировать эти атрибуты.

Важно все атрибуты перенести в стили или классы. Но, естественно, более гибко - в классы. Вам же проще потом будет вносить изменения.И cellspacing, cellpadding тоже без проблем описывается при помощи css.

dopgroup · September 14, 2010

Интересно, как не понимая значения доктайпа вы беретесь за заказы?! Это ж основа! С Таким доктайпом непредсказуема реакция броузеров на атрибуты в тэгах. Вот реакция валидатора на ваши атрибуты width и height. И, конечно, броузер имеет полное право игнорировать эти атрибуты.
Важно все атрибуты перенести в стили или классы. Но, естественно, более гибко - в классы. Вам же проще потом будет вносить изменения.И cellspacing, cellpadding тоже без проблем описывается при помощи css.

Благодарен, что застремали

Прочитал про доктайп

Таже переписал все в стили, для нагладности моей проблемы.

На самом деле с переливанием из пустого в более пустое ничего не вышло.

результат на странице

http://hostcms.dopgroup.ru/shop/

css код полученных стилей:

table {
	padding:0;
	margin:0;
	border-collapse:collapse;
}

td, th, tr {
	padding:0;
	margin:0;
	border-width: 1px;
	border-color: #fff;
	border-style: solid;
}

.main_table {
	width: 100%;
	height: 100%;
	border-width: 1px;
	border-color: #fff;
	border-style: solid;
}

.main_tr {
	text-align: center;
}

.menu {
	width: 430px;
	text-align: left;
	vertical-align: top;
}

.cont {
	height: 800; 
	vertical-align: top;
}

.topline {
	width: 20px;
	height: 255px;
	background: url('/images/templ/top_line.png') no-repeat top center;
}

.centerline {
	min-width: 20px;
	background: url('/images/templ/center_line.png') repeat-y top center;
}

.bottomline {
	width: 20px;
	height: 255px;
	background: url('/images/templ/bottom_line.png') no-repeat bottom center;
}

.stroka {
	height: 255px;
	width: 100%;
}

Проблема прежняя. Как растянуть сентральную линию, да и ще во всех браузерах???

Searcher · September 14, 2010

Пустые ячейки схлопываются. Самое простое: поместите в centerline хотябы пустой пробел

dopgroup · September 14, 2010

Пустые ячейки схлопываются. Самое простое: поместите в centerline хотябы пустой пробел

Не помогло .

Хотя чем больше строк с пробелами, тем длинее полоски

Searcher · September 14, 2010

странно... ох уж эти таблицы, сейчас покопаемся еще.

dopgroup · September 15, 2010

я так понял, единственное решение моей проблемы - отказаться от этих полосок. да?

Searcher · September 16, 2010

Уберите ка рамки с таблицы, что по ссылке. Поскольку, если я их просто firebug'ом убираю, то у меня все нормально растягивается...

Great Rash · September 16, 2010

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

psywalker · September 16, 2010

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

Да кстати, ахренеть можно, даже таблицы не научили правильно отображаться ослы)

dopgroup · September 16, 2010

Уберите ка рамки с таблицы, что по ссылке. Поскольку, если я их просто firebug'ом убираю, то у меня все нормально растягивается...

Здравствуйте, рамки убрал.

в мозилле он все хорошо растягивает, это проблемма только оперы и ие.

http://hostcms.dopgroup.ru/ - это случас с таблицами описанными без всяких правил

http://hostcms.dopgroup.ru/shop/ - все ворматироване спрятал в классы

http://hostcms.dopgroup.ru/articles/ - пробовал отказаться от таблиц и сделал все на div

.cont_block  {
	display: table;
	border-collapse: collapse;
	border-width: 1px;
	border-color: #fff;
	border-style: solid;
	height: 100%;
}

.lmenu  {
	display: table-cell;
	width: 430px;
	text-align: left;
	vertical-align: top;
}

.wline  {
	display: table-cell;
	width: 20px;
	height: 100%;
		top: 0 px;
		vertical-align: top;
}

.wtop  {
	display:table-row;
	min-width: 20px;
	width: 20px;
	min-height: 255px;
	height: 255px;
	background: url('/images/templ/top_line.png') no-repeat top center;
		vertical-align: top;
}

.wcenter  {
	display:table-row;
	min-width: 20px;
	width: 20px;
		min-height: 100px;
		height: 100px;
	background: url('/images/templ/center_line.png') repeat-y top center;
		vertical-align: top;
}

.wbottom  {
	display:table-row;
	min-width: 20%;
	width: 20px;
	min-height: 255px;
	height: 255px;
	background: url('/images/templ/bottom_line.png') no-repeat bottom center;
		vertical-align: bottom;
}

.scont  {
	display: table-cell;
vertical-align: top;
}

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

Во в тором случае все на div , практически все.

А в третьем случае полностью отказался от таблиц и перевел на div

в разделе полезные статьи.

На самом деле перепробовал уже все......

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

Во в тором случае все на div , практически все.

А в третьем случае полностью отказался от таблиц и перевел на div

в разделе полезные статьи.

На самом деле перепробовал уже все......

Great Rash · September 16, 2010

Вы не правильно перевели все на дивы. Если вы хотите растягивать эти ваши линии, то нужно помещать текст прябо в блок wline. Т.е. структура должна быть примерно следующая (warning - дофига дивов):

<div class="main-container">
	<div class="vline-left-top">
		<div class="vline-right-top">
			<div class="vline-left-middle">
				<div class="vline-right-middle">
					тут контент
				</div>
			</div>
	   </div>
	</div>
   <div class="vline-left-bottom">
		<div class="vline-right-bottom"></div>
	</div>
</div>

Ну вот как-то так...

main-container - общий контейнер для всех блоков

vline-left-top - верхний левый кусок

vline-right-top - верхний правый кусок

vline-left-center - средний левый

vline-right-center - средний правый

vline-left-bottom - левый нижний

vline-right-bottom - правый нижний

dopgroup · September 16, 2010

Вы не правильно перевели все на дивы. Если вы хотите растягивать эти ваши линии, то нужно помещать текст прябо в блок wline. Т.е. структура должна быть примерно следующая (warning - дофига дивов):
<div class="main-container">
	<div class="vline-left-top">
		<div class="vline-right-top">
			<div class="vline-left-middle">
				<div class="vline-right-middle">
					тут контент
				</div>
			</div>
	   </div>
	</div>
   <div class="vline-left-bottom">
		<div class="vline-right-bottom"></div>
	</div>
</div>
Ну вот как-то так...
main-container - общий контейнер для всех блоков
vline-left-top - верхний левый кусок
vline-right-top - верхний правый кусок
vline-left-center - средний левый
vline-right-center - средний правый
vline-left-bottom - левый нижний
vline-right-bottom - правый нижний

Интересное ешение, но косяк в том, что при таком решнии сверху и сеизу будет пустое пространство в 255px, высота верхней и нижней сачтей белой линии

Great Rash · September 16, 2010

Может стоит эти линии сделать поменьше чем 255px?

otell · September 22, 2010

делаешь 3 дива вложенных друг в друга

содержимое

</div></div></div>

для class="1" прописываешь следующее

background-image: url (верхний конец полоски);

background-repeat:repeat-x;

background-position:top left;

background-color:# берешь цвет из нижней части верхней части полоски;

для class="2" прописываешь следующее

background-image: url (нижний конец полоски);

background-repeat:repeat-x;

background-position:bottom left;

для class="3"

margin:1px; < тут ты задаешь видимую толщину полоски

background-color:# ; < какой тебе надо

в итоге у тя будет видна обводка с плавающим, в зависимости от высоты блока, нижним концом

Edited September 22, 2010 by otell

Searcher · September 22, 2010

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

Sign In

Помогите Пожалуйста С Версткой. Не Могу Найти Решение Проблемы.

Question

Link to comment

Share on other sites

23 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information