[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Таблица, дивы, распорки
Форум PHP программистов > Дизайн и верстка
SunSet
10.10.2009 - 01:44
HTML
<table width="97%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="18%" align="center" valign="top"><div style="width:250px; border: 1px solid black">ddddd</div></td>
<td >&nbsp;</td>
<td width="18%" align="center" valign="top"><div style="width:250px; border: 1px solid black">ddddd</div></td>
</tr>
<tr>
<td colspan="3"><p>&nbsp;</p>
<hr size="5" style="width:990px">
<p>&nbsp;</p></td>
</tr>
</table>


Выше код таблицы. Хочу сделать так, чтоб дивами по бокам строго ограничевалась минимальная ширина боковых столбцов. Для этого втулил по диву, выставил нужную минимальную ширину в 250 пикселей. Но столбцы, где эти дивы находятся могут вытягиваться по ширине, если монитор широкий.
Так же сделал минимальную ширину самой таблицы, для этого вставил <hr> - гориз. разделитель (РИС 3), указал ее ширину в 990 пх (пробовал вставлять и дивы, и таблицы так же).
Средний столбец таблицы - не задан по ширине, то есть ДОЛЖен сжиматься пока позволяет <hr>. Но не так то было.. как видно на рисунке РИС 2, получаются непонятные отступы. Откуда они берутся - не знаю.

В итоге, таблица должна сжаться же до размера горизонтального разделителя <hr>, но изза этих боковых отступов ничег оне выходит, и средняя колонка таблицы не хо сжиматься. unsure.gif
Маюсь чтото, можно другие варианты пробовать, но чего не работает не понимаю.



Спустя 14 минут, 34 секунды (10.10.2009 - 00:59) sergeiss написал(а):
А с чего бы твоему hr сжиматься, если ты задал размер не в %, а фиксированный в пикселях?
Я вот сделал такой hr
Код
<hr size="5" width="90%" align="center" >

и вся твоя верхняя часть картинки тоже стала адекватная. А это же можно и в стиле задать - это тебе домашнее задание smile.gif

PS. Если я, конечно, правильно понял вопрос...

Спустя 3 минуты, 14 секунд (10.10.2009 - 01:02) SunSet написал(а):
sergeiss
Нет, чуток не понял. Этот разделитель для того и вставлен, чтобы не пускать сжиматься менее чем на 990 пх. Он не должен быт ьв процентах.

Спустя 1 минута, 59 секунд (10.10.2009 - 01:04) SunSet написал(а):
sergeiss
Вот он 990 пх, и при стягивании окна браузера табличка сужается до вот этого момента, что на рисунке. ЕЕ как будто не пускают невидимые поля РИС2.
Средня колонка то не задана, и таблица вся не имеет жетского значения. Удерживать должны только те два дива и вот этот разделитель.

Спустя 7 минут, 55 секунд (10.10.2009 - 01:12) sergeiss написал(а):
В Опере и ИЭ разное поведение как для верхней части таблицы, так и для нижней.
Нижняя - ОК в Опере, но плохая (как у тебя) в ИЭ.
Верхняя - ОК в ИЭ, но плохая в Опере.

А вот такие установки
HTML
<table width="97%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="18%" align="center" valign="top"><div style="width:100%; border: 1px solid black">ddddd</div></td>
<td >&nbsp;</td>
<td width="18%" align="center" valign="top"><div style="width:100%; border: 1px solid black">ddddd</div></td>
</tr>
<tr>
<td colspan="3"><p>&nbsp;</p>
<hr size="5" style="width:990px">
<p>&nbsp;</p></td>
</tr>
</table>

дали кроссбраузерное решение smile.gif По крайней мере для Оперы 9.25 и ИЭ 6.0.

Всё красиво "плавает" и упирается в распорку, когда нужно.

Спустя 2 минуты, 26 секунд (10.10.2009 - 01:15) kirik написал(а):
SunSet
Тебе нужно чтобы крайние колонки были фиксированные, средняя растягивалась, но не стягивалась меньше чем на n-ное число пикселей?

Спустя 3 минуты, 57 секунд (10.10.2009 - 01:19) SunSet написал(а):
sergeiss
Не совсем то. Нижняя строка по твоему варианту теперь как и нужно отображается, а боковушки то мне нужно закрепить по 250 px. sad.gif
Менюшки пострадают, а там нужна точная минимальная ширина.

kirik
Что нужно:
1. Боковухи - минимум 250 пх, но 18% сами столбцы боковые, чтоб для широкого монитора растягивались
2. Таблица сжималась до 990 пх минимум, но вытягивалась по ширине на 97%.
3. Средний столбец не имеет четкой ширины, то есть в зависимости от ширины окна браузера растягивается.

Спустя 1 минута, 21 секунда (10.10.2009 - 01:20) SunSet написал(а):
Кстати, это именно баг ИЕ. Потому что в опере все четко как и в моем первом примере отображается. Но не могу игнорировать это sad.gif

Спустя 30 минут, 30 секунд (10.10.2009 - 01:50) kirik написал(а):
SunSet
Такое надо?

Цитата (SunSet @ 9.10.2009 - 17:20)
Кстати, это именно баг ИЕ

Удивительно! biggrin.gif

Спустя 3 минуты, 34 секунды (10.10.2009 - 01:54) SunSet написал(а):
kirik
Похоже, но не то. Мне нужно чтоб средняя же вытягивалась, а так контент, который внутри дива среднего столбца будет жесткой ширины.

Вот просмотри мой код, который в первом посте но в Опере. Там то что нужно. И посмотри в ИЕ 7, вот там не то что нужно biggrin.gif

Спустя 2 минуты, 55 секунд (10.10.2009 - 01:57) SunSet написал(а):
Хотя щас.. соображу. МОжет твой вариант как-нить перекручу.

Спустя 1 минута, 1 секунда (10.10.2009 - 01:58) kirik написал(а):
Цитата (SunSet @ 9.10.2009 - 17:54)
Мне нужно чтоб средняя же вытягивалась, а так контент, который внутри дива среднего столбца будет жесткой ширины.

Дык ты не в див вставляй.. Яж там даже циферки поставил, куда текст вставлять smile.gif Обнови страничку.

Спустя 8 минут, 15 секунд (10.10.2009 - 02:06) SunSet написал(а):
kirik
Немного перекрутил, стало больше походе на тот как нужно. Только как установить ширину таблицы в 97% чтоб по краям еще были небольшие отступы? А то чтото не применяется..

Спустя 2 минуты, 49 секунд (10.10.2009 - 02:09) SunSet написал(а):
Все, нашел что поправить. Правда сложно чето так blink.gif Изза такой фигни столько телодвижений делать. Спасиб rolleyes.gif

Спустя 2 минуты (10.10.2009 - 02:11) kirik написал(а):
Цитата (SunSet @ 9.10.2009 - 18:06)
Только как установить ширину таблицы в 97% чтоб по краям еще были небольшие отступы?
....
Все, нашел что поправить.

Мне кажется лучше не ширину таблицы меньше делать, а padding для body указать. А то на маленьких мониторах эти 1.5% на сторону видно не будет, а на больших отступы будут большими.. Не труЪ smile.gif

Спустя 4 минуты, 11 секунд (10.10.2009 - 02:15) SunSet написал(а):
kirik
Слух, у тебя даже CSS трудный какойто вышел laugh.gif
Ладненько, буду крутить теперь. Но тот глюк можно занести в раздел "Необьяснимо, но факт" smile.gif

Спустя 8 минут, 12 секунд (10.10.2009 - 02:23) SunSet написал(а):
kirik
Хотя погодь... это сейчас изобрели тут велосипед. Если по твоему образцу то можно просто в средний столбец вставить див с высотой в 0пх и шириной, например, в 400пх и будет то же что и на твоем варианте smile.gif
У тебя же точно так же в каждой ячейке распорка.

Спустя 2 минуты, 5 секунд (10.10.2009 - 02:25) kirik написал(а):
SunSet
Наверное, наверное smile.gif

Там можно с min-width решить, вот только IE снова нифига не поймет.

Спустя 4 минуты, 17 секунд (10.10.2009 - 02:30) SunSet написал(а):
kirik
Все, щас сделал как хотел. Натолкнул меня на нужную мысль, сэнсей smile.gif

Спустя 5 часов, 38 минут, 5 секунд (10.10.2009 - 08:08) sergeiss написал(а):
Я могу предложить еще один вариант, должен быть универсальным smile.gif Вроде как, кроссбраузерный.

Согласно этому варианту, для начала делаем функцию, которая выставляет нужные размеры для указанных в ней элементов. В зависимости от текущих размеров BODY.
Далее, эту функцию вызываем в 2-х местах: в событиях для BODY onload и onresize. Тогда пофиг все стайлы - сразу же после загрузки и при дальнейших изменениях размерах будет просто тупо выставлять нужные размеры.
Тут - широкое поле для деятельности smile.gif

Я подзабыл... Но сам же эту штуковину тут, на форуме, предлагал smile.gif
Вот код:

Код
function getClientWidth()
{
 return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}

function getClientHeight()
{
 return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

function set_div_size()
{
// как раз тут выставляем всё, что надо, все элементы; можно сделать целый комплекс функций для добавления/удаления элементов в список для изменения размеров, да еще с возможностью динамически менять парамеры; но это уже для "домашнего задания" работа
document.getElementById( 'div001' ).style.width = (getClientWidth()-10)+'px';
}

И в ПХП:
PHP
<body id="docbody" onresize="set_div_size()" onload="set_div_size()">
...
// ширина, указанная в ДИВе, просто игнорируется в итоге
<div id="div001" style="width:400px; overflow:scroll">
// тут всякая фигня
</div>

Спустя 1 час, 8 минут, 18 секунд (10.10.2009 - 09:16) Семён написал(а):
Я может чего и не понял, но вот:
user posted image

HTML
<style type="text/css">
.container {
color:#FFF;
margin: 0 auto;
width: 1000px;
}

.col1 {
float:left;
background-color: red;
width:20%;
}

.col2 {
float:left;
background-color: black;
width:60%;
}

.col3 {
float:left;
background-color: red;
width:20%;
}

</style>
<div class="container">
<div class="col1">Первый столбик</div>
<div class="col2">Второй столбик</div>
<div class="col3">Третий столбик</div>
</div>


Тело резиновое, поэтому если захочется изменить например на 800x600, в container меняешь атрибут width: на 800

Спустя 4 часа, 10 минут, 22 секунды (10.10.2009 - 13:26) SunSet написал(а):
Семён
Нет, это не то что нужно было. Тут вся таблица фиксирована, а нужно было чтоб средняя растягивалась но была не менее опр. величины.

sergeiss
Ну, такую мелочь как таблицку программировать - это уже явно кащунство))

Уже все сделал. Благодарю за варианты и помощь smile.gif

Спустя 55 минут, 22 секунды (10.10.2009 - 14:22) Семён написал(а):
SunSet

Тогда тебе просто следовало в моём варианте изменить:
HTML
width: 1000px;

на
HTML
width: 100%;


и у col1 и col3, поставить фиксированную ширину, при этом средняя колонка стала бы резиновой.

Спустя 4 минуты, 32 секунды (10.10.2009 - 14:26) SunSet написал(а):
Семён
Нет, это тоже не подходящий вариант так как средняя ячейка будет сжиматься до полного нуля, а мне нужно чтобы все три имели свой минимум - боковые по 250, средняя, например, 500. Но и чтобы все они не были фиксированые, а вытягивались по ширине монитора. smile.gif

Могу код выложить, для ясности как должно было быть.

Спустя 16 минут, 46 секунд (10.10.2009 - 14:43) sergeiss написал(а):
Цитата (SunSet @ 10.10.2009 - 15:26)
Могу код выложить, для ясности как должно было быть.

Ну так выкладывай smile.gif

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

Спустя 7 минут, 27 секунд (10.10.2009 - 14:51) SunSet написал(а):
sergeiss
Вот. Повторюсь, она работает так как надо, но может у когото альтернативные мысли возникнут smile.gif Только этот кусок кода лучше в чемто смотреть сразу, просто захламлен уже немного ненужным.

