adjust border bottom top

Asked

Viewed 31 times

-2

opa, so I’m making a menu and I put a border-bottom on :Hover it but I think q this very tight with the menu wanted to give a space between them but I’m not getting, I tried to increase the height but without success

html {
 background-color: rgb(240, 240, 240);
}
body {
 width: 100%;
 height: 100%;
 margin: 0 auto;
}
.nav {
 margin-left: -0.6%;
 box-shadow: 
     0 1px 5px rgb(0 0 0 / 10%),
     0 2px 2px rgb(0 0 0 / 6%),
     0 0 2px rgb(0 0 0 / 7%);
 height: 75px;
}
ul {
 padding: 0px !important;
}
.menu {
 margin: 0px;
 margin-left: 20%;
}
.menu li {
 padding: 0px;
 display: inline-block;
 margin-top: 30px;
 padding-left: 10px;
}
.menu li a {
 color: #404040;
 font-family: Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 font-weight: 600;
 font-size: 15px;
  height: 100px;
}
a {
 text-decoration: none;
}
.menu li a:hover {
 color: #00bac6;
}
.menu li:hover {
 border-bottom: 3px solid #00c1cf;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900|Crete+Round:400,400i&amp;display=swap" rel="stylesheet">
    <title>Como aprender HTML, CSS e Javascript</title>
</head>
<body>
    <header class="header-1">
        <nav class="nav">
            <ul class="menu" type="none">
                <li><a href="#"  style="height: 80px !important;">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">More about us</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

html {
 background-color: rgb(240, 240, 240);
}
body {
 width: 100%;
 height: 100%;
 margin: 0 auto;
}
.nav {
 margin-left: -0.6%;
 box-shadow: 
     0 1px 5px rgb(0 0 0 / 10%),
     0 2px 2px rgb(0 0 0 / 6%),
     0 0 2px rgb(0 0 0 / 7%);
 height: 75px;
}
ul {
 padding: 0px !important;
}
.menu {
 margin: 0px;
 margin-left: 20%;
}
.menu li {
 padding: 0px;
 display: inline-block;
 margin-top: 30px;
 padding-left: 10px;
}
.menu li a {
 color: #404040;
 font-family: Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 font-weight: 600;
 font-size: 15px;
  height: 100px;
}
a {
 text-decoration: none;
}
.menu li a:hover {
 color: #00bac6;
}
.menu li:hover {
 border-bottom: 3px solid #00c1cf;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900|Crete+Round:400,400i&amp;display=swap" rel="stylesheet">
    <title>Como aprender HTML, CSS e Javascript</title>
</head>
<body>
    <header class="header-1">
        <nav class="nav">
            <ul class="menu" type="none">
                <li><a href="#"  style="height: 80px !important;">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">More about us</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

html {
 background-color: rgb(240, 240, 240);
}
body {
 width: 100%;
 height: 100%;
 margin: 0 auto;
}
.nav {
 margin-left: -0.6%;
 box-shadow: 
     0 1px 5px rgb(0 0 0 / 10%),
     0 2px 2px rgb(0 0 0 / 6%),
     0 0 2px rgb(0 0 0 / 7%);
 height: 75px;
}
ul {
 padding: 0px !important;
}
.menu {
 margin: 0px;
 margin-left: 20%;
}
.menu li {
 padding: 0px;
 display: inline-block;
 margin-top: 30px;
 padding-left: 10px;
}
.menu li a {
 color: #404040;
 font-family: Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 font-weight: 600;
 font-size: 15px;
  height: 100px;
}
a {
 text-decoration: none;
}
.menu li a:hover {
 color: #00bac6;
}
.menu li:hover {
 border-bottom: 3px solid #00c1cf;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900|Crete+Round:400,400i&amp;display=swap" rel="stylesheet">
    <title>Como aprender HTML, CSS e Javascript</title>
</head>
<body>
    <header class="header-1">
        <nav class="nav">
            <ul class="menu" type="none">
                <li><a href="#"  style="height: 80px !important;">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">More about us</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

html css
  • 1

    Jorge try to give more details, if possible put a print signaling better what is this space you refer to

  • I don’t understand the question.

2 answers

0

I think it’s easier to write CSS when using the universal selector at the beginning of the code with box-sizing: border-box; which makes the height and width include the size of the padding. So the changes I would make would be: At the beginning of css code would put:

* {
box-sizing: border-box;
margin: 0;
}

On the Nav tag would put display: flex; logo would stand:

.nav {
box-shadow: 0 1px 5px rgb(0 0 0 / 10%), 0 2px 2px rgb(0 0 0 / 6%), 0 0 2px rgb(0 0 0 / 7%);
height: 75px;
display: flex;
}

And in the . menu and . menu li put:

.menu {
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
width: 500px;
}

.menu li {
padding: 10px;
display: inline-block;
}

I hope I’ve helped.

0

Hello,

I revised your code and changed the margin and the padding of your .menu read to and .menu li. I added a Transition-Duration to make the Hover more fluid.

Tip: When trying to adjust the margin and padding, use border: 3px Solid black;, so you’ll have an idea of what needs to be adjusted.

html {
    background-color: rgb(240, 240, 240);
}

body {
    height: 100%;
    margin: 0 auto;
    width: 100%;
}

.nav {
    box-shadow: 
        0 1px 5px rgb(0 0 0 / 10%),
        0 2px 2px rgb(0 0 0 / 6%),
        0 0 2px rgb(0 0 0 / 7%);
    margin-left: -0.6%;
}

ul {
    padding: 10px 0px 10px 0px !important;
}

.menu {
    margin: 0px;
    margin-left: 20%;
}

.menu li {
    display: inline-block;
    margin: 15px 5px;
    padding: 20px 5px;
}

.menu li a {
    color: #404040;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 10px 10px;
    text-transform: uppercase;
}

a {
    text-decoration: none;
}

.menu li a:hover {
    border-bottom: 3px solid #00c1cf;
    transition-duration: 0.2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900|Crete+Round:400,400i&amp;display=swap" rel="stylesheet">
    <title>Como aprender HTML, CSS e Javascript</title>
</head>
<body>
    <header class="header-1">
        <nav class="nav">
            <ul class="menu" type="none">
                <li><a href="#"  style="height: 80px !important;">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">More about us</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.