Два вопроса по блокам

[boooze]

Вопрос часто встречался ,но тут есть небольшая особенность..

Есть блок ,включающий в себя три блока:

<div id="box">
<div id="boxmenu"></div>

<div id="boxpanel">

</div>
<div id="boxmain">
Сейчас здесь должна быть такая большая ссылка на картинку знаете ли)
<a href="data:image/jpg;base64,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">data:image/jpg;base64,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</a>
вот так вот примерно)и она должна быть обрезана троточием)</div>
</div>

теперь css:

#box
{
	width:901px;
	min-height:547px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;



}
#boxmenu
{
	background-image:url(../images/navigpunkt.jpg);
	width:221px;
	height:303px;
	margin-top:0px;
	float:left;

}
#boxmain
{
		background-image:url(../images/maaain.jpg);
		width:489px;
		min-height:547px;
		margin-left:231px;
		overflow:hidden;

		padding-right:10px;
		padding-left:10px;
		text-align:left;
		margin-top:0px;
}
#boxpanel
{
		background-image: url(../images/logpasbaner.jpg);
		width:170px;
		min-height:303px;


		background-repeat:no-repeat;


	   float:right;

}

А теперь суть проблемы :

ссылка вылазила за рамки центрального контейнера,на что я поставил в свойстве ксс центрального контейнера свойство overflow:hidden; ссылка стала обрезать по ширине экрана ,но не так как надо..Она вылазиет примерно на 2-3 буквы после контейнера ,причем ,контейнер расстягивается ,так как видно что задний фон повторяется по горизонтали ,убрал повторение,текст просто вылазиет на 2-3 пикселя .

Решил поставить отстутп справа от контейнера,на чо ссылка сдвинулась теперь влево,относительно левой границы блока.поставил оба отступа

padding-right:10px;

padding-left:10px;

На что центральный контейнер просто сместился вниз,и проблема с сылкой так и не решилась:

вот картинка

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

[deadrash]

Думаю вы понимаете что растягивающийся фон в виде увеличивающейся картинки отметается. Ссылку на нормальную статью найти не смогу, но попробуй кое-как на пальцах описать метод.

Предположим что ваш блок всегда одной ширины и равен 600px тогда делаем:

Для начала делаем картинку в которой расположены вначале верхяя и нижняя части картинки (те где уголки закруглённые), а справа помещаем центральную часть картинки. Вот пример того что у меня получилось - картинка шириной 1200px и высотой 20px:

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

background:url("/картинка.пнг") no-repeat scroll 0 0 transparent

в сам блок помещаем ту же картинку, но сдвигаем её что бы отображались только нужные нам боковые полосы, также задаём в свойствах что бы повторялась по оси Y.

background:url("/картинка.пнг") repeat-y scroll 600px 0 transparent

Далее в самый низ блока ставим ещё один элемент с высотой которой хватит что бы отобразить нижнею часть картинки, там где уголки закруглены(нам хватит высоты 20px), ему ставим картинку фоном и задаём в параметрах что бы картинка начиналась от нижней части элемента

background:url("/картинка.пнг") no-repeat scroll 0 bottom transparent

Собственно всё, теперь всё внутренне наполнение блока будет его растягивать и картинка которая изображает боковые линии будет повторятся по высоте заполняя блок, а сверху и снизу будут два элемента которые изображают верхнею и нижнею части картинки. Элементы могут быть любыми, например <i> </i>, в таком случае им в стилях нужно задать блочную модель и соответствующие размеры:

display:block;
width:600px;
height:10px;

Надеюсь понятно изложил =)

Осталось только понять для чего вам ссылка вида <a href="data:image/jpg;base64,/9j/4AAQSk....//Z">data:image/jpg;base64,/9j/4AAQSk....//Z</a>

почему не написать <a href="data:image/jpg;base64,/9j/4AAQSk....//Z">ссылка на картинку</a>?

[boooze]

так с картинкой все ясно) огромное спасибо за помощь)

что насчет ссылки ,вдруг кто нибудь в коментах решит запостить ссылку примерно такого вида?)

Edited January 21, 2011 by boooze

[deadrash]

так с картинкой все ясно) огромное спасибо за помощь)

что насчет ссылки ,вдруг кто нибудь в коментах решит запостить ссылку примерно такого вида?)

Ну раз эта ссылка размещается через комментарий то, та часть ссылки которая между тегами "a" то есть <a href="">вот эта часть</a> может быть обрезана на самом сервере, тем скриптом который размещает комментарий.

Вот поглядим как тут работает подобный скрипт =) Оооочень длинная ссылка с очень длинным текстом внутри которой, такой длинный текст что весь вряд-ли поместится, кстати интересно а как пишеться вряд-ли, через дефис или нет?

=) походу тут не обрезаются ссылки.

Edited January 21, 2011 by deadrash

[boooze]

ASDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

ASDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDA

SDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

DDDDDDDDDDDDDDDDDDDDDDDDDDDDFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFUUUU

U

UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

U

UUUUUUUUUUFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF

F

FFFF

хмммм))))Даже слитно переноситься )))значит это уже наверное дело скрипта)Ну думаю если делать сайт на готовом движке ,это предусмотрено))Еще раз спасибо)

Кстатаи ссыслку я писал без пробелов )интересно почему именно так переноситься))

Edited January 21, 2011 by boooze

[Vlad]

Ну-ка, отставить эксперименты на форуме!

[psywalker]

Ну-ка, отставить эксперименты на форуме!

Да, не стоит такие вещи творить.