Не тянеться слой

Kos87 · October 21, 2007

Подскажите пожалуйста как сделать так чтоб слой тянулся. В моем случае это линия синего цвета слева от основного текста. Она должна автоматически разтягиваться от вержней синей линии до нижней синей линии. Всю голову себе проморочил и ниче так и не получилось...

Вот сайт: vermiculit.com.ua/test

maddogrts · October 22, 2007

Линия левого текста это не слой а

и

что делать ? В нем

и нарисовать эту линию, или новый добавить. Верстка плохая

Kos87 · October 24, 2007

Уважаемый, Вы очень плохо смотрели! То что вы написали - бред. Таблица уже в слое. Я незнаю как растянуть слой от одной синей горизонтальной линии до другой! Задавал этому слою heigh=100% , и в таблице , из трех ячеек я центральной задал тоже значение. Но оно всеравно не разтягивает эту линию.

maddogrts · October 24, 2007

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

Qwerty · October 24, 2007

Можно эту часть

————————————————————————

<div id="l-ugol-content">
<table border="0" cellpadding="0" cellspacing="0" height="100%">
<tbody><tr><td height="150" width="5"></td></tr>
<tr><td height="100%"></td></tr>
<tr><td height="50"></td></tr>
</tbody></table>
</div>

————————————————————————

заменить

<div id="l-ugol-content" style="height:....">
</div>

и в height указать высоту сколько нужно, но это не сделает его тянушимся(хотя он таковым и так не есть ))) ).

А вообще ужасно все прописано ))

Kos87 · October 24, 2007

Окей. Обьясните почему все ужасно прописано ???? вот стили на

которые лежат в отдельном файле :

#content{margin-right:230px; height:100%}
#l-ugol-content{float:left; margin-left:70px; width:5px; height:100%; background-color:#3767a9}
#r-ugol-content{float:right; width:5px; height:70px; background-color:#3767a9}
#info{margin-left:90px; margin-right:20px; text-align:justify; font-family:Arial, Helvetica, sans-serif; font-size:90%; background-image:url(pic/Logotip.gif); background-repeat:repeat-x}

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

тянулся и занимал весь

maddogrts · October 24, 2007

Это не то что нужно

#content{margin-right:230px; height:100%}
#l-ugol-content{float:left; margin-left:70px; width:5px; height:100%; background-color:#3767a9}
#r-ugol-content{float:right; width:5px; height:70px; background-color:#3767a9}
#info{margin-left:90px; margin-right:20px; text-align:justify; font-family:Arial, Helvetica, sans-serif; font-size:90%; background-image:url(pic/Logotip.gif); background-repeat:repeat-x}

"Окей. Обьясните почему все ужасно прописано ???? вот стили на

которые лежат в отдельном файле :"

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

Есть такая работа как отладка и поиск ошибок, ты что нибдуь слышал об этом?

1. Включи стили в HTML фаил.

2. С помощью коментариев выяви тот участок за который отвечает это твоя синия линия.

3. Вырежь коментарии оставь рабочий минимальный код со своей линией и выложи сюда.

И через 10минут тебе ответят с решением, если сам не найдшеь ошибку

Qwerty · October 24, 2007

Все ужасно, потому что я нелюблю верстку таблицами, и мне кажется меня поддержат многие ))

А насчет тянущегося контента то можно сделать на таблицах так

————————————————————————

Header

——— // тянушися контент, который будеи изменятся в зависемости от обьема контента

Footer

————————————————————————

но лучше делать это на дивах )))

вот так

———————————————————————--

Header

——-

// тянушися контент, который будеи изменятся в зависемости от обьема контента

Footer

maddogrts · October 24, 2007

<!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="en" lang="en">

<head>
	<title></title>
	<style type="text/css" media="screen">
		body, html {
		margin: 0;
		padding: 0;
		border: 0;
		}
		body {
		background: #999;
		font-family: Verdana;
		}
		#container {
		width: 700px;
		background: #f7f7f7;
		border-top: 5px solid blue;
		border-bottom: 5px solid blue;
		}
		p {
		margin: 0;
		padding: 0;
		border: 0;
		}
		#content {
		border-left: 5px solid blue;
		border-right: 5px solid blue;
		margin-left: 200px;
		}

	</style>
</head>

<body>
<div id="container">
	<div id="content">
