Jump to content
  • 0

иконка у линка с правой стороны

termoplus

Asked by termoplus,

 Share

Question

17 answers to this question

Recommended Posts

  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
подскажите как через CSS сделать иконку и линка но только с правой стороны. то есть линк может состоять из 10 символов, 20, 30.... нужно чтобы картинка отображалась через CSS. спасибо

А что, собственно, непонятно?

Даю подсказку:

background-position

padding

display

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
ребят, вы не так поняли.

хотя ладно, можно пример?

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
мне не трудно написать 2-3 строчки.

то что вы уже написали давно уже использовал, не получилось поэтому решил спросить..............

Значит ты не так делал, давай свой код и рисунок того, что хочешь получить!

Link to comment
Share on other sites
  • 0
termoplus Explorer

termoplus

Posted
  • Author
Posted

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

.link{

display: block;

background: url(images/ar.jpg) no-repeat right top;

}

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

m57LugsUx7.jpg

Link to comment
Share on other sites
  • 0
termoplus Explorer

termoplus

Posted
  • Author
Posted

не получается..

точнее у меня сама ссылка прописана на общий файл a:link{};

а оформление хочу сделать для конкретной ссылки например .block

так вот, если

.block {

background: url(images/ar.jpg) no-repeat right;

padding: 10px 0;

padding-right: 20px;

}

ничего не выходит..........

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)
не получается..

точнее у меня сама ссылка прописана на общий файл a:link{};

а оформление хочу сделать для конкретной ссылки например .block

так вот, если

.block {

background: url(images/ar.jpg) no-repeat right;

padding: 10px 0;

padding-right: 20px;

}

ничего не выходит..........

хм...странно, тогда делай так:

1) Общие стили для всех ссылок пиши для просто тега "А", типа того: a { ....}

2) Ссылку, в которой хочешь сделать отдельные изменения, назови также <a href="" class="block"></a>

3) В стилях CSS обращайся к ней так: a.block { и тут уже пиши для неё все стили, которые хочешь применить}

p.s. - дай мне посмотреть твой полный код

Edited by psywalker
Link to comment
Share on other sites
  • 0
termoplus Explorer

termoplus

Posted
  • Author
Posted

неа, так и делал, ниче интересного....

a:link {color: #3b8cd8; text-decoration: underline;}

a.block {

background: url(images/ar.jpg) no-repeat right top;

padding:10px 0;

padding-right:25px;

}

<p class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce augue ligula, eleifend a, ornare eu, fringilla id, turpis. <span class="block"><a href="#">Ut auctor lacus at magna. Cras pulvinar.</a></span> </p>

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

да конечно же не будет работать, ты же ставишь Класс Спану, а стили прописываешь к ссылке, вот я сделал так и у меня всё прекрасно работает везде!

<style type="text/css">

a {color: #3b8cd8; text-decoration: underline;}
span.block {
background: url(images/ar.jpg) no-repeat right top;
padding:10px 0;
padding-right:25px;

}
</style>
<title></title>
</head>

<body>
<p class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce augue ligula, eleifend a, ornare eu, fringilla id, turpis. <span class="block"><a href="#">Ut auctor lacus at magna. Cras pulvinar.</a></span> </p>

</body>

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)
а зачем ещё в спан оборачивать? низя сразу ссылке ставить класс с картинкой?

тоже подумал об этом, но раз автор так хочет, то это его личные дела :)

p.s. - кстати ты чё пропал-то? :D

Edited by psywalker
Link to comment
Share on other sites
  • 0
termoplus Explorer

termoplus

Posted
  • Author
Posted

спасибо всем.

а если очень нужно использовать display:block чтобы строчка опустилась на строчку вниз плюс возможность использовать margin-top, но не без фиксированной ширины, так как строчки у меня разные...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept