What is the best way to align the hr element in a specific location on the page?

I am struggling with positioning the hr element on my website below a text. I tried to set the width to 50% but now I want it at the bottom, just above some text. I expected the hr element to be slightly offset from the text.

<hr style="width:50%; text-align:bottom" />

<div class="footer">
  Made with <span class="heart">❤</span> by
  <a href="https://fastdropgaming.github.io">
    <span class="fl">FastDrop Gaming</span>
  </a>
  
  <div>
    <small>&copy; <script src="assets/js/year.js"></script> FastDrop Gaming. All rights reserved.</small>
  </div>

  <div>
    <small><a href="https://fastdropg.carrd.co/impressum"><Impressum</a> ● <a href="https://fastdropg.carrd.co/contact">Contact</a> ● <a href="https://fastdropg.carrd.co/privacy">Privacy Policy</a></div></small>
  </div>

htmlcss

Answer №1

It appears that in your actual code, which you haven't provided completely here but is responsible for generating the screenshot you attached, your footer is positioned fixed at the bottom. To resolve this, simply move the hr tag inside the .footer div to integrate it into the footer (i.e., at the bottom):

.footer {
  position: fixed;
  bottom: 0;
}
<div class="footer">
  <hr style="width:50%; text-align:bottom" /> Created with <span class="heart">❤</span> by <a href="https://fastdropgaming.github.io"><span class="fl">FastDrop Gaming</span></a>
  <div>
    <small>&copy; <script src="assets/js/year.js"></script> FastDrop Gaming. All rights reserved.</small></div>
  <div><small><a href="https://fastdropg.carrd.co/impressum"></span>Impressum</a> ● <a href="https://fastdropg.carrd.co/contact">Contact</a> ● <a href="https://fastdropg.carrd.co/privacy">>Privacy Policy</a></div></small>
  </div>

Answer №2

It is recommended to include the hr tag within the main div "footer":

<div class="footer">
<hr style="width:50%; text-align:bottom" />
        Created with <span class="heart">❤</span> by <a href="https://creativeminds.com"><span class="cm">Creative Minds</span></a>
    <div>
        <small>&copy; <script src="assets/js/year.js"></script> Creative Minds. All rights reserved.</small></div>
    <div><small><a href="https://creativem.carrd.co/legal"></span>Legal Notice</a> ● <a href="https://creativem.carrd.co/contact">Contact</a> ● <a href="https://creativem.carrd.co/privacy">>Privacy Policy</a></div></small>
    </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

Bootstrap modal not displaying in full view

I recently ran into some issues while using a jQuery plugin with my bootstrap modal on my website. After implementing jQuery.noConflict(), I encountered a problem where the program no longer recognized $, forcing me to replace all instances of it with jQue ...

javascriptjqueryhtmltwitter-bootstrap

When converted to base64, the background image (image/svg+xml) mysteriously disappears