<p >Home Во-первых, для плавающих блоков должна быть задана ширина, неважно явным или косвенным образом, иначе он заполнит родительский блок, как и обычные не плавающие блоки, не оставив места для обтекания остальным контентом. Во-вторых, в отличие от элементов в основном потоке, вертикальные границы плавающих блоков не объединяются с границами прилежащих блоков. И последнее, плавающий блок может перекрывать элементы уровня блока, смежные с ним в нормальном потоке.</p>
			<p >News Когда мы устанавливаем для элемента float, он смещаются к правой или левой границе родительского блока, если установить float в том же направлении, для еще одного элемента он будет смещаться к границе предыдущего плавающего элемента, когда элементам перестанет хватать ширины контейнера, они будут перемещаться вниз.</p> 
			<p >Products Плавающий элемент никогда не поднимается выше строки, в которой создан, его верхняя граница выравнивается с верхней границей этой строки (или с нижней границей предыдущего блочного элемента, если нет соответствующей строки).</p>
			<p >About Плавающий блок позиционируется по вертикали так же, как если бы он был в нормальном потоке, его верхняя граница, выравнивается с верхней границей текущей строки, по горизонтали он смещается к правой или левой границе контейнера настолько, насколько это позволяют отступы контейнера. Остальной контент обтекает его с противоположной стороны.</p> 
			<p >Contact Поскольку плавающие блоки находятся вне основного потока, непозиционируемые элементы возле него располагаются, как будто его нет, но строки в них становятся короче, чтобы освободить место для плавающего блока.</p>
	</div>
</div>

</body>
</html>

У меня почему то все окей, раз так значит ты когда верстал сделал так плохо увы , я бы переделал

Dimitry Wolotko · October 24, 2007

Qwerty, код стоит прятать в теги code

Kos87 · October 24, 2007

Я щас буду рыдать (образно). Я понимаю что оно будет разтягиваться в меру заполнения. Это элемент декора, полоска , вертикальная, почему с трех частей?, верхняя и нижняя части будут стабильны и синего цвета , а центральная прозрачная и тянущаяся ...

maddogrts · October 24, 2007

Я тебе обяснил, что то что у тебя нарисованно на сайте это не дивы а

и

вот и вся твоя полоса, сделай ее подругому и все получиться. С чего они тянуться будут ? мне вот интересно

Kos87 · October 24, 2007

Я тебе обяснил, что то что у тебя нарисованно на сайте это не дивы а и
вот и вся твоя полоса, сделай ее подругому и все получиться. С чего они тянуться будут ? мне вот интересно
Это таблица, небольшая :
<table border="0" cellpadding="0" cellspacing="0" height="100%">
<tr><td width="5px" height="150px"></td></tr>
<tr><td height="100%"></td></tr>
<tr><td height="50px"></td></tr>
</table>
Но , она находиться в :
<div id="l-ugol-content">
<table border="0" cellpadding="0" cellspacing="0" height="100%">
<tr><td width="5px" height="150px"></td></tr>
<tr><td height="100%"></td></tr>
<tr><td height="50px"></td></tr>
</table>
</div>
И по идее
должен тянуться в зависимости от его наполнения, поетому я и вставил в него таблицу. вот его стиль :
#l-ugol-content{float:left; margin-left:70px; width:5px; height:100%; background-color:#3767a9}
:|

Kos87 · October 26, 2007

плиз, ай нид хелп ...

klierik · October 26, 2007

выложи полностью свой текущий HTML&CSS код

Kos87 · October 26, 2007

HTML :

<!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-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="verm-style.css">
<script type="text/javascript" src="stmenu.js"></script>
<title>УкрВермикулит - огнезащита и термоизоляция.</title>
</head>
<body>
<div id="head"></div>
<div id="l-ugol"></div>
<div id="dop-menu">
 <table border="0" align="left" height="20px" id="dop-menu1">
 <tr>
 <td width="175"> </td>
 <td><a href="">  строительство  </a></td>
 <td valign="middle"><img src="diz/dot.gif" width="2px" height="12px" /></td>
 <td><a href="">  сельское хозяйство  </a></td>
 <td valign="middle"><img src="diz/dot.gif" width="2px" height="12px" /></td>
 <td><a href="">  цветоводство  </a></td>
 <td valign="middle"><img src="diz/dot.gif" width="2px" height="12px" /></td>
 <td><a href="">  металлургия  </a></td>
 <td valign="middle"><img src="diz/dot.gif" width="2px" height="12px" /></td>
 <td><a href="">  хим. промышленность  </a></td>
 <td valign="middle"><img src="diz/dot.gif" width="2px" height="12px" /></td>
 <td><a href="">  экология  </a></td>
 </tr>
 </table>
