VPF::очередной вопрос про DIV - Форум программистов

Bangladesh

Дата 12.12.2005, 21:43 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

собственно, как работать с дивами я примерно понял. меня мучает другой вопрос. допусти, что существует тело документа и в нем таблица, длиной 95% и высотой, нуууу, скажемммм, 150 пикселей (но это только как пример). что я хочу... а хочу я сделать слой, который будет находиться слева, и будет растягиваться по всей высоте таблицы, а длина его будет равна, допустим 20 пикселей. в этом слое должны иметься таблица, которая будет растянута на всю его высоту, т.е. по транзитивности на 100% высоты начальной таблицы. делаю я геморой сей для того, чтобы сделать - как бы фон сбоку, а точнее небольшой столбец... объясню наглядно:

Код


<html><head>
<title>Вот пример</title>
</head>
<body leftmargin=0 rightmargin=0>

<table width=100% cellspacing=0 cellpadding=0>
<tr>
<td width=95% height=150px bgColor=darkblue>

</td>
</tr>
</table>

</body>
</html>

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

--------------------

ок

Ciber SLasH

Дата 12.12.2005, 22:15 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

А зачем здесь DIV ?
Можно обойтись бордюром. Добавь к таблице: style='border-left: 20px solid red'

Bangladesh

Дата 12.12.2005, 23:31 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

бордюром не обойдешься, ибо у него нет свойства бэкгроунд... smile

я же туда собираюсь бекграунд вставлять...

--------------------

ок

Ciber SLasH

Дата 13.12.2005, 00:18 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

Код

<div class='container'>
    <div class='row'></div>
    <table width="95%" cellspacing="0" cellpadding="0">
    <tr><td width="100%" height="150px" bgColor="darkblue"></td></tr>
    </table>
</div>

Код

.container .row {width: 20px; height: 150px; float: left; background: red}

R.M.

Дата 13.12.2005, 01:19 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

А для вставки картинки-бэкграунда юзай

Код


background-image: url('./img/bg.gif');

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

Цитата(I)

устройство сайт не позволит мне использовать таблицу

--------------------

Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia

Bangladesh

Дата 13.12.2005, 22:04 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

таблицу не вставить потому, что это не удобно + она двигает текст, что мне не нужно.

Ciber SLasH, примного благодарен! smile

--------------------

ок

Bangladesh

Дата 13.12.2005, 22:23 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

тем не менее не подошло. в ие при таком CSS он просто отодвигает все содержимое таблицы и не растягивается. в файрфоксе растягивается, но отодвигает тоже. для неотодвигания надо ставить абсолют , и з-индекс, но тогда не в файрфоксе не в ие он не растягивает до конца... че делать?

--------------------

ок

Ciber SLasH

Дата 13.12.2005, 23:01 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

Цитата(I)

он просто отодвигает все содержимое таблицы и не растягивается

Таблица отодвигается, потому что мы создали блочный элемент, а не ячейку таблицы. А для того, чтобы таблица не двигалась, нужно всего навсего создать одну ячейку слева, а во всех остальных ненужных строках прописать colspan-ы (это впринципе можно сделать и на JavaScript, если не хочется прописывать в огромной таблице с кучей строк).

Что-то я не пойму, а что должно растягиваться ?

Ciber SLasH

Дата 13.12.2005, 23:47 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

Если я правильно понял, то тебе нужно поменять float: left; на position: absolute; в стилях.

Bangladesh

Дата 14.12.2005, 00:01 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

вот это допустим левый столбец в фоном.

Код


.row {z-index: 2; position: absolute; width: 20px; height: 100%; float: left; background: red;}

http://gyoz.dreamsdesign.ru/index.php?p=who - в ие слоя вообще не видно... в опере и файре растягивается до конца документа...

Это сообщение отредактировал(а) I, GyoZ - 14.12.2005, 00:05

--------------------

ок

Ciber SLasH

Дата 14.12.2005, 00:06 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

Т.е. тебе нужно растянуть красную полоску по высоте таблицы?

Bangladesh

Дата 14.12.2005, 00:10 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

Цитата(Ciber @ 13.12.2005, 23:06)

Т.е. тебе нужно растянуть красную полоску по высоте таблицы?

да, именно так

--------------------

ок

Ciber SLasH

Дата 14.12.2005, 00:23 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

К сожалению с помощью CSS я не знаю как растянуть этот DIV smile

Но знаю как это сделать на JS:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta name="Generator" content='EditPlus 2.20.211'>
<meta name="Author" content='Ciber SLasH'>
<script type='text/javascript'>
onload = function () {
var row = document.getElementById("row");

    if (window.clipboardData)  // проверка на IE
        row.style.height = row.parentElement.lastChild.offsetHeight + "px";
    else
        row.style.height = row.parentNode.childNodes[3].offsetHeight + "px";
}
</script>
<style type='text/css'>
.container #row {width: 20px; position: absolute; background: red}
</style>
</head>

<body>
<div class='container'>
<div id='row'></div>
<table width="95%" cellspacing="0" cellpadding="0">
<tr><td width="100%" height="200px" bgColor="darkblue"></td></tr>
</table>
</div>
</body>
</html>

Bangladesh

Дата 14.12.2005, 00:52 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: 4
Всего: 17

не работает... слушай, вопрос не в тему \сорри\, как узнать высоту столбца таблицы... можно было бы просто написать скрипт, который узнаёт высоту столбца и задает это высоту столбцу с фоном

--------------------

ок

Ciber SLasH

Дата 14.12.2005, 00:56 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 15
Всего: 67

Именно этим и занимается скрипт выше.
Может плохо скопировал, потому что у меня работает в 3-х браузерах одинаково.

R.M.

Дата 15.12.2005, 01:35 (ссылка)

(нет голосов)

Загрузка ...

Анархист

Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: 9
Всего: 30

Цитата(I)

+ она двигает текст, что мне не нужно.

пропиши

Код


padding: 0;

и небудит ничего сдвигать
Добавлено @ 01:36
и ещё

Код


border-collapse: collapse;

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »