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

Тема в разделе "Веб-дизайн", создана пользователем acelotuse, 15 ноя 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. acelotuse

    acelotuse

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

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

    vladimir1987 Прохожие

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

    TwistedAndy Постоялец

    Регистр.:
    17 июл 2009
    Сообщения:
    108
    Симпатии:
    22
    Ну для ссылки с псевдоклассом hover (a:hover) задаете в CSS дополнительные margin'ы
     
    acelotuse нравится это.
  4. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    HTML:
    HTML:
    <a href="#"></a>
    CSS:
    Код:
    a:hover{
      margin-left:30px;
    }
    или можно все усложнить :))
    HTML:
    <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;}
     
    acelotuse нравится это.
  5. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    a { color: red; }
    a:hover { color: blue; padding-left: 10px; }

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

    f00

    #ffffff - #fff, #335566 - #356, #ffeecc - #fec, и так далее.
     
    acelotuse нравится это.
  6. acelotuse

    acelotuse

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

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    acelotuse, еще можешь использовать "text-indent" - это правило задает отступ от левого края блока.

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

    работает только для первой строки и для блочных ссылок.
     
    acelotuse нравится это.
Статус темы:
Закрыта.