Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Вертикальная линия
 
 автор: volodumir   (27.01.2013 в 21:24)   письмо автору
 
 

Здравствуйте,
есть два div блока (с float:left и float:right), между ними нужно сделать вертикальную линию (лучше отдельным div) изображением (типа background:url(titleback2.gif) repeat-y ). Линия должна удлинятся если у блока слева или справа количество текста увеличится.

  Ответить  
 
 автор: Deed   (27.01.2013 в 23:28)   письмо автору
 
   для: volodumir   (27.01.2013 в 21:24)
 

Берем javascript и находим высоту правого и высоту левого дива. Выбираем, который выше и присваиваем это значение высоте среднего дива. Все это делаем при загрузке документа.

  Ответить  
 
 автор: ЯСА   (27.01.2013 в 23:32)   письмо автору
 
   для: Deed   (27.01.2013 в 23:28)
 

топикстартеру, как пить дать, надо ещё, чтобы оба дива - и левый, и правый - также выравнивались по высоте... просто он из скромности этого не написал :)

  Ответить  
 
 автор: volodumir   (28.01.2013 в 20:12)   письмо автору
 
   для: Deed   (27.01.2013 в 23:28)
 

Там тег iframe растягивает блок(левый или правый), в зависимости от действий пользователя, при загрузке не получится.

  Ответить  
 
 автор: Deed   (28.01.2013 в 20:28)   письмо автору
 
   для: volodumir   (28.01.2013 в 20:12)
 

Что-то мешает использовать таблицу? Со средним <td> шириной с картинку бэкграунда, а?

  Ответить  
 
 автор: volodumir   (28.01.2013 в 20:48)   письмо автору
 
   для: Deed   (28.01.2013 в 20:28)
 

Я не знаю как в таблице сделать видимой только центральный <td>.

  Ответить  
 
 автор: Deed   (28.01.2013 в 22:18)   письмо автору
2.4 Кб
 
   для: volodumir   (28.01.2013 в 20:48)
 

http://jsbin.com/ufuboy/1/edit - проще пареной репы.
Причем, если у вас FF или Хром, вы можете редактировать текст прямо в получившейся таблице справа и наблюдать, как меняется общая высота.

  Ответить  
 
 автор: ЯСА   (28.01.2013 в 20:28)   письмо автору
 
   для: volodumir   (28.01.2013 в 20:12)
 

значит, обрабатывать надо событие onload на обоих тегах <iframe>

два раза:
- в первый раз запоминаете высоту загрузившегося и делаете соответствующей высоту линии
- во второй раз сравниваете с тем, что запомнили; при необходимости меняете высоту линии (если второй загрузившийся <iframe> даст бООльшую height)

  Ответить  
 
 автор: volodumir   (28.01.2013 в 20:52)   письмо автору
 
   для: ЯСА   (28.01.2013 в 20:28)
 

Через таблицу не получится? Нужна видимая только центральная линия. Это возможно? Событие onload для меня сложнее.

  Ответить  
 
 автор: ЯСА   (28.01.2013 в 21:10)   письмо автору
 
   для: volodumir   (28.01.2013 в 20:52)
 

что вы такой суетливый-то?

то дивы, то таблица... вы уж определитесь окончательно, что именно вам надо
скриптом в вопросах оформления размеров тегов можно сделать ВСЁ ЧТО УГОДНО
и это совсем не сложно

от вас требуется описание вашей проблемы
например, так:
1. имею ТРИ невложенных друг в друга дива c id = dv1dv2 и dv3

2. в процессе загрузки страницы высота дивов dv1 и dv3 изменяется (становится больше)

3. надо высоту дива dv2 сделать равной высоте самого высокого из dv1 и dv3

какой из этих дивов левый, какой правый, какой посерёдке - нам неважно;
нам неважно, что там за стили у вас - где float: left, а где float: right
это важно вам - так вы их потом и поименуете нужным вам образом

функция для этого дела примитивна до безобразия
function myFunc ()
{
with (document)
   {
   var H = Math.max (getElementById ('dv1').offsetHeight, getElementById ('dv3').offsetHeight);
   getElementById ('dv2').style.height = H + 'px';
   var D = H - getElementById ('dv2').offsetHeight;
   if (D) getElementById ('dv2').style.height = (H + D) + 'px';
   }
}


если высоты дивов определяются только собственным HTML, вешаете эту функцию на тело документа: <body onload="myFunc ()">
если, как написали вы, у вас там два ифрейма - вешаете её вызов на оба ифрейма
<iframe onload="myFunc ()"> и <iframe onload="myFunc ()">

чего сложного-то?

  Ответить  
 
 автор: volodumir   (30.01.2013 в 21:27)   письмо автору
 
   для: ЯСА   (28.01.2013 в 21:10)
 

Большое спасибо.

  Ответить  
 
 автор: DJ Paltus   (31.01.2013 в 03:26)   письмо автору
 
   для: volodumir   (27.01.2013 в 21:24)
 

Вариант без скриптов. Условно, точечки в одном отдельном слое, но он не встроен, а охватывает.

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style>

      #spanner{float:left; background:url(1.gif) repeat-y 50%}
      #lefter{float:left; width:50%;}
      #righter {float:right; width:50%;}
  </style>
</head>

<body>
<div id=spanner>
    <div id=lefter>
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
        много текста очень много этого текста
    </div>
    <div id=righter>
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
        lots of text the kind of lot of text is
    </div>
</div>

</body>

</html>

  Ответить  
 
 автор: ЯСА   (31.01.2013 в 04:56)   письмо автору
 
   для: DJ Paltus   (31.01.2013 в 03:26)
 

DJ Paltus, вы бы приложили файлик 1.gif, мы бы посмотрели - чего это вы тут напридумывали

а так?... я подставил фотку обнажённой Кабаевой-Пуссиной - не очень вышло :)

  Ответить  
 
 автор: DJ Paltus   (31.01.2013 в 18:50)   письмо автору
807 байт
 
   для: ЯСА   (31.01.2013 в 04:56)
 

Упс. ДУмал, это очевидно - пиксель черненький.

  Ответить  
 
 автор: volodumir   (01.02.2013 в 00:29)   письмо автору
 
   для: DJ Paltus   (31.01.2013 в 18:50)
 

Все работает!!! Большое спасибо, ваш вариант больше мне подходит.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования