Issue
https://i.stack.imgur.com/3hzl7.png
So I am creating my website and my navbar isn't in line with title (h1). How do I fix it?
#header {
background-color: #39A15A;
}
#navigation {
overflow: hidden;
}
ul {
list-style-type: none;
}
li {
display: inline;
float: right;
}<!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">
<title>Learning</title>
</head>
<header>
<div id="header">
<h1>Filip Moslavac</h1>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Contact Page/contact.html">Contact</a></li>
<li><a href="Project Page/projects.html">Projects</a></li>
</ul>
</div>
</div>
</header>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
</div>
<div id="footer">
Copyright © 2021 Filip Moslavac
</div>
</body>
</html>Solution
You can try using display: flex; on your header and align-items: baseline; to get them in line with your header.
I also added a few additional styles to clean it up. I put a display: flex; on your #header ul and added a gap to space the list items.
#header {
background-color: #39A15A;
display: flex;
justify-content: space-between;
align-items: baseline;
}
#header ul {
display: flex;
gap: 20px;
}
#navigation {
overflow: hidden;
}
ul {
list-style-type: none;
}
li {
padding: 15px;
}
footer {
position: fixed;
bottom: 0;
height: 30px;
background-color: lightgrey;
width: 100%;
justify-content: center;
display: flex;
align-items: center;
min-height: calc(30px - 100vh);
}
body {
margin: 0;
}
#content {
padding: 15px;
}
h1 {
padding: 15px;
}<!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">
<title>Learning</title>
</head>
<header>
<div id="header">
<h1>Filip Moslavac</h1>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Contact Page/contact.html">Contact</a></li>
<li><a href="Project Page/projects.html">Projects</a></li>
</ul>
</div>
</div>
</header>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
</div>
<div id="footer">
<footer>Copyright © 2021 Filip Moslavac</footer>
</div>
</body>
</html>Answered By - カメロン
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.