Issue
so for some reason when I have these icons and this div positioned at the top right of the screen, the images and the div that'll contain the system time aren't resting on the same line together. Not really too sure why.
I've tried messing around with the margin settings of the list items because I've seen that the list items themselves have a weird margin that affects their height whilst the actual images themselves do not have this issue. Setting display to inline did not work.
body {
/* background-color: rgb(8, 5, 32); */
background-image: url(https://512pixels.net/downloads/macos-wallpapers/10-14-Night.jpg);
background-size: cover;
}
#system-time {
color: rgba(255, 255, 255, 0.863);
font-family: 'SF Pro Display';
font-size: 15px;
padding: 0px;
}
.nav-list {
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
}
.nav-list li {
display: inline-block;
margin-left: 6px;
margin: 0px;
padding: 0px 2px;
}
.nav-list img {
filter: invert(100%);
-webkit-filter: invert(100%);
width: 18px;
height: auto;
/* border: 2px solid; */
}
.grid-container {
display: grid;
height: 100vh;
place-items: center;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<title>luke's desktop</title>
<link rel="stylesheet" href="styles\style.css">
</head>
<body>
<nav class="navbar">
<ul class="nav-list">
<li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Speaker_Icon.svg/2048px-Speaker_Icon.svg.png" href=""></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Globe_icon.svg/2048px-Globe_icon.svg.png" href=""></li>
<li><img src="https://static.thenounproject.com/png/1841400-200.png" href=""></li>
<li>Tue 9 Jan 20:18</li>
</ul>
</nav>
<div class="grid-container">
<div class="login">
<div id="profile-pic">
<img src="assets/dp.jpg" width="180px" height="180px">
<div id="username">User</div>
</div>
<form id="passwordForm">
<input type="password" id="password" name="password" placeholder="Enter your password">
</form>
</div>
</div>
</body>
</html>Solution
Use flexbox on the ul rather than display: inline-block on the li.
body {
background-color: rgb(8, 5, 32);
}
#system-time {
color: white;
font-family: 'SF Pro Display';
font-size: 15px;
padding: 0px;
}
.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
}
.nav-list li {
margin-left: 6px;
padding: 0px 2px;
}
.nav-list img {
filter: invert(100%);
-webkit-filter: invert(100%);
width: 18px;
height: auto;
/* border: 2px solid; */
}<nav class="navbar">
<ul class="nav-list">
<li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Speaker_Icon.svg/2048px-Speaker_Icon.svg.png"></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Globe_icon.svg/2048px-Globe_icon.svg.png"></li>
<li><img src="https://static.thenounproject.com/png/1841400-200.png"></li>
<li id="system-time">Tue 9 Jan 20:18</li>
</ul>
</nav>Answered By - Paulie_D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.