The horizontal navigation bar will not extend the entire length of the page


I'm facing an issue with my horizontal navigation bar as it doesn't span the entire screen. I need help figuring out how to make it full-width. You can see what I mean here. Additionally, once the navigation bar spans the screen, I want the image to appear on top of the nav bar instead of above it. Any guidance or suggestions would be greatly appreciated.

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

nav li {
    list-style-type: none;
    display: inline-block;
    padding: 1em;
    background-color: aqua;
    float: right;
}

nav a {
    text-decoration: none;
    color: white;
    background-color: black;
    padding: 1em;
    font-size: 1.2em;
}

img#sushi {}

nav ul {

}
<a href=""><img src="../_images/imgres.jpg" id="Sushi" width="50" height="50" alt="Sushi"></a>
    <nav role="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>
    </nav>
</body>

htmlcss

Answer №1

When dealing with floated li elements, it's important to include overflow: auto; in the styling of the parent ul. This will ensure that the floated li items are contained within the ul and prevent the container from collapsing. Additionally, make sure to set the background color on the ul:

nav li {
  list-style-type: none;
  display: inline-block;
  padding: 1em;
  background-color: aqua;
  float: right;
}

nav a {
  text-decoration: none;
  color: white;
  background-color: black;
  padding: 1em;
  font-size: 1.2em;
}

img#sushi {}

nav ul {
  overflow: hidden;
  background-color: aqua;
}
<a href=""><img src="../_images/imgres.jpg" id="Sushi" width="50" height="50" alt="Sushi"></a>
<nav role="navigation">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact Us</a></li>
  </ul>
</nav>

P.S.: The image link provided doesn't show any content...

Answer №2

Include the following code in your navigation element:

<nav id='main-nav' role="navigation">

Next, add this CSS styling:

#main-nav {
width: 100%;
height: 150px; //Adjust as needed
}

Answer №3

To improve the layout, consider moving the float: right property from nav li to nav as shown below:

Adjust nav li with the following CSS:

nav li {
    list-style-type: none;
    display: inline-block;
    padding: 1em;
    background-color: aqua;
}

Add the float property to nav like so:

nav {
    float: right;
}

Answer №4

If you're unsure about element blocks and want to test them, you can add this CSS code:

* {
    border: 1px solid red !important;
}

You can see an example here.

Here are the solutions for your problem:

1st: Remove display: inline-block; from nav li and apply it to nav a instead

2nd: Move the image to the unordered list (ul)

3rd: Set the background color of the ul to aqua

/*CSS Reset*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

nav li {
    list-style-type: none;
    padding: 1em;
    background-color: aqua;
    float: right;
}

nav a {
    text-decoration: none;
    color: white;
    background-color: black;
    padding: 1em;
    font-size: 1.2em;
    display: inline-block;
}

img#sushi {}

nav ul {
    background: aqua;
}
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale:1.0">
  <link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>

<body>

  <nav role="navigation">
    <ul>
      <a href=""><img src="../_images/imgres.jpg" id="Sushi" width="50" height="50" alt="Sushi"></a>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </nav>

</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

What is the maximum number of JavaScript functions allowed in a single HTML file?

My HTML5 file includes JavaScript (created from CoffeeScript) directly within the HTML file, as I prefer this approach for my HTML/JavaScript programming. The code consists of four JavaScript functions that convert one temperature unit to another. Strang ...

javascripthtmlcoffeescript

The active link color for navigation in Bootstrap 4

I am trying to update the active menu links to display in green on my website. Despite various attempts, I have not been successful in changing the color. Can anyone provide guidance on how to proceed? My website is built with Bootstrap 4 and mdbootstrap. ...

cssbootstrap-4navigationbar

I can't seem to get the dropdown list to appear. What could be the issue?

I'm currently trying to create a pure CSS dropdown menu on hover by following this tutorial. However, despite multiple attempts, I'm still stuck and in need of some clear explanations for my issue. <div class="navbar"> ...

htmlcss

Generate a unique border using jQuery randomization techniques

I've been experimenting with creating a random number and having the border-radius of my div change on every pageload: <script> $(".card-body").each(function(){ var rand = Math.floor(Math.random() * 100) + 1; $(this).css( { borderRadius: rand ...

jquerycsshtmlbootstrap-4

What could be the reason that my Javascript function is not displaying in the HTML document?

I'm currently working on developing an HTML page that displays random quotes by Mark Twain. The function and array of quotes are set up in a separate Javascript file which is linked to the main HTML document. However, I am facing an issue where the ou ...

javascripthtml

Is it possible to use display:grid with a parent element set to a height of 100%

Why doesn't the display:grid property stretch my content to the height of this column? The HTML structure row - col-6 is created using Bootstrap. I am aware that I can manually set a specific height for the parent container, but I would prefer not to ...

htmlcssheightcss-griddisplay

What is the method for updating the value of the Sass variable in Angular 4?

Within the file app.component.scss, there is a variable named $color that has been set to 'red'. What steps can be taken within the file app.component.ts in order to access this variable and change its value to 'green'? ...

cssangularsass

What is the best way to incorporate line breaks into a reportlab PDF created in HTML format?

Currently, I am facing a challenge in generating PDFs using reportlab. The data that needs to be displayed is fetched from a dataframe. However, one field contains a lengthy text that requires breaklines for better readability in the PDF. Below is the sni ...

pythonhtmlreportlab

What could be the reason for the empty space between the upper and middle cuts?

I am working on these two web pages: http://slacklog.heroku.com/ http://slacklog.heroku.com/signup/date As you can see, there is a gap between the top and middle images as well as the bottom and middle images on both pages. Below is my HTML code: <d ...

htmlcss

Python's web scraping with Selenium

I have encountered an issue while trying to extract data from an HTML table. Although I was able to successfully count the rows, the problem arises when I attempt to print the data as it ends up repeating the same row multiple times. Can someone please h ...

pythonhtmlselenium-webdriverweb-scraping

How can I line up two divs horizontally within a container div?

Apologies if my terminology is off, I am relatively new to this. My goal is to align two divs horizontally, one containing an image and the other the message content. I have created a messaging user interface. Everything was functioning correctly until I ...

htmlcss

Differences in SVG rendering between Chrome and Firefox

I am eager to create a diagram on my website using SVG. To ensure the diagram is displayed in full screen, I am utilizing availHeight and availWidth to determine the client screen's height and width, then adjust the scaling accordingly. My current sc ...

javascripthtmlcssgoogle-chromesvg

Ways to arrange and space out td values

Here is an example of my HTML table: <table> <tr> <td>123 - 20 - 20</td> </tr> </table> The numerical values in the table are retrieved from a database and displayed like in this image: How can I ensure that ...

htmlcssdatabasealignment

Creating a checklist using HTML and CSS can be achieved by utilizing the <span> element and

I'm having trouble changing the color of a span box to red when I focus on a link. The span successfully changes color when activated, but nothing happens when I try to use the 'focus' pseudo-class. On click, different categories will displa ...

htmlcssangularcss-selectorspseudo-element

Determine the body's height by adding the heights of the header and footer

In my design, there is a header with a height of 8rem; .header { top: 0; left: 0; height: 8rem; } Following that, there is a footer with a height of 5rem; footer { width:100%; height: 5rem; } I am attempting to calculate the heig ...

css

Embed one module within another module and utilize the controller from the embedded module

I am attempting to create a module and inject it into the main module. Then, I want to inject the controller into the injected module but am facing issues. In my index.html file: <html ng-app="MenuApp"> <head> </head> <body> <d ...

javascriptangularjshtmlmodule

What is the best way to incorporate text animation into a website using Cascading Style Sheets (CSS)?

Is there a way to make my text flash twice per second? I attempted to create animated text, but it didn't work out! ...

htmlcssanimationtextcss-animations

Add a specific CSS class to a div element depending on the status of a checkbox

Is there a way to dynamically append data based on the selected items in a checkbox table? I want to be able to add multiple or single items by clicking the add button. The key is to avoid appending duplicate data that already exists in the view. Any sugge ...

javascripthtmljquery

Ways to make an area map more transparent

I'm encountering an issue with HTML opacity... Currently, I've implemented opacity using CSS but it's not functioning correctly. Below is my HTML and CSS code: <area shape ="rect" class="transbox" coords ="0,0,30,22" href ="test1.htm" ...

htmlcssopacity

Using relative positioning in CSS causes the div to move to a new line

Feel free to check out this demo I've created for reference: http://jsfiddle.net/jcb9xm44/ In a nutshell, the scenario involves two inline-block divs nested within a parent div: <div class="outer"> <div class="inner1"> Y & ...

htmlcss