Using the <hr> tag in HTML to create a horizontal line is proving to be a challenge for me

 .yellow-line{
  position: absolute;
  top: 60px;
  overflow: auto;
  border: 10px solid red;
}
 <img class="vox-logo" src="images/vox_logo.JPG" alt="Vox Logo">
      <div class="header">
        <h5 class="menu-0">EXPLAINERS</h5>
        <h5 class="menu-1">POLITICS AND POLICY</h5>
        <h5 class="menu-2">WORLD</h5>
        <h5 class="menu-3">CULTURE</h5>
        <h5 class="menu-4">SCIENCE AND HEALTH</h5>
        <h5 class="menu-5">IDENTITIES</h5>
        <h5 class="menu-6">MORE</h5>
        <img class="twitter" src="images/twitter.png" alt="Twitter">
        <img class="facebook" src="images/facebook.png" alt="Facebook">
        <img class="youtube" src="images/youtube.png" alt="YouTube">
        <img class="rss" src="images/rss.png" alt="RSS">
        <img class="people" src="images/people.png" alt="People">
        <img class="search" src="images/search.png" alt="Search">
      </div>
      <br>
      <hr/>
      <div>
        <hr class="yellow-line">
      </div>

I'm facing a challenge as I need to add a line after the div but can't figure out how. Can you please review the code provided above and assist me with finding a solution? Your help is greatly appreciated. Thank you.

htmlcss

Answer №1

First, please correct your syntax. It should be border-top: 10px solid red;. There is no need to specify position absolute and overflow auto for the hr tag.

Try this instead: border-top: 10px solid red;

Answer №2

Hey, it looks like there is a mistake in your border syntax - the option bold does not exist. Instead, you can use solid or another valid option. While position is not necessary, if you still want to include it,

make sure to specify the width of the element like this, or give its parent position: relative so that it stays within its parent container.

.yellow-line{
  position: absolute;
  top: 60px;
  overflow: auto;
  width: 100%;
  border: 10px solid red;
  margin-bottom: 10px;
}
<img class="vox-logo" src="images/vox_logo.JPG" alt="Vox Logo">
      <div class="header">
        <h5 class="menu-0">EXPLAINERS</h5>
        <h5 class="menu-1">POLITICS AND POLICY</h5>
        <h5 class="menu-2">WORLD</h5>
        <h5 class="menu-3">CULTURE</h5>
        <h5 class="menu-4">SCIENCE AND HEALTH</h5>
        <h5 class="menu-5">IDENTITIES</h5>
        <h5 class="menu-6">MORE</h5>
        <img class="twitter" src="images/twitter.png" alt="Twitter">
        <img class="facebook" src="images/facebook.png" alt="Facebook">
        <img class="youtube" src="images/youtube.png" alt="YouTube">
        <img class="rss" src="images/rss.png" alt="RSS">
        <img class="people" src="images/people.png" alt="People">
        <img class="search" src="images/search.png" alt="Search">
      </div>
      <br>
      <hr/>
      <div style="position:relative;">
        <hr class="yellow-line">
      </div>

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

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

Is there a way for me to display the comment count as text directly on the comment bubble image?

In this example on jsfiddle, I am attempting to display the number of comments (12 in this case) as text over the comment bubble image: http://jsfiddle.net/c337Z/ HTML: <ul id="top"> <li><a href="/comments"><div id="commentlink" ...

htmlcss

Encase children within a view component in React Native

I've been working on the following code: renderActionButtons(actionButtons){ let actionButtonsContent = actionButtons.map((button, i) => { return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style= ...

cssreactjsreact-nativeflexboxreact-native-flexbox

Implementing the @media rule using Javascript

I'm trying to use JavaScript to add an image dynamically, but I want to remove it when the viewport is 600px or wider. This is my approach so far: var img = document.createElement('img'); // (imagine here all the other fields being defined ...

javascripthtmlcss

Repair the masthead background during overscroll

The Dilemma At the top of my webpage, I have a sleek masthead with a captivating background image that scrolls along with the page. However, there is an issue when users overscroll upwards, causing an undesirable white overflow to appear. To rectify this ...