HTML
<table width="88%" border="0" align="center" cellpadding="0" cellspacing="7" class="table">
<tr>
<td colspan="3"><div align="justify" style="border:1px solid #000000; height:150px; padding-top:0px"></div></td>
</tr>
<tr>
<td width="15%" rowspan="2" align="center" valign="top"><div style="height:26px; padding-top:5px; padding-left:5px;padding-right:5px;background-image:url(img/1.gif); background-position:top; background-repeat:repeat-x">
<div style="width:210px" align="center"> <img src="img/user.png" width="16" height="16"> Это важно знать</div>
</div>
<div align="justify" style="border:1px solid #CCCCCC; margin-bottom:7px; padding:5px">эээээ
</div>
</td>
<td align="center" valign="top" bgcolor="#99FFFF"><div style="border:1px solid black">ээээээ</div></td>
<td width="15%" rowspan="2" align="center" valign="top"><div style="height:26px; padding-top:5px; padding-left:5px;padding-right:5px;background-image:url(img/1.gif); background-position:top; background-repeat:repeat-x">
<div style="width:210px" align="center"> <img src="img/user.png" width="16" height="16"> Это важно знать</div>
</div>
<div align="justify" style="border:1px solid #CCCCCC; margin-bottom:7px; padding:5px">ээээээ
</div>
</td>
</tr>
<tr>
<td align="center" valign="top"><div style="height:0px; width:520px"></div></td>
</tr>
<tr>
<td colspan="3" align="center" valign="top">&nbsp;</td>
</tr>
</table>

