1 I attempted to build a model Google site to enhance my HTML and CSS skills, but I encountered an unusual issue where my navigation menu is showing up inside my image div, even though it was created before that. I have given backgrounds to the navs and img container to aid in debugging. Any help would be greatly appreciated. I have shared my code on jsFiddle, and I'm trying to get the blue elements (nav) on top but can't understand why they are inside the div.
https://jsfiddle.net/thd2vh2b/1/4
Your assistance is highly valued. Thank you.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Google.ca </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
nav {
padding:0;
margin:0;
background-color: blue;
}
div {
background-color:yellow;
text-align:center;
padding-top:100px;
padding-bottom: 75px;
margin: auto;
}
nav ul li{
display:inline;
display:inline;
margin-right:
}
#nav1 {
float:left;
display:inline;
}
#nav2 {
float:right;
display:inline;
margin:8px;
}
footer li {
float: left;
margin:8px;
display:inline;
}
#rightbar li{
float:right;
}
</style>
</head>
<body>
<div id="top">
<nav id="nav1">
<ul style="list-style-type:none;">
<li> <a href="" >About</a></li>
<li> <a href="" >Store</a></li>
</ul>
</nav>
<nav id="nav2">
<ul style="list-style-type:none;">
<li> <a href="" >Gmail</a></li>
<li> <a href="" >Images</a></li>
<li> <a href="https://www.google.ca/intl/en/about/products/"><img src="gsquare.png" ></a></li>
<li><a href="https://support.google.com/accounts/answer/1714464"> <img src="gbell.png" ></a></li>
<li><a href="https://accounts.google.com/ServiceLogin/"><li> <img src="user.png" ></a></li>
</ul>
</nav>
</div>
<div>
<img src="logo.png";>
</div>
<footer id="rightbar";>
<ul style="list-style-type:none;">
<li><p>Privacy</p></li>
<li><p> Terms </p></li>
<li><p> Settings</p></li>
</ul>
</footer>
<footer>
<ul style="list-style-type:none;">
<li><p>Advertising</p></li>
<li><p> Business</p></li>
<li><p> Business</p></li>
</ul>
</footer>
</body>
</html>