I am encountering some difficulties with my online portfolio. The page layout includes a navigation bar on the right side and an image as the background in the same div. I am trying to add introductory text to my portfolio, but whenever I do so, the nav bar moves down. Is there a solution to this issue?
Below is the code I've been using:
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
*{
margin: 0 auto;
padding: 0;
}
#wrapper {
margin: 0 auto;
}
#background {
display: block;
background-image: url(images/profile/Untitled-1.jpg);
background-repeat:no-repeat;
background-size:contain;
-webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
filter: grayscale(80%);
margin: 0 auto;
border: 1px solid black;
}
header {
margin-left: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
p {
display: block;
width: 20%;
font-size: 40px;
color: antiquewhite;
padding: 0;
margin: 0 auto;
}
body {
background-color: black;
}
footer{
color: antiquewhite;
}
h1 {
font-family:'Fjalla One', sans-serif;
color: floralwhite;
font-size: 300%;
}
ha {
display: block;
width: 50%;
font-family:'Titillium Web', sans-serif;
color: floralwhite;
font-size: 100%;
}
nav {
display: block;
margin-left: 80%;
border: 2px solid orange;
margin-bottom: 40%;
}
li{
display: inline-block;
padding: 20px;
margin: 9px 0px;
border-radius: 50px 0px 0px 50px;
border: 2px solid white;
width: 250px;
height: 50px;
text-align: center;
text-shadow: 2px 2px black;
font-size: 150%;
font-family: 'Fjalla One', sans-serif;
background-color: dimgray;
position: relative;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: transform;
transition-property: transform;
}
.stretch:hover {
-webkit-transform: translateX(-25px);
}
@keyframes extend{
from {width: 200px; left:0px;}
to {width: 600px; left: 200px;}
}
li:hover{
-webkit-animation-name: "extend";
-webkit-animation-duration: 2s;
animation-direction: reverse;
}
a:link {
text-decoration: none;
color: antiquewhite;
}
a:visited {
text-decoration: none;
color: antiquewhite;
}
a:hover {
text-decoration: none;
color: antiquewhite;
}
a:active {
text-decoration: none;
color: antiquewhite;
} <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" media="screen" href="home.css">
<title>Tavyon Richardson</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<script src="jquery-3.1.1.min.js">
</script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Tavyon Richardson</h1>
</header>
<p><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my latest projects and resume.</p>
<div id="background">
<nav id="navbar">
<ul>
<li class="stretch"><a href="">About me</a></li>
<li class="stretch"><a href="">Courses</a></li>
<li class="stretch"><a href="http://tavyonrichardson.com/projects.html">Projects</a></li>
<li class="stretch"><a href="http://tavyonrichardson.com/nms_114/blog">Blog</a></li>
<li class="stretch"><a href="">Resume</a></li>
</ul>
</nav>
<footer>last updated November 2016</footer>
</div>
</div>
</body>
</html>