Troublesome Navigation Bar Dilemma: A Conundrum in HTML and CSS

Help needed with my homepage navigation bar that is acting up. The last button link seems to be extending further down than it should, and it's turning the text below it into a hyperlink as well. I'm not very experienced with programming, so any assistance would be greatly appreciated. I've changed any mention of my real name to 'Jon Snow' for privacy reasons, as well as for fun!

<!DOCTYPE html>

<head>
<p>Jon Snow
Blah + A Student</p>
<link rel="stylesheet" type="text/css" href="jonsnow.css">
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="navigation">
    <ul>
        <li><a href="aboutme.html">About Me</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contactme.html">Contact Me</li>
    </ul>
</div>

<div id="intro">
    <p>Hi, I'm Jon Snow, a student at Blah, University of Blah. This is my online portfolio!</p>
</div>
</body>
csshtmlnavigationbar

Answer №1

When copying and pasting content from your website, it is important to ensure that all tags are properly closed, including the <a> tag within the <li> for "Contact Me."

The incorrect code snippet:

 <li><a href="contactme.html">Contact Me</li>

Should be corrected to:

<li><a href="contactme.html">Contact Me</a></li>

Answer №2

Remember to always close your tags properly, like in this example:

<li><a href="contactme.html">Contact Me</li>

If you forget to close a tag, it can cause issues with the layout of your website.

To fix this problem, make sure to close the <a> tag like this:

<li><a href="contactme.html">Contact Me</a></li>

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

Design a sophisticated background using CSS

https://i.sstatic.net/yILwL.png I am wondering if there is a way to create a CSS3 background similar to the one shown in the image link above. The gradient should smoothly transition from white to black, spanning across a header div, and remain consistent ...

htmlcss

What is the best way to inline center two block buttons using CSS?

Having difficulty centering two block buttons using inline CSS in the Darkly theme from Bootstrap. I am unable to directly edit the CSS and can only utilize inline CSS due to using the CDN version of the theme. <a href='/start'><button c ...

htmlcssbootstrap-4

When using Angular, the onSelectionChange event is not triggered for angular mat-option components

I am working with a mat-form-field that includes both an input field and a mat-autocomplete feature with mat-options. The input field has a (blur) event triggered when it loses focus, while the mat-option has an (onSelectionChange) event triggered when an ...

htmlangularangular-material

Shifting image position in Bootstrap row

Is there a way to align a picture with a sign 1 to the top of a red field using bootstrap without messing up the layout when changing the page size? https://i.sstatic.net/g86Pq.jpg <div class="container"> <div class="row p ...

htmlimagebootstrap-4

Ways to increase the shrinking capacity of flex items when the entire container width is occupied

Recent Post Below: I've replicated a minimized issue: https://codepen.io/MH-123/pen/ExJWQWq?editors=1100 In the provided CodePen, the problem persists. Two divs are present, but flex shrink functionality is not working as expected. The main flex cont ...

javascripthtmlcssflexbox

Access various data from the local storage and display them inside a div container

I am trying to display the keys and their values for all the data stored in the local storage. Here is the HTML and JavaScript code I have written: // Setting some values in the local storage localStorage.setItem("lastname", "Smith"); localStorage. ...

javascripthtmllocal-storage

Is it best practice to display a DIV once it is no longer visible after scrolling down?

Upon opening my website, an information box (div) appears on the screen. However, when the user scrolls down and the box is no longer visible, I want it to always appear in the top right corner while scrolling. I have figured out how to keep it visible at ...

javascriptcss

Browser switch dependent on operating system

Recently, a guest raised concerns about a DIV element covering the content of the page. There is an issue with a popup that is supposed to only appear when the mouse hovers over its container: <td class="ref" id="myContainer"> <div><a ...

csswindowsinternet-explorer

Sometimes the last column might not be visible in an HTML table within a collapsed Bootstrap element while using Chrome browser

I've encountered a strange issue when trying to wrap an HTML table inside a collapsing div element using Bootstrap. The last column is not consistently displayed in Chrome (44.0.2403.107 m) depending on the window width, but it works fine in Firefox. ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is causing the border-radius property to malfunction on a particular website when using Internet Explorer?

We create browser add-ons for popular browsers like Google Chrome, Firefox, Safari, and Internet Explorer. Our add-ons inject HTML elements into various websites such as mail.google.com and email14.secureserver.net. The HTML element we use has a border-ra ...

htmlcssinternet-explorer

Steps to create a fixed pattern background image with a customizable background color based on the content within a div element

I am seeking guidance on how to create a single page application using Angular that features a fixed background image (such as a white pattern) in the BODY tag. However, I would like the ability to change the color behind this image depending on the conten ...

cssangular

Learn how to create a responsive flickr embedded video with Bootstrap!

I'm struggling to make the embedded video responsive. I attempted the solution mentioned in a Stack Overflow post but it didn't work for me. The video's width remains the same and doesn't scale down properly, appearing out of bounds on ...

htmlcsstwitter-bootstrapvideoflickr

What is the best way to align <h2> and <img> elements that are set to display as inline-block?

I've been experimenting with aligning h2 and img (icon) elements and although I added display: inline-block, they ended up shifting to the left of the section. Is there a way I can center them instead? HTML: <h2>Coffee</h2> <img src=&q ...

htmlcss

How to access elements that are dynamically added using Jquery

Similar Question: dynamic class not triggering jquery unable to select dynamically added element I am facing an issue trying to access a dynamically added element by its class name. Here is a snippet of the HTML code I am working with: <div c ...

jqueryhtml

Updating the UI by calling a function in JavaScript with Node.js

My webserver code looks like this: var net = require('net'); var server = net.createServer(function(socket) { socket.write('hello\n'); socket.write('world\n'); //RECEIVE PACKET ON SOCKET socket.on(& ...

javascriptjqueryhtmlnode.jswebsocket

Extract the HTML table from Gmail and transfer it to Google Sheets with the help of Google Apps Script

Just dipping my toes into google apps script. On my to-do list is creating a script that can extract data from a table in Gmail and transfer it to Google Sheets. Here's an example of what the email body looks like: CONFIRMATION CODE GUEST&apo ...

javascripthtmlexcelgoogle-apps-scriptgoogle-sheets

Could someone help me understand why changing the background color of the body element is causing my other CSS styles to not work as expected?

Why does setting the background color for my body in CSS ignore the styles that come after it? Can someone explain what is causing this issue and how to resolve it? body{ background-color:gray; }; h1 { text-align:center; } <html> < ...

css

Display Django radio buttons in a formatted list using the mark_safe() function

Exploring the Issue In an effort to include HTML instructions and display bullet points in my form label, I utilized 'mark_safe()' within a form: class FormFood(forms.Form): CHOICES = [ (1,'Yes'), (2, 'No')] response ...

pythonhtmldjangopython-3.xdjango-forms

Aligning content with CSS styling

I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed parag ...

htmlcss

Attempting to preserve the CSS transform effect as I switch between menu options

Whenever I stop hovering over my element, it reverts back to its original position. However, I want it to remain in place when I am navigating through the "sousmenu" menu and only return to its original position when I am not hovering over the "sousmenu". ...

jqueryhtmlcss