Below is a Checkbox SVG that I have added to my tables; .check-nobase64 { background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule ...

htmlcss

a guide on combining values for identical dates in a JSON file

I'm currently working on an Android app that involves displaying graph values, and I could use some help. The server is returning a JSON object in the following format: [{ "date": "01-03-2018", "value": "12", }, { "id": "01-03-201 ...

javaandroidhtmljson

Tips for embedding Google Maps route planner on your website's iframe

I am currently in the process of developing a brand new WordPress website that includes a "Contact" menu option. Within this menu, I have integrated a map using Google Maps iframe code. Now, my next task is to incorporate a route planner below the map. To ...

htmlwordpressformsgoogle-mapsiframe

Extract information from a string and format it into JSON using PHP

This PHP script has got me stuck on a particular issue. I am having trouble splitting the data correctly. Currently, I have a list of numbers in this format: 50.0.1 581 50.0.2 545 50.0.3 541 50.0.4 18 50.0.5 2 50.0.6 33 50.0.7 1 [...] I need to convert ...

phphtmlarraysjsonstring

What is the best way to display a .jpg image from a SQL Server filestream in HTML?

My goal is to fetch jpeg files from SQL Server and display them in HTML using the img src="filepath" tag. However, my C# code is returning the actual image instead of a URL path to the image, resulting in a small image box with an X mark. How can I directl ...

c#htmlsql-serverrazor

How can I extract text from a website without retaining number, dot, and alphabet bullets in the list?

I am currently using Python 2.7.8 for a project involving a website with text displayed in an ordered list format using ol tags. I need to extract the specific text items listed below: Coffee Tea Milk This is an example of the HTML code used on my websit ...

pythonhtmlweb-scrapingbeautifulsoup

Tips for wrapping and aligning elements in the center

On my website, I have a layout that displays 10 small images (around 100x200 pixels) evenly spaced at the bottom of the page. | | | The wide window la ...

htmlcss

preventing the ball from landing inside the container (JavaScript)

I developed a straightforward website with the following functionality: Upon entering any text into the prompt and clicking okay, a ball will drop into the 1st box, namely the Past Thoughts box. Below is the code snippet: HTML <h1> Welcome t ...

javascripthtmlcss

Enhance your Bootstrap datetimepicker with a custom button similar to Today

Is it possible to include a custom button in the Bootstrap datetimepicker, similar to Today or Week ago options? For instance, can buttons for Week ago and Yesterday be added? Visit this Github link for more information. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is an hreflang link necessary for a website that is only in one language?

One of the current limitations on my website is the lack of multiple languages. Considering this, I am curious if there would be any advantages or disadvantages in adding one. For example: <link rel="alternate" href="http://www.rgraph.net" hreflang=" ...

htmlhref

Displaying upcoming events on the current webpage using a div element

Hey there! I'm brand new to using jQuery and I'm currently working on creating an events calendar. So far, I have successfully implemented the calendar module. Currently, when I click on a specific date, it takes me to the events.php page where a ...

phpjqueryhtml

Tips for syncing the drag motion of two frames using jQuery

Currently, I'm developing a whack-a-mole game using javascript/jQuery. My goal is to allow users to drag the mole holes to their desired positions on the screen and then click start to begin playing (with moles popping out of the holes). However, I am ...

javascriptjqueryhtml

Deleting Empty Session Data

I have set up sessions for my website. In order to initialize the session, I included the following code on every link of the website: session_start(); if(isset($_SESSION['User'])) { //session_start(); $sesvar = $_REQUEST['sid']; } ...

phphtmlsession

Steps for dynamically applying a CSS class to items within an ASP.NET CheckBoxlist in an HTML table

Is there a way to dynamically apply CSS classes to ASP.NET CheckBoxlist HTML table elements programmatically? For instance, I would like the "table", "tr", and "td" tags in the output below (as seen in the browser View Source) to include CSS styles. < ...

c#htmlcssasp.net

BeautifulSoup error: 'NoneType' does not have a 'text' attribute

I encountered an issue while web-scraping Google for weather information, where Python couldn't identify a <span> tag even though it exists on the page. How can I resolve this issue? In my attempts to locate the missing <span>, using both ...

pythonhtmlweb-scrapingbeautifulsoup

To shift two links over to the right within the navigation bar

I'm struggling to position the last two links, "Get started" and "Hire me", at the right end of the navigation bar. I have attached a photo as well as my SASS code below. After 4 days of trial and error, I finally managed to achieve the desired layou ...

htmlcssflexbox

What is the process for importing a 3D model into a three.js project through the playcode.io editor?

After numerous attempts, I still haven't been able to successfully load a 3D model on playcode.io using Three.js. Both my browser and playcode.io support WebGl functionality, or so I believe. The model itself, named plane.gltf, seems to be fine. Despi ...

javascripthtmlthree.js

The stylesheet failed to load due to an incorrect MIME type (text/html instead of text/css)

As I delve into creating a personal project centered around a basic expense tracker web app, I encountered an obstacle right at the start of my journey. The main page's stylesheet (index.html) refuses to load, resulting in the common error message: Th ...

javascriptcssnode.jsexpressmime-types

The overlay lingers on the page even after the modal successfully redirects to the search

My goal is to implement a modal that prompts users to input their search term and find recipes with a specific ingredient. I have successfully achieved this by using simple redirection. However, upon redirecting to the search results, the overlay remains o ...

htmlangulartypescriptmodal-dialogbootstrap-5