10.04.2010, 19:27
|
 |
Интересующийся
|
|
Регистрация: 06.07.2009
Сообщений: 24
|
|
|
Изменение высоты div
Смотрел поиск, искал в гугле, но ответа на свой вопрос не нашел.
Думаю может здесь найду ответ...
Нужно изменить высоту adr4, которая должна быть равна - высота adr1 + высота adr2 + высота adr3.
Вообще не силен в javascript, поэтому даже совсем простой пример решить не могу  |
|
10.04.2010, 20:15
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,590
|
|
ширина adr1\2\3 и adr4 - фиксированная, тянущаяся или одна сторона фиксированная, другая тянущаяся?
Эта проблема решается простым css.
Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {margin:0px;padding:0px}
.main {margin-left:250px}
.right {width:100%;float:right; /*ie6:*/margin-left:-4px;}
.left {margin-left:-250px;width:250px}
</style>
</head>
<body>
<div class="main" style="background: #fdf;">
<div class="right">4_________</div>
<div class="left">
<div style="background: #ddf;">
1_________<br><br><br><br><br><br>
</div>
<div style="background: #dfd;">
2_________<br><br><br><br><br><br>
</div>
<div style="background: #fdd;">
3_________<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
И ещё тысяча способов, плохо искали значит.
Последний раз редактировалось Aetae, 10.04.2010 в 20:51.
Причина: пример
|
|
10.04.2010, 22:37
|
|
Интересующийся
|
|
Регистрация: 06.07.2009
Сообщений: 24
|
|
|
Фиксированные adr1 и adr2. И как бы adr4 не увеличивалась, чтобы adr3 тянулось вместе с увеличением adr4.
Вообще, изначально верстая сайт эту проблему можно устранить. Просто есть сайт, который очень большой по содержанию и составу страниц. Там изначально не предусмотрено этого, поэтому чтобы не переверстывать сайт заново, хотелось бы решить эту проблему вставкой маленького скрипта на javascript.
|
|
10.04.2010, 23:14
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,590
|
|
Сообщение от TAILER
|
|
Нужно изменить высоту adr4, которая должна быть равна - высота adr1 + высота adr2 + высота adr3.
|
|
Сообщение от TAILER
|
|
И как бы adr4 не увеличивалась, чтобы adr3 тянулось вместе с увеличением adr4.
|
Вы уж определитесь: adr3 тянуть или adr4?
В любом случае как-то так:
window.onload=window.onresize=function() {(a=adr3.offsetHeight+adr3.offsetTop)>adr4.offsetHeight?adr4.style.height=a+'px':adr4.style.height='';}
Последний раз редактировалось Aetae, 10.04.2010 в 23:17.
|
|
10.04.2010, 23:42
|
|
Интересующийся
|
|
Регистрация: 06.07.2009
Сообщений: 24
|
|
Aetae,
Спасибо за помощь. +1 в карму
Только вот в FF не работает почему то.
И как организовать если adr4 больше чем adr1+adr2+adr3 тянуть adr3 так чтобы adr3=adr4-adr1-adr2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Тест</title>
<style type="text/css">
table td {
vertical-align: top;
}
</style>
<script language="javascript">
<!--
window.onload=window.onresize=function() {
(a=adr3.offsetHeight+adr3.offsetTop)>adr4.offsetHeight?adr4.style.height=a+'px':adr4.style.height='';
}
//-->
</script>
</head>
<body>
<table cellpadding=0 cellspacing=0 style="border: 4px solid #000000;">
<tr>
<td>
<table cellpadding=0 cellspacing=0 border=1 id=adr1 style="border: 4px solid #ff0000; height: 200px;">
<tr>
<td>1__________</td>
</tr>
</table>
<table cellpadding=0 cellspacing=0 border=1 id=adr2 style="border: 4px solid #ff0000; height: 300px;">
<tr>
<td>2__________</td>
</tr>
</table>
<table cellpadding=0 cellspacing=0 border=1 id=adr3 style="border: 4px solid #ff00ff;">
<tr>
<td>3__________ <br><br><br><br></td>
</tr>
</table>
</td>
<td>
<table cellpadding=0 cellspacing=0 border=1 id=adr4 style="border: 4px solid #0309fd;">
<tr>
<td>4__________</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Последний раз редактировалось TAILER, 10.04.2010 в 23:46.
|
|
11.04.2010, 01:51
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,590
|
|
Это ужасно.
Судя по вашему сообщению, вы ну совсем не знаете javascript, html и css.
Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.
На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/
Задавайте конкретные вопросы по ходу дела.
Решение на табличках вообще выглядит так:
<table cellpadding=0 cellspacing=5 border=5>
<tr>
<td style="height: 100px;">1__________</td>
<td rowspan="3">4__________</td>
</tr>
<tr>
<td style="height: 200px;">2__________</td>
</tr>
<tr>
<td>3__________ </td>
</tr>
</table>
Последний раз редактировалось Aetae, 11.04.2010 в 01:56.
|
|
11.04.2010, 17:05
|
 |
Пионэр
|
|
Регистрация: 16.11.2009
Сообщений: 1,322
|
|
Опять-таки, а зачем тут яваскрипт?
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
.wrapper {
margin: 0px 0px 0px 300px;
border: solid black 2px;
}
* html .wrapper { /* IE6 */
height: 0px;
}
.column {
display: inline;
float: left;
width: 293px;
margin: 0px -293px -4px 0px;
position: relative;
left: -300px;
top: -2px;
}
.block1 {border: solid red 2px; margin: 0px 0px 5px 0px;}
.block2 {border: solid blue 2px; margin: 0px 0px 5px 0px;}
.block3 {border: solid green 2px; margin: 0px 0px 0px 0px;}
.content {
display: inline;
float: left;
}
.clear {
height: 0px;
overflow: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="column">
<div class="block1">ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU </div>
<div class="block2">ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU </div>
<div class="block3">ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU ETAOIN SHRDLU </div>
</div>
<div class="content">Lorem Ipsum dolor sit amet.</div>
<div class="clear"></div>
</div>
</body>
</html>
|
|
11.04.2010, 17:17
|
|
Пионэр
|
|
Регистрация: 16.11.2009
Сообщений: 1,322
|
|
Гомен насай, Aetae. Перечитал тему, и оказалось, что Вы уже предложили практически такое же решение.
Вам в карму при первой возможности идет жирный плюсик  |
|
11.04.2010, 21:03
|
|
Интересующийся
|
|
Регистрация: 06.07.2009
Сообщений: 24
|
|
|
Aetae,
Приводя свой пример, я больше уделил внимание своему примеру, который требует решения, в связи с этим набросал быстрый код. Javascript честно не знаю, поэтому в очередной раз пришел за подсказкой сюда. За HTML и CSS - обидел, ты не прав. Спасибо за подсказку, постараюсь с условием закончить сам.
|
|
11.04.2010, 21:29
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,590
|
|
|
Если знаете html и css то с чего столь ужасный табличный говнокод?) На каждый блок контента по табличке с одной ячейкой - это... извращённо(по сути получается тот же div).
В нём просто даже копаться неприятно, чтоб найти решение. =\
P.S.Так и быть, подсказка: получение элемента с id="adr1", происходит не так: adr1, а так:document.getElementById('adr1'); и это одно из первых чему учится начинающий яваскриптер. Если вы этого не знаете - вы не прочли даже обзорной статьи, и помогать вам вообще нельзя, как злостному тунеядцу.)
Последний раз редактировалось Aetae, 11.04.2010 в 21:38.
|
|
|
|