javascriptjquerycsstwitter-bootstrapsass

What is the best way to ensure proper alignment of elements in a React application?

Currently, I am delving into learning react and antd by putting it into practice. My goal is to create a layout with a button and two input fields that have a 10px gap between them, while also displaying the titles of each field directly above them. To ach ...

htmlcssreactjsantd

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

htmlcss

After upgrading from Windows 7 to Windows 10, I noticed that the CSS, HTML, and Bootstrap elements seemed to have lost their impact

<!DOCTYPE html> <html> <head> <title>Registration</title> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <link href ...

htmlcss

Converting the Google logo to grayscale for the Google Translate button

Is there a simple way for a non-coder like myself to change the colors of the Google Logo in the Google Translate Button to grey scale instead of its usual bright shades? Below is the embed code I am using: <div id="google_translate_element"></di ...

htmlembedgoogle-translate

Decrease the size of the hyperlink area to only the center portion of the text for a more precise click target

Normal text links are present: <a href="projects.html">Projects</a> Is it feasible to make only the middle part of the letters clickable? Such as excluding the top of 'P' or the bottom of 'j'? a { font-size: 50px; ...

htmlcss

Looking to include a delete button for removing the currently selected tab in a Bootstrap tabs component

Currently, I am in the process of developing a travel website and have encountered an issue with implementing Bootstrap tabs in the admin section. I have managed to tackle some aspects, such as dynamically creating tab options. The problem arises when t ...

jqueryhtmltwitter-bootstrapbootstrap-4

having each individual div function on its own accord

Is there a more efficient way to make HTML and CSS function independently without duplicating the code multiple times and changing IDs or class names? Currently, only the top male and female button works when clicked. I am looking for a CSS-only solution t ...

htmlcss

Is there a way to left-align these items?

I currently have 10 divs arranged side by side. I am trying to align the last divs to the left instead of center, but the solutions I found so far are not working. I've checked Bootstrap's documentation and tried using <div class="d-flex ...

htmlcss

Position your Logo to the left, align the Menu in the center, and place top links on the right using Bootstrap

I am currently struggling to create two rows with the logo aligned to the left, 'Home' and 'User' menu links at the top right corner, and a second row displaying 'Link1', 'Link2', 'Link3' menus centered. Th ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for switching images in a grid using jQuery

I have implemented an image grid using flexbox on a website I am developing. The grid consists of 8 boxes, and my goal is to randomly select one box every 2 seconds and assign it one of 12 random images. My strategy involves creating an array containing UR ...

javascriptjqueryhtml

Mediawiki needs to be able to respond effectively to constantly changing and evolving content

My extension generates content dynamically for certain pages. For example, I create headlines using <html> <h1>, <h2> and <h3> tags. I want my mediawiki to respond to these headlines and generate a directory dynamically. I attempte ...

phphtmlmediawiki

Are desktop values taking precedence over the mobile media query?

Currently, I am facing an issue with aligning icons (images) under each title on a page that lists various classes. The icon needs to be centered below the title on both desktop and mobile versions of the site. However, I have encountered a problem where u ...

htmlcssimagealignmentcenter

Guide on setting the BackColor of a table cell based on a database value dynamically

In the project I am currently working on, there is a request to change the background color of specific table cells based on their values. In order to achieve this, I am handling the RadGrid_ItemDataBound event and attempting to set the BackColor property ...

cssvb.netcellradgrid

Use percentages for the width in CSS and pixels for the height, ensuring that both dimensions are equal

I'm attempting to create a square that adjusts its size according to the screen size. Currently, I have the width set to 25%. Is there a way to ensure that the height remains the same length in pixels as the width? Appreciate any assistance on this ...

javascriptcsshtml

"PHP MySQL news error" - An unexpected error occurred

Just incorporated a news system using MySQL/PHP, it functions flawlessly; however, encounters errors when inserting HTML. For instance, inserting a YouTube video results in the addition of / or \ Can someone advise on what changes need to be made in ...

phpmysqlhtml