Question 45504 in CSS Question posted in
Some basic documentation can be found here.

How do I position the hr element to a specific location? – CSS

I have the problem that I want to have the hr element on my website under a text but I don’t really know how to do it, I’ve already googled it so I hope someone can help me here is my problem

I created the hr element and just wanted it to be 50% and now I want it at the bottom above a text

I thought that the hr element would be just a little bit over the Text

The hr tag is way to high instead of the bottom

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

<div class="footer">
  Gemacht mit <span class="herz">❤</span> von
  <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. Alle Rechte vorbehalten.</small>
  </div>

  <div>
    <small><a href="https://fastdropg.carrd.co/impressum"></span>Impressum</a> ● <a href="https://fastdropg.carrd.co/contact">Kontakt</a> ● <a href="https://fastdropg.carrd.co/privacy">>Datenschutz</a></div></small>
  </div>
Tags:

2

Answers


  1. 0

    Apparently, in your real code (which you didn’t post here completely, but which is what produces the screenshot you added), your footer has a fixed position (or something similar) at the bottom. So simply move the hr tag inside the .footer div to make it part of that footer (i.e. at the bottom):

    .footer {
  position: fixed;
  bottom: 0;
}
    <div class="footer">
  <hr style="width:50%; text-align:bottom" /> Gemacht mit <span class="herz">❤</span> von <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. Alle Rechte vorbehalten.</small></div>
  <div><small><a href="https://fastdropg.carrd.co/impressum"></span>Impressum</a> ● <a href="https://fastdropg.carrd.co/contact">Kontakt</a> ● <a href="https://fastdropg.carrd.co/privacy">>Datenschutz</a></div></small>
  </div>
    Login or Signup to reply.
  2. 0

    you should put the hr inside the general div "footer" :

    <div class="footer">
<hr style="width:50%; text-align:bottom" />
        Gemacht mit <span class="herz">❤</span> von <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. Alle Rechte vorbehalten.</small></div>
    <div><small><a href="https://fastdropg.carrd.co/impressum"></span>Impressum</a> ● <a href="https://fastdropg.carrd.co/contact">Kontakt</a> ● <a href="https://fastdropg.carrd.co/privacy">>Datenschutz</a></div></small> 
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search