The navigation bar is not showing up at the top of my webpage as expected, instead, it is displaying

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>

Screenshot of problem

Answer №1

Is this accurate? Is this how you prefer it to be?

#divname {
background-color:yellow;
text-align:center;
padding-top:100px;
padding-bottom: 75px;
margin: auto;
}

div ul li{
display:inline;

margin-right: 10px;

}

#nav1 {



display:inline-block;
background-color:blue;


}


#nav2 {
float:right;
display:inline;
margin:8px;
background-color:blue;

}
footer li {

float: left;
margin:8px;
display:inline;

}

#rightbar li{
float:right;
}
<html>
<head>
<title> Google.ca </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="StackQ.css"/>
</head>
<body>
<div id="nav1">
<ul style="list-style-type:none;">
<li> <a href="" >About</a></li>
<li> <a href="" >Store</a></li>
</ul>
</div>
<div id="divname">
<div id="top">

<div 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/"> <img src="user.png" /></a></li>
</ul>
</div>
</div>
<div id="a">
<img src="logo.png">
</div>
</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The function in PHP does not arbitrarily return a boolean value

After creating a template file for WordPress, I encountered an issue with a function that I wrote. Despite ensuring that the two variables are different (as I confirmed by printing them), the function consistently returns true. Even after testing and attem ...

Error encountered when attempting to reinitialize DataTable while iterating through multiple tables and searching within tabs

Currently, I am utilizing DataTable to display 3 separate tables with the help of tabs, along with a search function. However, every time I load the page, I encounter a reinitialization error. Here is the snippet of my code: _datatables.forEa ...

The div does not allow elements to be centered

I am facing an issue where elements are not centering on my div. I have tried numerous solutions (so many that I finally decided to create a Stack Overflow account), but nothing seems to work. Interestingly, the elements center on PC but for some reason, ...

Tips for creating a form with recurring elements efficiently

Currently struggling to summarize the issue at hand with a simple title, so here's the detailed explanation: Imagine I'm inputting information for multiple contacts, and there are various fields involved: Name of the contact Method of Contact ...

The paintbrush is whimsically altering its style on the canvas

My checkerboard has a unique feature where hovering over a tile will highlight it in yellow. Surprisingly, this action also turns the game border and the last white checker's border yellow as well. What's puzzling is that I never specified for t ...

When the screen size decreases, HTML images do not adjust accordingly

Hey there, I'm just diving into the HTML and CSS world with FreeCodeCamp's curriculum. The second project involves creating a survey/form, which I've managed to put together quite nicely--except for one small issue with the images. While the ...

Different Ways Split Button Format Can Vary Based on Web Browser

I am encountering a formatting issue with a jQuery splitbutton on my webpage. In order to adhere to my company's design standards, I am essentially converting a link into a button. The functionality works perfectly fine; however, depending on the brow ...

Generate text in reStructuredText with columns

I'm attempting to style a reStructuredText segment in the following layout: type1 : this type4 : this type7 : this type2 : this type5 : this type8 : this type3 : this type6 : this type9 : this I want to fill the page with tex ...

Eliminating table rows using jQuery

In order to remove table rows from the table below: <div id="tabel"> <table class="tg"> <thead> <tr><td colspan=3>How can I delete rows from a table using jQuery</td></tr> <t ...

What is the best way to ensure my dropdown menu closes whenever a user clicks anywhere on the page? (javascript)

I have created a dropdown that appears when the user clicks on the input field, but I would like to remove the active class so that the dropdown disappears if the user clicks anywhere else on the page. Here is my code snippet: // drop-down menu functi ...

Struggling to Align NAV buttons to the Right in React Framework

My current Mobile Header view can be seen here: https://i.stack.imgur.com/CcspN.png I am looking to achieve a layout similar to this, https://i.stack.imgur.com/pH15p.png. So far, I have only been able to accomplish this by setting specific left margins, ...

PHP's 'include' function is now being ported into modern Javascript as a new method

As the library of JS frameworks continues to expand, I'm wondering if there is a simple JS replacement or alternative for PHP's 'include' function. Is PHP include still a relevant method for including chunks of code, or are there better ...

Exploring the mechanics of aligning a div using Bootstrap 4

I recently found a code snippet that beautifully centers a login box, which I implemented. However, I realized that I actually wanted the login box to be positioned 25% from the left instead of 50%. The interesting part is, the code doesn't follow the ...

What is the most effective method for integrating Bootstrap CSS into an Angular project?

When incorporating a Bootstrap CSS file into an Angular project that has already been added using yarn add <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c6dcc3dcc3">[email protected]</a>, th ...

Is there a way to retrieve the modal's viewport height in Angular?

Is it possible to determine the viewport height of my ng bootstrap modal within my Angular application? Here is what I currently have: I have a modal with CSS styling as shown below: .modal-xxl { width: 95% !important; max-height: 90% !important; ...

AngularJS and the Angular UI Router were combined for the first time in

Hey everyone, I could really use some help as I'm just diving into the world of AngularJS. Can anyone guide me on how to tackle these pesky errors? Error: app.js:6 > Uncaught ReferenceError: angular is not defined Error: angular.min.js:6 > Unc ...

template not being loaded with form

My Django form is not showing up when I try to implement it. Even after checking the browser's inspector, there is no sign of it being loaded at all. If more information is required, please let me know. Here is the project structure: /beerad url ...

What is the best method for saving and accessing a user-entered date using session storage?

https://i.sstatic.net/I8t3k.png function saveDateOfBirth( dob ) { sessionStorage.dateOfBirth = dob; } function getDateOfBirth() { document.getElementById("confirm_dob").textContent = sessionStorage.dateOfBirth; } function pr ...

Is there a way to retrieve user input without having to submit the form?

I am looking to capture user input without the need for submission, and then pass it through an AJAX method as a parameter to an action. Despite trying various methods, I have not been able to find a solution. Below is the code snippet: <input type="t ...

Unable to make the Show/Hide Loading GIF function work as intended

Could someone please help me with my code? I'm trying to display a loading GIF image while waiting for an ajax request to complete. When the button is pressed, I want the loader to be shown until the data is returned from the server. I would greatly ...