Спустя 2 часа, 51 минута, 55 секунд (10.10.2009 - 17:43) sergeiss написал(а):
Ты знаешь, что мне не нравится в твоем коде? Некая хитрая смесь форматирования и таблицами, и стилями одновременно.

Спустя 6 минут, 37 секунд (10.10.2009 - 17:49) SunSet написал(а):
sergeiss
CSS юзаю там где стандартными свойствами не сделать. Каркас будет таблицей, а вставки дивами. Но это ж дело вкуса, тут не в том была проблема.

Спустя 3 минуты, 59 секунд (10.10.2009 - 17:53) sergeiss написал(а):
А ты обрати все-таки внимание на мой код smile.gif Там предлагается кроссбраузерное решение, позволяющее выставлять место и размеры любых объектов на странице вне зависимости от ее размеров. Алгоритм задается и очень легко контролируется программером, т.е. тобой.
Из CSS можно использовать только оформление, но ничего, связанного с положением.
И таблиц не нужно...
Короче говоря, получается "красивее". Именно для "резинового" дизайна, который ты можешь сам полностью контролировать.

Спустя 10 минут, 38 секунд (10.10.2009 - 18:04) SunSet написал(а):
sergeiss
Большой плюс в твоем коде перекрывается точно таким же большим минусом - это JS. Как по мне, то не рационально использовать лишний кусок ЯС без надобности. Другое дело что без него нельзя было бы обойтись.
Всеравно что мне нужно реку переплыть, а тут предлогается боинг построить smile.gif

Спустя 10 минут, 15 секунд (10.10.2009 - 18:14) sergeiss написал(а):
Не совсем так smile.gif Тебе для переплытия реки предлагается сделать надувную лодку, а ты мастрячишь обстоятельный, тяжелый плот. Я бы так это сравнил smile.gif
К тому же, эту надувную лодчонку можно потом взять с собой и переиспользовать, а плот останется на этой переправе.

Спустя 4 минуты (10.10.2009 - 18:18) SunSet написал(а):
sergeiss
та ну?) По сути, для решения моей проблемы требовалось всего вставить пустой див, 0 пикселей в высоту и по ширине сколько нужно. И все. Эфект тот же самый что и должен был получится с горизонтальным разделителем.
Так что строчка кода для вставки дива как раз и есть та надувная лодка smile.gif


_____________
... и помните! Каким бы ни был PHP, главное - чтобы он был защищенным! :) (PHP с Анфисой Чеховой)
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.