CODEWITHSUNDEEP
htmlcss
Taylor
Taylor

Reputation: 5

How can I add HTML horizontal hr line

I am trying to add a horizontal line under the buttons as a spacer. How do I use hr to add a line that does not scale when zooming the webpage (the red line in the picture)?

The items on the page is middle centered. Like so:

The red lines were added later on.

Thank you

[class^="item"] {
  color: white;
  text-align: center;
  font-size: 21px;
  background-color: blue;
  height: fit-content;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 100px);
  grid-template-areas: "title title img" "buttons buttons img" "main main img" "main main other1";
  padding: 12px;
  grid-gap: 10px;
  padding-left: 90px;
  padding-right: 90px;
  margin: 0 auto;
  max-width: 1300px;
  min-width: 1300px;
  justify-content: center;
}

.item1 {
  grid-area: title;
  font-size: 31px;
  height: 50%;
  height: fit-content;
  padding: 10px;
}

.item2 {
  grid-area: img;
}

.item3 {
  grid-area: buttons;
  transform: translateY(-50px);
}

.item4 {
  grid-area: main;
  transform: translateY(calc(-86px + 40px));
}

.item5 {
  grid-area: other1;
  transform: translateY(-65px);
}
<div class="grid">
  <div class="item1">1 Fallout</div>
  <div class="item2">2
    <img src="../../Img/Game Covers/Fallout1Cover.bmp" width="165" height="241">
  </div>
  <div class="item3">3
    <a href="fallout1Characters.html"><button style="height: 50px; width: 120px">Characters</button></a>
    <a href="fallout1Locations.html"><button style="height: 50px; width: 120px">Locations</button></a>
    <a href="fallout1Items.html"><button style="height: 50px; width: 120px">Items</button></a>
    <button style="height: 50px; width: 120px">4</button>
  </div>
  <div class="item4">4 Fallout: A Post Nuclear Role Playing Game is an open-world turn-based role-playing video game developed and published by Interplay Productions in 1997. The game has a post-apocalyptic and retro-futuristic setting, in the aftermath of a global nuclear
    war in an alternate history timeline mid-22nd century. The protagonist of Fallout is an inhabitant of a Vault, long-term shelters, who is tasked to find a replacement Water Chip and save their Vault.
  </div>
  <div class="item5">ttt</div>
</div>

Upvotes: 0

Views: 104

Answers (2)

Soothran
Soothran

Reputation: 1243

1.Add a hr tag as shown below inside the div with classname 'item3'

<div class="item3">3
                <a href="fallout1Characters.html"><button style="height: 50px; width: 120px">Characters</button></a>
                <a href="fallout1Locations.html"><button style="height: 50px; width: 120px">Locations</button></a>
                <a href="fallout1Items.html"><button style="height: 50px; width: 120px">Items</button></a>
                <button style="height: 50px; width: 120px">4</button>

                <hr class="spacer">

            </div>

2.add below css

.spacer{
    position: absolute;
    bottom: -33px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: red;
}

3.add position relative to class .item3

Upvotes: 2

Farshad Fahimi
Farshad Fahimi

Reputation: 648

there is some different way at first you can set an hr in your view and with some help of css transform rotate that

the other hand you can set border next of item like hr and set space for that

Upvotes: 0

Related Questions