Как убрать эту уродливую границу в моей ссылке с фоновым изображением? - PullRequest
0 голосов
/ 22 февраля 2011

Я делаю навигационное меню с фоновыми изображениями. Мне удалось стереть текст с отступа текста, но он показывает очень уродливую границу при нажатии на ссылку. Как мне избавиться от границы? Мой CSS ниже Gven;

       #menu{
  width:670px;
  float:right;
      }

    #menu ul{
    padding-top:10px;
     }
      #menu ul li{
        list-style-type:none;
     display: block;
      float:left;
    width:163px;
     height:270px;
     }

   #menu ul li a{
   height:270px;
    display: block;
    width:163px;
    text-indent:-9999px;
    border:none;
      }
     .box_1{
      background: url(images/box_1.png) no-repeat;
      width:163px;
     height:268px;
     border:none;
     }

     .box_2{
    background: url(images/box_2.png) no-repeat;
    width:163px;
    height:268px;
    border:none;
       }

    .box_3{
     background: url(images/box_3.png) no-repeat;
     width:163px;
    height:268px;
    border:none;
     }

     .box_4{
     background: url(images/box_4.png) no-repeat;
     width:163px;
     height:268px;
     border:none;
     }

И мой HTML:

<div id="menu">
<ul>
<li><a class="box_1" href="#">creative solutions</a></li>
 <li><a class="box_2" href="#">dynamic development</a></li>
 <li><a href="#" class="box_3">unlimited opportunities</a></li>
 <li><a  class="box_4" href=#">exceptional approach</a></li></ul>
 </div>

Заранее спасибо за помощь !!

Ответы [ 5 ]

9 голосов
/ 22 февраля 2011

Вы имеете в виду пунктирный контур?Удалите его так:

a {
   outline: 0;
}

Возможно, вы захотите добавить альтернативный стиль фокуса.Смотри здесь .

2 голосов
/ 22 февраля 2011

Применение другого стиля CSS:

#menu ul li a:active {
    border:none;
}
1 голос
/ 22 февраля 2011

Пунктирная линия?

a {outline:0}

0 голосов
/ 07 января 2013

Попробуйте эту строку в верхней части вашего CSS-файла,

* :focus { outline: 0; }
0 голосов
/ 22 февраля 2011

Возможно, вы говорите о некрасивой пунктирной рамке, которая появляется, когда элемент (в вашем изображении) получает фокус (щелчком или нажатием вкладки).

Использование свойства css:

outline: none;
...