Ссылка двигается при наведении

[acelotuse]

Извините, если уже было. Не знаю как в поиске вбить, пробовал не нашел. Видел на одном сайте, что при наведении на ссылку она помимо того что меняла цвет и становилась подчеркнутой еще и сдвигалась слегка вправо. Как это в css реализовать? padding нужно прописывать или как?

И еще вопрос: код цвета #ff0000 коротко будет выглядеть как #f00? или #ff0? я не могу понять как укорачивать коды.

 

[vladimir1987]

Вы сами на свой вопрос ответели: нужен padding, либо margin, в зависимости от ситуации

 

[TwistedAndy]

Извините, если уже было. Не знаю как в поиске вбить, пробовал не нашел. Видел на одном сайте, что при наведении на ссылку она помимо того что меняла цвет и становилась подчеркнутой еще и сдвигалась слегка вправо. Как это в css реализовать? padding нужно прописывать или как?
И еще вопрос: код цвета #ff0000 коротко будет выглядеть как #f00? или #ff0? я не могу понять как укорачивать коды.

Ну для ссылки с псевдоклассом hover (a:hover) задаете в CSS дополнительные margin'ы

 

[rafic]

HTML:

<a href="#"></a>

CSS:

a:hover{
  margin-left:30px;
}

или можно все усложнить )

<div id="link">
  <a class="link1" href="#">Ссылка</a>
  <a class="link2" href="#">Ссылка</a>
</div>

#link{position:relative; width:400px; height:20px;}
#link a{position:absolute; width:100px; height:20px; display:block;}
.link1{left:0;top:0;}
.link1:hover{top:0; left:50px;}
.link2{right:0;top:0;}
.link1:hover{top:0; right:50px;}

 

[troop3r]

при наведении на ссылку она помимо того что меняла цвет и становилась подчеркнутой еще и сдвигалась слегка вправо. Как это в css реализовать?

a { color: red; }
a:hover { color: blue; padding-left: 10px; }

10 - меняем на нужное значение.
red/blue - цвет ссылки до/после наведения.

код цвета #ff0000 коротко будет выглядеть как #f00? или #ff0?

f00

#ffffff - #fff, #335566 - #356, #ffeecc - #fec, и так далее.

 

[acelotuse]

Всем спасибо. Тему можно закрыть. Думаю, обойдусь простым margin-left:3px. Нужды в более сложных кодах не вижу.
ЗЫ. Вообще-то первые несколько постов содержали в себе ту же самую информацию, что и последние три. Но почему-то их дерзко удалили. Хотя именно они мне и помогли. askarbin и The Finn ответили исчерпывающе.

 

[troop3r]

acelotuse, еще можешь использовать "text-indent" - это правило задает отступ от левого края блока.

text-indent: 3px; - отступ слева 3px.

работает только для первой строки и для блочных ссылок.