</div>
<div id="r-ugol"></div>
<br class="clearfloat" />
<div id="line"></div>

<div id="side-bar"><!--side-bar-->
<div id="line2"></div>
<div id="left-line-menu"></div>
<div id="menu-pic"></div>
<div class="clearfloat"></div>
<div id="menu">
<script type="text/javascript">
<!--
stm_bm(["menu6487",810,"","blank.gif",0,"","",2,2,250,0,100,1,0,0,"","",0,1,1,2,"hand","hand",""],this);
stm_bp("p0",[1,4,0,0,2,3,0,7,100,"",-2,"",-2,50,0,0,"#999999","#E6EFF9","",3,1,1,"#000000"]);
stm_ai("p0i0",[0,"Главная","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,0,"#FFFFFF",0,"#FFFF66",0,"","",3,3,0,0,"#B1BEF2","#B1BEF2","#666666","#0066FF","80% 'Arial','Verdana'","80% 'Arial','Verdana'",0,0]);
stm_aix("p0i1","p0i0",[0,"Технические характеристики","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0,1,"#FFFFFF",0,"#FFFF66",0,"","",3,3,0,0,"#E6EFF9","#000000"]);
stm_aix("p0i2","p0i1",[0,"Свойства","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7]);
stm_bpx("p1","p0",[1,2,0,0,2,3,0,0]);
stm_aix("p1i0","p0i1",[0,"Огнезащита"]);
stm_aix("p1i1","p0i1",[0,"Термоизоляция"]);
stm_aix("p1i2","p0i1",[0,"Теплопроводность"]);
stm_aix("p1i3","p0i1",[0,"Звукопоглощение"]);
stm_ep();
stm_aix("p0i3","p0i2",[0,"Продукция"]);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p0i1",[0,"Вспученный вермикулит"]);
stm_aix("p2i1","p0i1",[0,"Вермикулитовые плиты"]);
stm_aix("p2i2","p0i1",[0,"Примеры использования"]);
stm_ep();
stm_aix("p0i4","p0i1",[0,"Оформить заказ"]);
stm_aix("p0i5","p0i1",[0,"Гостевая книга"]);
stm_aix("p0i6","p0i2",[0,"О фирме"]);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p0i1",[0,"История"]);
stm_aix("p3i1","p0i1",[0,"Фото"]);
stm_aix("p3i2","p0i1",[0,"Контакты"]);
stm_ep();
stm_ep();
stm_em();
//-->
</script>
</div>
</div><!--end side-bar-->
<div id="content"><!--content-->
<div id="line2"></div>
<div id="l-ugol-content">
<table border="0" cellpadding="0" cellspacing="0" height="100%">
<tr><td width="5px" height="150px"></td></tr>
<tr><td height="100%"></td></tr>
<tr><td height="50px"></td></tr>
</table>
</div>
<div id="r-ugol-content"></div>
<div id="info"><!--info-->
<h3><p>Производство вермикулита вспученного (теплоизоляция), агровермикулита и изделий из вермикулита - термостойкие и огнестойкие вермикулитовые плиты облицованные (не облицованные) декоративными покрытиями, металлом или алюминиевой фольгой.</p></h3>
<table align="center">
<tr>
<td align="center"><img src="pic/verm_koncentrat.gif" border="1" alt="Вермикулитовый концентрат" /></td>
<td align="center"><img src="pic/verm_vspucheniy.gif" border="1" alt="Вермикулит вспученный" /></td>
<td align="center"><img src="pic/verm_plita.gif" border="1" alt="Вермикулитовые плиты" /></td>
</tr>
<tr>
<td style="color:#3767a9"><h4>Вермикулитовый концентрат</h4></td>
<td style="color:#3767a9"><h4>Вермикулит вспученный</h4></td>
<td style="color:#3767a9"><h4>Вермикулитовые плиты</h4></td>
</tr>
<tr>
<td valign="top" width="33%">
<div id="place1">
<p>В магнезиатно-железистых слюдах имеется группа гидрослюд, содержащих цеолитную воду. К этим слюдам относят вермикулит, близкий по химическому составу к гидратированному биотиту и флогопиту, минералу из которого в результате обменных реакций произошел глауконит, соответствующий по составу гидратированному лепидомелану.</p>
</div>
</td><td valign="top" width="33%">
<div id="place2">
<p>Вермикулит вспученный - представляет собой сыпучий, пористый материал в виде чешуйчатых частиц, обладающий высокой огнестойкостью, малой плотностью, низкой теплопроводностью, химико-биологической инертностью при контакте с агрессивными средами, не смачивается расплавленным металлом, имеет высокие сорбционные свойства, экологически чистый.</p>
</div>
</td><td valign="top" width="33%">
<div id="place3">
<p>Изделия ПВ представляют собой л?гкие негорючие плиты, не содержащие асбеста, волокон и органических компонентов. 
Вермикулитовые плиты - экологически чистый материал, не токсичный, биостойкий, не оказывающий раздражающего действия на кожу. 
</p>
<p>Плиты ПВ химически нейтральны, инертны, не содержат щелочных примесей. В обычных условиях эксплуатации (от ?50 до 50 оС) и в условиях воздействия высоких температур (до 1200 оС) не выделяют летучих токсичных веществ, опасных для здоровья человека и окружающей среды.
</p>
</div>
</td>
</table>
<!--end info--></div>
<div id="line2"></div>
<div class="clearfloat"></div>
</div><!--end content-->
<div id="lower-bar">Эт вс? я сделал!</div>
</body>
</html>

CSS :

@charset "utf-8";
body{background-color:#FFFFFF; color:#000000; margin:0px; padding:0px}
#head{width:100%; height:150px; background-image:url(diz/head.jpg); background-repeat:no-repeat}

#dop-menu{float:left; padding:3px; margin-left:3px; height:26px; width:880px; background-color:#FFFFFF; background-image:url(diz/dop-menu.gif); background-repeat:no-repeat; background-position:left 80%}
#dop-menu1 a{font-family:Arial, Helvetica, sans-serif; font-size:80%}
#dop-menu1 a:hover{color:#0066FF; background-color:#FFFF66}

#l-ugol{float:left; width:6px; height:32px; background-image:url(diz/l-ugol.gif); background-position:bottom; background-repeat:repeat-x}
#r-ugol{margin-left:870px; height:32px; background-image:url(diz/l-ugol.gif); background-position:bottom; background-repeat:repeat-x}
#line{height:2px; background-color:#3767a9}

#side-bar{float:right; width:200px}
#line2{height:2px; background-color:#3767a9}
#left-line-menu{float:left; height:10px; width:8px; background-color:#3767a9}
#menu-pic{width:140px; height:24px; margin:3px 0 5px 28px; background-image:url(diz/menu.gif); background-repeat:no-repeat}
#menu{margin:0 0 20px 0}

#content{margin-right:230px; height:100%}
#l-ugol-content{float:left; margin-left:70px; width:5px; height:100%; background-color:#3767a9}
#r-ugol-content{float:right; width:5px; height:70px; background-color:#3767a9}
#info{margin-left:90px; margin-right:20px; text-align:justify; font-family:Arial, Helvetica, sans-serif; font-size:90%; color:#666666; background-image:url(pic/Logotip.gif); background-repeat:no-repeat; background-position:center}

#place1, #place2, #place3{border-style:double; margin:10px; padding:10px 20px 10px 20px}
#lower-bar{text-align:center; margin:10px 0 10px 0;}

.clearfloat{clear:both; line-height:0}
a{text-decoration:none;color:#666666;}
a:visited {color:#666666;}
a:hover {text-decoration:none;color:#000000;}
.leng {font-family: "Courier New", Courier, monospace; font-size:70%}
p{text-indent:30px}
h4{text-align:center}

klierik · October 26, 2007

так. вам нужно растянуть какую линию, та что слева или справа?

или обе?

собственно в чем загвоздка то?

Kos87 · October 26, 2007

мне нада обе растянуть но есле мне подскажут как растянуть одну то я думаю что сумею аналогично и вторую растянуть. загвоздка в том что когда я ставлю и слою и таблице высоту 100% оно их не растягивает...

klierik · October 27, 2007

у вас какае-то странная структура.

очень сложная и абсолютно неоправданная.

для начала разделите все основные части, к примеру : шапка, контент, футер.

для того что б сделать линии

хватило б просто создать таблицу с 3мя ячейками.

в центральную засунуть контент.

а из боковых сделать линии

собственно все =)

Kos87 · October 27, 2007

гы реально! а я както затупил...

так и сделаю, через таблицу спс

Sign In

Не тянеться слой

Question

Link to comment

Share on other sites

19 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

Join the conversation

Обсуждения

Important Information