CODEWITHSUNDEEP
htmlcsshover
user10761756
user10761756

Reputation:

Problems with borders

I have one problem with my border. The problem is that I have 2 different borders: one that is on the "DUCO" button (my name) and one that creates itself when you hover over the text. The problem is that that the borders aren't the same size. can anyone help? (you cant see the background but that is no big deal)

Thanks 

*
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

header
{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.hoofd-nav
{
    float: right;
    list-style: none;
    margin-top: 30px;
}
    
.hoofd-nav li
{
    display: inline-block;
}

.hoofd-nav li a
{
    color: white;
    text-decoration: none;
    padding: 5px 20px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
}
.hoofd-nav li.actief
{
    border: 3px solid white;
}

.hoofd-nav li a:hover
{
    border: 3px solid white;
}
<!DOCTYPE html>
<html>
<head> 
    <title> Duco's Blog </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    
<body> 
    <header>
        <div class="rij">
        <ul class="hoofd-nav">
            <li class="actief"><a href=""> Duco </a></li>
            <li><a href=""> Hobbys </a></li>
            <li><a href=""> Dromen </a></li>
        </ul>
        </div>
    </header>
</body>
</html>

Upvotes: 0

Views: 56

Answers (2)

SuperDJ
SuperDJ

Reputation: 7661

It would be easier to set the .active class on the a tag.Then you can also set a transparent border to remove the wobble.

The problem is comming from the mixing of both a and li tags. So the example is for the a tag but might as well be the li tag.

*
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

header
{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(straat.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.hoofd-nav
{
    float: right;
    list-style: none;
    margin-top: 30px;
}
    
.hoofd-nav li
{
    display: inline-block;
}

.hoofd-nav li a
{
    color: white;
    text-decoration: none;
    padding: 5px 20px;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    border: 3px solid transparent; /* Remove wobble */
}
.hoofd-nav li a.actief
{
    border: 3px solid white;
}

.hoofd-nav li a:hover
{
    border: 3px solid white;
}
<!DOCTYPE html>
<html>
<head> 
    <title> Duco's Blog </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    
<body> 
    <header>
        <div class="rij">
        <ul class="hoofd-nav">
            <li><a href="" class="actief"> Duco </a></li>
            <li><a href=""> Hobbys </a></li>
            <li><a href=""> Dromen </a></li>
        </ul>
        </div>
    </header>
</body>
</html>

Upvotes: 1

Anis R.
Anis R.

Reputation: 6922

It seems that your static border (the one on "DUCO") and the other border (the one that appears when hovering over "DUCO") are not borders of the same element!

The static one is a border for the li while the other one is applied on the a tag inside the li.

Try making both border properties applied on the same element, and it should work fine.

Upvotes: 0

Related Questions