строка ссылка. перенос на следующую строку + изображение следом

[maa]

ещё одна задачка,не могу решить. помогите.

есть сслыка. сразу же за ней нужно вставить изображение-ссылку. но она сползает под блок, который образует ссылка. вторая ссылка должна "ползать за основной". то есть в зависимости от наполнения строки.

я сперва реализовал отрицательным отступом, но тогда ссылка стоит на месте, а текст заползает под неё.

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

не могу придумать. подскажите, пожалста.

Edited November 29, 2011 by maa

[Rikani]

Может быть так?

<a href="#">ссылка 1</a> <a href="#"><img src="/картинка.jpg" alt="картинка"></a>

А первая ссылка и картинка-ссылка ведут на разные страницы?

Edited November 29, 2011 by Rikani

[SelenIT]

Похоже, что у какой-то из ссылок понапрасну стоит display:block. По умолчанию они должны вести себя так, как хочет автор.

[maa]

Может быть так?

<a href="#">ссылка 1</a>$nbsp;<a href="#"><img src="/картинка.jpg" alt="картинка"></a>

А первая ссылка и картинка-ссылка ведут на разные страницы?

да, ссылки разные.

<a href="#">Customized web development latest Belarus</a> <a href="#"><div class="salleftpart"> </div><div class="salcentrpart">SALES 100%</div><div class="salrightpart"> </div></div></a>

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

а с самого начала я делал так:

<a href="#">Customized web development latest Belarus</a>

<div class="sales"><div class="salleftpart"> </div><div class="salcentrpart"><a href="#">SALES 100%</a></div><div class="salrightpart"> </div></div>

то есть за ссылкой шёл блок. который и не слушался. и сейчас не слушается.

у ссылок display не указаны вообще.

Edited November 29, 2011 by maa

[Rikani]

Ваша ссылка с картинкой находится в div'е, а он по умолчанию является блочным элементом и занимает всю ширину контейнера.

[maa]

картинка-ссылка реализована таким образом по определённым причинам. иначе нельзя сделать.

Ваша ссылка с картинкой находится в div'е, а он по умолчанию является блочным элементом и занимает всю ширину контейнера.

это значит, что в такой реализации картинки, я не смогу добиться того, что нужно?

[Rikani]

Попробуйте задать div'у с классом "sales" display: inline-block.

Может быть этого хватит, а может и нет, трудно сказать не увидев всего кода вместе с CSS

[maa]

Попробуйте задать div'у с классом "sales" display: inline-block.

Может быть этого хватит, а может и нет, трудно сказать не увидев всего кода вместе с CSS

не помогло.

<div class="bttl">

<a href="#">Customized web development latest Belarus</a>

<div class="sales"><div class="salleftpart"> </div><div class="salcentrpart"><a href="#">SALES 100%</a></div><div class="salrightpart"> </div></div><!--sales-->

</div><!--bttl-->

/*********************************************************/

.bttl{

height: auto;

float: left;

margin: 0 0 18px 0;

}

.bttl a{

font-size: 1.125em;

font-family: Arial, Helvetica, sans-serif;

color: #006699;

float: left;

}

.sales{

margin: 0 0 0 10px;

height: 16px;

float: left;

display: inline-block;

}

.sales a{

color: #fff;

font-size: 0.7em;

font-family: Arial, Helvetica, sans-serif;

text-decoration: none;

padding: 2px 0 0 0;

}

.salleftpart{

width: 7px;

height: 100%;

float: left;

background: url(img/sales_left.png) no-repeat;

}

.salcentrpart{

height: 100%;

width: auto;

float: left;

background: url(img/sales_center.png) repeat-x;

}

.salrightpart{

width: 8px;

height: 100%;

float: left;

background: url(img/sales_right.png) no-repeat;

}

[Rikani]

От сюда

.bttl a{
font-size: 1.125em;
font-family: Arial, Helvetica, sans-serif;
color: #006699;
float: left;
}

уберите "float: left"

И от сюда тоже

.sales{
margin: 0 0 0 10px;
height: 16px;
float: left;
display: inline-block;
}

[maa]

спасибо. решение как всегда элементарно.

моя невнимательность: я был уверен в том, что уже проверял этот вариант.

[Rikani]

Если вы так заморачиваетесь с уголками, значит для вас важна поддержка старых IE. Поэтому только для IE6 и IE7 у блока с классмо "sales" надо прописать display:inline.