Nav bar displaying CSS and HTML <a> tags

I am encountering a new issue that I have not faced before and I am seeking some guidance on it. The problem is with a navigation bar displayed at the top of a webpage. When the code is executed, the browser automatically adds 'a' tags which disrupt the alignment of my links. I need to figure out how to prevent this unwanted behavior. Below is an example showcasing the code.


Here's My Code:

<nav>   
    <ul id="LevelMenu">
        <?php if($currentuser['userlevel']==0) { ?>
        <li><a href="register.html">Register New Account</a></li>
        <?php } else { 
                if($currentuser['userlevel']==1) { ?>
        <li><a href="inactive.php">Account Panel<a></li>
                <?php } else { ?>
        <li><a href="user.php">Account Panel<a></li>
            <?php if($currentuser['userlevel']>2) { ?>
        <li><a href="admin.php">Administration</a></li>
            <?php }
                } ?>
        <li><a href="php/logout.php">Log Out</a></li>
        <li><a href="addarticle.php" id="addarticle">Add Article</a></li>
        <?php } ?>
    </ul>
</nav>

Code Displayed in Browser:

    <nav>
    <ul id="LevelMenu">
                <li>
                  <a href="user.php">Account Panel</a>
                    <a></a> 
                </li>
                    <a></a>
                <li>
                    <a></a>
                  <a href="index.php">Home</a>
                </li>
                <li>
                  <a href="admin.php">Administration</a>
                </li>
                <li>
                  <a href="index.php">Home</a>
                </li>
                <li>
                  <a href="php/logout.php">Log Out</a>
                </li>
                <li>
                  <a href="addarticle.php" id="addarticle">Add Article</a>
                </li>
            </ul>
</nav>

Resolution:

https://i.sstatic.net/FsqYE.png

Answer №1

Here is the issue with these lines:

<li><a href="inactive.php">Account Panel<a></li>

The <a> tags are not being closed properly, as a new opening tag is being used instead of a closing tag. The correct way to write this is:

<li><a href="inactive.php">Account Panel</a></li>

The same problem exists in the following line:

<li><a href="user.php">Account Panel<a></li>

Answer №2

Make sure to properly close your anchor tag.
The correct format should be <a href = "" ></a>

You are currently doing it like this:

  <li><a href="inactive.php">Account Panel<a></li>  

Instead, fix it like this:

  <li><a href="inactive.php">Account Panel</a></li> 

Check all other places where you may have the same issue.

For more information on anchor tags, refer to the W3 Documentation.

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

Move the option from one box to another in jQuery and retain its value

Hey guys, I need some assistance with a jQuery function. The first set of boxes works perfectly with the left and right buttons, but the second set is not functioning properly and doesn't display its price value. I want to fix it so that when I click ...

jquery add to table id, not to a table within

Having trouble adding a table row to a specific table ID without it appending to other tables with different IDs nested inside. I've searched for a solution but can't seem to find one. Can someone help me figure out what I'm doing wrong? Her ...

'Error: Object does not have access to the specified property or method 'values'

I've been working on writing some code to retrieve and read a JSON file. It seems to work fine in Chrome, but I'm running into issues with IE11, which is the browser I need to use. I've tried changing variable names, but the problem persists ...

Display content from Angular 5 template directly in table without using parent template

Despite the fact that this question has been raised multiple times, I find myself in a slightly tricky situation. Here is the structure of my table: <table> <th>...</th> <app-custom-rows *ngFor="let t..." [customAttribute]="someval ...

Is it feasible to adjust the Scrollbar's position?

Is there a way to change the position of a scrollbar on a webpage? Are there any alternative solutions for this issue? <div style="overflow: scroll; overflow-y: hidden"> </div> I am looking to relocate the scrollbar to a different componen ...

Attach an object securely to a specific spot

I'm facing an issue with my product cards where the text mentioning "free shipping" is not aligned properly when there are no ratings. How can I ensure that all free shipping texts are positioned consistently on the card? Should I modify the position ...

"The CSS problem is that the input tags should be aligned in the same row instead of the second row

If you could take a look at this jsfiddle example Currently, I am using bootstrap tags for my system. However, when I add more than 6 or 7 input tags, they spill over into a second row. I want them to all fit within the first row, similar to the image sho ...

Error encountered: Failure to construct URL for endpoint 'Bookdetails'. Have you overlooked supplying values for the parameter 'book_id'?

I have been troubleshooting this issue and reviewed similar threads, yet despite verifying all options, the problem persists. My code includes: application.py @app.route("/Booksearch/<int:book_id>", methods=["GET", "POST"]) def Bookdetails(book_id ...

Attempting to implement a secondary level of dropdown menu using CSS

As I begin, I want to mention that I have thoroughly reviewed all the sub sub menu questions, but unfortunately, I couldn't find anything that aligns with the code I currently have in place. Any assistance will be greatly appreciated. My current task ...

Tips for postponing the appearance of the background image within a div tag

Check out my fiddle here. I am looking to create an effect where the "background-image:" in the CSS loads fully and displays after a 3-second delay with a quick fade-in effect. Until then, the entire div should be in black color. How can this be achie ...

To avoid 'stacking', reset a div after it has been faded in

I am currently using code that displays a scroll to top button. $(window).bind("scroll", function() { if ($(this).scrollTop() > 100) { $("#totop").fadeIn(); } else { $("#totop").stop().fadeOut(); } The opacity of this div is set to 0.8. Howeve ...

Disabling the past dates on a date picker based on the selected date from another date picker

Is it possible to disable past dates in the End Date picker based on the selected date in the Start Date picker? For example: If I choose 20th November 2019 as the Start Date, I want to prevent selection of any past dates in the End Date picker. <ht ...

I am looking to set an HTML file as the homepage for my Next.js project

Is there a way in next.js to render a normal .html file (index.html) when someone visits my root directory at "https://example.com/"? I have researched and edited my config file as shown below, /** @type {import('next').NextConfig} */ const next ...

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

Implementing HandlebarsJS with PHP and Yii to generate a page. Here is a snippet of the html/handlebars code on the page {{#if embed_link}} <p class='f_hidden_p'> <a href='{{embed_link}}'> {{ ...

Styling Descendants Conditionally in Angular 2

.parent { color: blue; } .parent * { color: red; } .child { color: black; } .grandchild { color: green; } <div class="parent"> Parent <div>Child <div>GrandChild</div> </div> </div> Imagine a scenari ...

"Enhance Your Website with a Stunning Background Image Using Twitter Boot

With a fixed navigation bar at the top and a container spanning span12 with full-width background, it is important for the content of the background image to be displayed fully regardless of window size. What would be the most effective way to create or c ...

The menu bar created from getJSON is not displaying the jQuery UI CSS styles as expected

I have been working on creating a jQueryUI menubar using JSON data. The JSON data is successfully being converted into valid HTML, but the menubar does not display with the desired styling. It appears as an unstyled unordered list rather than a styled menu ...

CSS file from outside does not impact the appearance of buttons

Take for instance this button: <input class="btn btn-primary btn-block btn-lg register_btn rounded-0 submit-button" type="submit" value="Submit"> and the CSS code within a custom custom.css file: .submit-button { ...

JavaFX WebView showcases HTML content differently compared to Libre Office Writer

After using SceneBuilder 2 to create a Dialog for displaying Help documents in a WebView, I proceeded to generate an HTML document in Libre Office Writer. Upon loading the 'Help.html' file, I noticed that the line spacing in the WebView differed ...