Jump to content
  • 0

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


Kos87
 Share

Question

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

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

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

<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 указать высоту сколько нужно, но это не сделает его тянушимся(хотя он таковым и так не есть :)))) ).

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

Link to comment
Share on other sites

  • 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%; background-image:url(pic/Logotip.gif); background-repeat:repeat-x}

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

тянулся и занимал весь
Link to comment
Share on other sites

  • 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%; background-image:url(pic/Logotip.gif); background-repeat:repeat-x}

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Header

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

Footer

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

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

вот так

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

Header

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

Footer

Link to comment
Share on other sites

  • 0

<!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>

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

и

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

Link to comment
Share on other sites

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

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

Это таблица, небольшая :

<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}

:|:(

Link to comment
Share on other sites

  • 0

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}

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy