The CSS top border is failing to display

For a school project, I've been attempting to add a top border to a set of hyperlinks in order to separate them from the title. However, after spending over an hour on this task, I still can't seem to get it to work.

Below is the CSS code for the #menu element that houses my hyperlinks:

#menu {
  color: #ffffff;
  padding: 10px 0px 10px 0px;
  text-align: center;
  border-top: 1px solid #669999;
}
<div id="menu"><br />
  <a href="#">HYPERLINK 1</a>  |  <br />
  <a href="#">HYPERLINK 2</a>  |  <br />
  <a href="#">HYPERLINK 3</a>  |  <br />
  <a href="#">HYPERLINK 4</a>  |  <br />
  <a href="#">HYPERLINK 5</a><br />
</div>

This image shows how the layout currently appears. It may not be visually appealing, but I am following specific instructions for this assignment.

htmlcssborder

Answer №1

Ensure to include solid in the border property, otherwise, the default value will not be applied.

border-top: 1px solid #669999;

Double check that the initial values are set correctly:

https://developer.mozilla.org/en/docs/Web/CSS/border-top

Successful Implementation Example

#menu {
  color: #ffffff;
  padding: 10px 0px 10px 0px;
  text-align: center;
  border-top: 1px solid #669999;
}
<div id="menu">
  <a href="#">HYPERLINK 1</a> | 
  <a href="#">HYPERLINK 2</a> | 
  <a href="#">HYPERLINK 3</a> | 
  <a href="#">HYPERLINK 4</a> |
  <a href="#">HYPERLINK 5</a>
</div>

Avoid using &nbsp; for layout purposes. Instead, consider utilizing margin:

#menu {
  color: #ffffff;
  padding: 10px 0px 10px 0px;
  text-align: center;
  border-top: 1px solid #669999;
}

#menu a {
  margin: 10px;
}
<div id="menu">
  <a href="#">HYPERLINK 1</a> | 
  <a href="#">HYPERLINK 2</a> | 
  <a href="#">HYPERLINK 3</a> | 
  <a href="#">HYPERLINK 4</a> | 
  <a href="#">HYPERLINK 5</a>
</div>

Answer №2

There seems to be an issue with your border syntax, as it is missing the style attribute,

The correct format should be 

<border-width> || <border-style> || <color>

You can check the correct border syntax here

Notes

  • &nbsp; does not create spaces, use margin in CSS instead
  • I have shortened your padding and hex colors for brevity
body {
background: darkgreen
}
#menu {
color: #fff;
padding: 10px 0;
text-align: center;
border-top: 1px solid #699;
}
#menu a {
margin: 0 5px;
color:#fff
}
<div id="menu">
<a href="#">HYPERLINK 1</a>|
<a href="#">HYPERLINK 2</a>|
<a href="#">HYPERLINK 3</a>|
<a href="#">HYPERLINK 4</a>|
<a href="#">HYPERLINK 5</a>
</div>

Answer №3

The border-top property is missing the border-style attribute in your code snippet. To correct this issue, you can include the border style as shown below. If you need more information, you can refer to this link: https://developer.mozilla.org/en/docs/Web/CSS/border-top

#menu {
  ...
  border-top: 1px solid #669999;
}

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

Print Vue page with the same styling as the original

