Как минимизировать ширину слоя?

rijy · March 10, 2009

Возникла проблема в верстке.. Даже не знаю как рассказать попонятнее)

Вобщем есть вот такой участок кода из дле:

<table cellspacing=0 cellpadding=0 border=0 width=100% height=62>
		<tr>
			<td width=15 style="background:url({THEME}/images/1.gif) no-repeat left" valign=top class=header_01> </td>
			<td style="background:url({THEME}/images/2.gif) repeat-x left" valign=top class=header_01><div id='spbar'>{speedbar}</div></td>
			<td width=15 style="background:url({THEME}/images/3.gif) no-repeat left" valign=top class=header_01> </td>
			<td style="background:url({THEME}/images/4.gif) repeat-x left" valign=top class=header_01> </td>
		</td>
		</tr>
	</table>

Это спидбар из ДЛЕ. Мне надо, чтобы ячейка с фоновым рисунком 2.gif растягивалась НЕ на всю ширину экрана, а только на длину текста (эта длина меняется в зависимости от того, в какой категории находится пользователь на сайте). Видимо ячейку растягивает на весь экран слой.. Как его можно минимизировать, чтобы ширина ячейки (слоя) была только на ширину текста, а не на весь экран?

Буду благодарен за любые рекомендации.

Спасибо!

s0rr0w · March 10, 2009

Буду благодарен за любые рекомендации.
Спасибо!

Будет намного лучше, если вы выложите рисунок с тем, что вы хотите получить

rijy · March 10, 2009

Будет намного лучше, если вы выложите рисунок с тем, что вы хотите получить

Исходное изображение:

Изображение с пояснениями:

Зеленые линии показывают на какие части это изображение делится, красная линия - это желаемая граница ячейки/слоя.

Вот при увеличении текстового поля как хотелось бы:

s0rr0w · March 10, 2009

Это можно сделать без таблиц.

Вариант 1, с флоатом.


<div class="shapedBlock">
 <div class="shapedBox">
   <div class="shapedText">
     Text
   </div>
 </div>
</div>

.shapedBlock
{
 overflow: hidden;
 _zoom: 1;
 background: url(рисунок с линией посредине) repeat-x ;
}
.shapedBox
{
 float: left;
 background: #fff url(рисунок с левым закруглением + длинные линии сверху и снизу) no-repeat
}
.shapedText
{
 display: block;
 background: #fff url(рисунок с правым закруглением) no-repeat right center;
 padding-right: 10px;
}

rijy · March 10, 2009

background: #fff url(рисунок с левым закруглением + длинные линии сверху и снизу) no-repeat

не совсем понял, как сделать в бекграунде ссылку сразу на два рисунка?(

все рисунки имеют ширину в 15px.. длинные линии сверху и снизу потом растягиваются репитом (и линия посредине строки тоже так растягивается). т.е. левое змкругление и линии сверху/снизу - это два разных изображения.

сорри, если я что-то не так понял..

s0rr0w · March 10, 2009

не совсем понял, как сделать в бекграунде ссылку сразу на два рисунка?(
все рисунки имеют ширину в 15px.. длинные линии сверху и снизу потом растягиваются репитом (и линия посредине строки тоже так растягивается). т.е. левое змкругление и линии сверху/снизу - это два разных изображения.
сорри, если я что-то не так понял..

Делаете один рисунок, примерно на 2000 пикселей

______________________________________

(______________________________________

И не нужно его расстягивать.

Вообще идеально сделать вот такой вариант фона

______________________________________

(______________________________________)

Один рисунок лучше, чем 3 маленьких.

rijy · March 10, 2009

сделал. получается вот так:

на всякий случай привожу код.. можт где-то что-то проглядел когда копировал:

<div class="shapedBlock">
<div class="shapedBox">
<div class="shapedText">
<div id='spbar'>{speedbar}</div>
</div>
</div>
</div>


.shapedBlock {
	overflow: hidden;
	_zoom: 1;
	background: url(../images/03.gif) repeat-x;
}

.shapedBox {
	float: left;
	background: #fff url(../images/01.gif) no-repeat;
}

.shapedText {
	display: block;
	background: #fff url(../images/02.gif) no-repeat right center;
	padding-right: 10px;
}

s0rr0w · March 10, 2009

Будет намного лучше, если вы выложите кусочек кода с картинками где-нибудь.

rijy · March 10, 2009

Будет намного лучше, если вы выложите кусочек кода с картинками где-нибудь.

шаблон главной:

http://www.rapidshare.ru/958230

css-стили:

http://www.rapidshare.ru/958231

Рисунки:

- 01.gif

- 02.gif

- 03.gif

- 04.gif

s0rr0w · March 10, 2009

Я сделал вот такую картинку.

После этого поигрался немного с паддингами у блоков, чтобы не было перекрытия бэкграунда, и убрал паддинг у блока с id="spbar".

В блоках с классами shapedBox, shapedText используется один и тот же фон. shapedBlock содержит ваш 04.gif (я бы от него отрезал все лишние пробелы)

rijy · March 11, 2009

сделал как вы советовали в последний раз. все отлично съеживается.. НО :lol:

получается вот так:

игрался с отступами, делал изображение больше по высоте - ничего не меняется(

s0rr0w · March 11, 2009

сделал как вы советовали в последний раз. все отлично съеживается.. НО
получается вот так:
игрался с отступами, делал изображение больше по высоте - ничего не меняется(

Смотри, у тебя есть правая часть только. Бордюров сверху и снизу там нет, так как блок меньше чем высота контента.

Первое, что надо сделать, это добавить паддинги самому "глубокому" диву в твоем дереве (тот, в котором текст находится)

Сделай это - дальше понятнее будет.

rijy · March 12, 2009

Сделай это - дальше понятнее будет.

ОГРОМНОЕ СПАСИБО!

все прекрасно получилось. теперь все съеживается как надо. единственная трабла в том, что текст спидбара чуть выше середины рисунка. я исправлял это паддингом в #spbar. Но теперь при добавлении отсутпа сьезжает рисунок. Можно ли как-то это исправить?

Вот так сейчас:

И, если можно, расскажите пожалуйста подробнее про вот этот параметр: _zoom: 1; (не нашел на htmlbookе)

Еще раз большое спасибо!

Vlad · March 12, 2009

zoom это для IE чисто, чтобы некоторые его баги особенности учесть.

s0rr0w · March 12, 2009

ОГРОМНОЕ СПАСИБО!
все прекрасно получилось. теперь все съеживается как надо. единственная трабла в том, что текст спидбара чуть выше середины рисунка. я исправлял это паддингом в #spbar. Но теперь при добавлении отсутпа сьезжает рисунок. Можно ли как-то это исправить?

Паддинг должен быть только у #spbar'а. Никакие другие элементы не должны его иметь.

Вы пользуетесь FireBug'ом?

rijy · March 12, 2009

Паддинг должен быть только у #spbar'а. Никакие другие элементы не должны его иметь.
Вы пользуетесь FireBug'ом?

сделал паддинг только у #spbar'а. текст по центру располагается, но возникла другая проблема:

сделал паддинг в .shapedBox.. появился левый край, но с каким-то смещением:

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

s0rr0w · March 12, 2009

сделал паддинг только у #spbar'а. текст по центру располагается, но возникла другая проблема:
сделал паддинг в .shapedBox.. появился левый край, но с каким-то смещением:
правый край (там где линия посредине рисунка) впринципе можно выровнять в самом изображении.. а вот это смещение никак не могу исправить(

У вас один фон выравнивается по верхнему краю, а второй - по центру.

Или где-то в промежуточных дивах есть паддинг.

Sign In

Как минимизировать ширину слоя?

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information