CODEWITHSUNDEEP
htmlcssborder
user3809602
user3809602

Reputation:

Borders css/html

I have a problem with the css for my web page. Basically, I want to make it so when you hover over one of the links in the navigation bar, it puts a border around it. So, this is what I made:

     a
     {
       text-align: center;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
       font-size: 20px;
       font-weight: bold;
       color: #4096ee;
       text-decoration: none;
       postion: absolute;
     }
     a:visited
      {
        font-weight: bold;
        color: #4096ee;
        text-decoration: none;
      }
     a:hover
     {
     font-weight: bold;
     border-radius: 5px;
     color: #4096ee;
     padding: 4px;
     border: solid 2px;
     border-color: #303030;
     text-decoration: none;
     }
     a:active
     {
     font-weight: bold;
     color: white;
     text-decoration: none;
     }

And then I have 4 links on the same line with 4 &emsp in between them. Now, whenever I hover over a link, the border appears, but it kind of nudges the other links over to make space for the border. Is there any way I can stop this from happening?

Upvotes: 1

Views: 70

Answers (6)

amol
amol

Reputation: 1555

Add default 2px border to anchor tag, but make it tranparent. So it will not visible at first time when page is loaded. Then when you hover any anchor tag, change the border-color to #303030

Try this code

a{ 
  border: 2px solid transparent;
}
a:hover{
  border-color: #303030;
}

Upvotes: 0

Dzhambazov
Dzhambazov

Reputation: 500

   a{
       text-align: center;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
       font-size: 20px;
       font-weight: bold;
       color: #4096ee;
       text-decoration: none;
       postion: absolute;
       border: 2px solid transparent;
     }

Just add a border with the same width (in your case 2px) but make it transparent and that's all.

Upvotes: 0

Bellian
Bellian

Reputation: 2150

You can just add a padding to the regular links. The hover state will override the regular padding and add the border.

a {
    text-align: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
    font-size: 20px;
    font-weight: bold;
    color: #4096ee;
    text-decoration: none;
    padding: 6px;
    postion: absolute;
}

http://jsfiddle.net/5dQL5/

Upvotes: 0

Koby Douek
Koby Douek

Reputation: 16693

Change your CSS like this:

     a
     {
       text-align: center;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
       font-size: 20px;
       font-weight: bold;
       color: #4096ee;
       text-decoration: none;
       postion: absolute;
       border-radius: 5px;
       padding: 4px;
       border-color: transparent;
     }

This way there will be no nudging.

Upvotes: 0

qtgye
qtgye

Reputation: 3610

try adding box-sizing : border-box to your css. This would make the border to go inside the element.

Upvotes: 0

Bubunyo Nyavor
Bubunyo Nyavor

Reputation: 2570

why dont you put a border on the items and make it the same color as your background and simply change color on hover

Upvotes: 1

Related Questions