How can I add a print button to my application that prints the page with the original CSS styles? I am currently using window.print() function and have a separate file called print.scss with specific print styles. @media print { header {display:none; ...

cssvue.jsprintingstyles

Sending Email Form in PHP using JQuery and Ajax for seamless user experience

Looking to create an email form in HTML with PHP, but running into the issue of the page reloading after submitting? Many people turn to jQuery and AJAX to solve this problem. While you may have come across solutions on Stack Overflow, as a non-native Engl ...

javascriptphpjqueryhtmlajax

Implementing a configuration file into a client-side web application using asynchronous methods

Currently, I am facing a challenge with an SPA that is being developed using various custom components from different sources. The main issue at hand is how to initialize certain settings (such as Endpoint URLs) using a settings file that can be configure ...

javascriptjqueryhtmlsingle-page-application

Creating an event on the containing element

Here is my HTML tag: <ul> <li> <form>...</form> <div> <div class="A"></div> <div class="B"><img class="wantToShow"></div> </div> ...

javascriptjqueryhtml

Missing ng-required fields not displaying the has-error validation in AngularJS forms

While editing any part of their address, the user should see a red invalid border around each field to indicate that the full form is required. However, for some reason I can't seem to get the 'Address' field to display this border. The set ...

javascriptcssangularjshtmltwitter-bootstrap

AngularJS Expression Manipulation

I am looking to implement a functionality similar to the one below: HTML <mydir> {{config = {type: 'X', options: 'y'}} </mydir> <mydir> {{config = {type: 'a', options: 'b'}} </mydir> JS Dir ...

htmlangularjsangularjs-directiveangularjs-controller

Sending data from an element within an ngFor loop to a service module

In my component, I have a loop that goes through an array of different areas with unique IDs. When you click the button, it triggers a dialog containing an iframe. This iframe listens for an event and retrieves data as JSON, then sends it via POST to an IN ...

htmlangulartypescript

How to ensure an image or ad stays in a fixed position on the screen

Is there a way to keep a part of the screen fixed, regardless of what other elements are in that space? Do I need to merge code with the HTML code of the ad or image to achieve this? ...

htmlcss

Using Django and jQuery to retrieve a file and display a prompt for downloading the file in the browser

Previously, I had a question about passing files to the browser for download, which was easily achieved by passing strings created at the end of a function to an iframe's src attribute. Now, I have a more complex task at hand – I need to pass pre-e ...

jquerypythonhtmldjango

"Unusual HTML and jQuery quirk causing a perplexing issue: a function that keeps looping inexp

A unique code written in javascript using jQuery allows users to create a "box" on a website with each click of a button, triggering an alert message upon clicking the box. The process is as follows: 1) Clicking the "Add (#addBox)" button appends a new li ...

javascriptjqueryhtmlweb

Duplicate the image from a specific div to another div, ensuring that only one clone is created

I'm trying to replicate an image in multiple spots within a frame, but I can only manage to get one instead of many. Can someone please tell me what I'm doing wrong? I am creating a map of terrain where I need to clone images from one div to anot ...

javascriptjqueryhtml

Unable to establish communication with server. Facing issues in connecting AngularJS with NodeJS

I am currently working on establishing a communication process between my server and client to receive either a "success" or "failure" response. The server is being developed using node.js with the express framework, while the client is built using angular ...

javascripthtmlangularjsnode.jsweb-development-server

Retrieving a compilation of items found within text selected by the user on a website

Imagine a scenario in which a webpage contains the following structure: <p> <span class="1">Here's some text</span> <span class="2">that the user</span> <span class="3">could select.</span> </p> I ...

javascriptcsstextselection

Animating Text Around a Circle Using HTML5 Canvas

Can someone please help me figure out what is wrong with this code? It's not rotating as it should, and the text looks messed up. I've been trying to solve this problem for hours but can't seem to get it right. function showCircularNameRot ...

javascripthtmlcanvashtml5-canvas

What is the method for generating a popover in HTML when a user hovers over a button?

In this scenario, I have implemented two status buttons with different colors. The green button corresponds to "RUNNING" and the red button indicates "TERMINATED", which are fetched from JASON data. Upon hovering over the green status button, the text "RU ...

javascriptjqueryhtmlcss

Automatic scrolling feature in JavaFX

I am currently working on developing a chat box using JavaFX. My goal is to implement an auto-scroll feature that will scroll down the page when it gets filled up. However, I am facing some issues with this functionality. import javafx.application.Applica ...

javacssuser-interfacejavafxscrollbar

Tips for modifying layout and concealment of content when using window.print()

Currently, on my web application, the vendor is able to print the invoice using windows.print(). However, in the print preview, it displays a screenshot of the current page. The vendor has specific printed paper with their own details and some blank space ...

jqueryhtmlcss

Tips for ensuring that the click event function properly for numerous elements sharing the same class

I'm currently working on adding a flip effect to multiple tiles whenever a user clicks on them as part of building a dashboard-style webpage. I am having trouble making the click event work for all tiles with the same class name. Even though all the ...

javascripthtmlcss

Using AngularJS to bind radio buttons to ng-model

Here is a snippet of my HTML code where I attempted to bind the "formFriendsAll" scope to the ng-model. <form ng-submit="submitForm()" > <div class="col-sm-3"> <div class="form-group"> <label>Which Persons to show?< ...

javascriptangularjshtmlradio-buttonangularjs-ng-model

Custom Bootstrap design layout where the right column wraps under the left column

Need assistance with my bootstrap layout. Prior to the 980px breakpoint, the right column wraps under the left column. I want it to remain in its position without wrapping. The challenge is ensuring the left column has a fixed width while allowing the ri ...

htmlcsstwitter-bootstrap