You can add box-sizing: border-box to .menu a to fix the size of the anchor.
Regarding:
there are some spaces along the contents of the sidebar and I haven’t figured out a way to strictly cover the whole sidebar with its background color
Not so sure what you mean here, if you mean the white margin around it, you need to remove marding from the body.
body {
margin: 0;
}
Or use normalize.css
For the sidebar, consider using a fixed position with a height of 100vh units. This will fix it to the height of the viewport!
You need them on the sidebar class!
Be sure to also get rid of the user agent margin by following this suggestion: https://stackoverflow.com/a/71629532/7795815
Hello guys i have a problem with my sidebar, as you can see there are some spaces along the contents of the sidebar and I haven’t figured out a way to strictly cover the whole sidebar with its background color . On top of that I have a problem as well with my menu hover. Whenever I hover the background color goes outside the sidebar.
Here are the codes for the html and css.
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body{
min-height: 100vh;
display: flex;
}
.content{
flex-grow: 1;
display: flex;
}
.innter-text{
margin: auto;
}
h3{
font-family: 'Raleway', sans-serif;
font-size: 16px;
text-align: center;
color: white;
margin-top: 0;
}
h3:hover{
background-color: #9e9b9b;
color: #1c1c1c;
height: 60px;
margin-top: -17px;
padding-top: 17px;
}
.sidebar{
height: 100%;
min-width: 245px;
z-index: 1;
top: 0;
left: 0;
background-color: #262626;
padding-top: 20px;
}
.sidebarlogo{
max-width: 245px;
}
.header{
height: 60px;
background-color: #5c5b5b;
padding-top: 17px;
}
.menu a{
font-family: 'Raleway', sans-serif;
padding: 15px 6px 15px 16px;
text-decoration: none;
font-size: 17px;
color: white;
display: flex;
width: 100%;
overflow: auto;
}
.menu a:hover {
min-width: 100%;
Background-color: #1b1b1b;
text-decoration: underline;
}
.fa-building-columns{
padding-right: 12px;
font-size: 39px;
}
.fa-books{
padding-right: 12px;
font-size: 39px;
}
.fa-users{
padding-right: 12px;
font-size: 32px;
}
.fa-megaphone{
padding-right: 12px;
font-size: 36px;
}
.fa-arrow-right-from-bracket{
padding-right: 12px;
font-size: 39px;
}<!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="icon" type="image/x=icon" href="form.png">
<link rel="stylesheet" href="adminpagecss.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
<title>Administrator Page</title>
</head>
<body>
<aside class="sidebar">
<span>
<img class="sidebarlogo" src="sidebarlogo1.jpg">
<div class="header">
<h3>Welcome to the Admin Page!</h3>
</div>
<br>
<div class="menu">
<a href="Login.html" class="p"><i class="fa-regular fa-building-columns"></i>Institution Page</a>
<a href="#"><i class="fa-light fa-books"></i>My Courses</a>
<a href="#"><i class="fa-light fa-users"></i>Student Roster</a>
<a href="#"><i class="fa-regular fa-megaphone"></i>Announcements</a>
<br><br><br><br><br><br><br><br>
<a href="labtask 6.html"><i class="fa-light fa-arrow-right-from-bracket"></i>Log out</a>
</div>
</span>
</aside>
<main class="content">
<span class="innter-text">Content area</span>
</main>
</body>
</html>I would love to hear your suggestions and possibly solutions to my problems thank you!
Could you explain what ‘there are some spaces along the contents of the sidebar’ means as I can;t see what these are.
I meant the white margin along the edges of the sidebar. I’m sorry I’m fairly new to html.
Thank you rjerue! All is good now because of you and MattAndDev!