Grid Alignment when using absolute-images (Boostrap)

Question

im new to coding in general and new to this site so sorry if I am doing anything wrong. I wanted to create a picrew-like site and have run into a problem. I want to align it so the character is on top and the buttons to choose other options are at the bottom: image link

But at the moment the whole alignment is just wonky at best and disastrous if I'm being honest. I am pretty sure its because of the relative and absolute positioning, but thats the only way I found how to add pictures ontop of eachother (like, putting the eyes onto the head).

<body>
        <div class="container ">
            <div class="row">
              <div class="col">
                <div class="navbar">
                    navbar soon to be
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="img-display position-relative">
                    <img class="body-part position-absolute" id="body-section" src="/testImage/body_default.png"  alt="Default Body" width=400px;/>
                    <img class="head-part position-absolute" id="head-section" src="/testImage/head_default.png"  alt="Default Head" width=400px;/>
                    <img class="ears-part position-absolute" id="ears-section" src="/testImage/ears_default1.png"  alt="Default Ears" width=400px;/>
                    <img class="eyes-part position-absolute" id="eyes-section" src="/testImage/eyes_default.png" alt="Default Eyes" width=400px;/>
                    <img class="mouth-part position-absolute" id="mouth-section" src="/testImage/mouth_default.png" alt="Default Mouth" width=400px;/>
                    <img class="nose-part position-absolute" id="nose-section" src="/testImage/nose_default.png" alt="Default Nose" width=400px;/>
                    <img class="eyebrows-part position-absolute" id="eyebrows-section" src="/testImage/eyebrows_default.png" alt="Default Eyebrows" width=400px;/>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="options-menu">
                    <ul class="test1">
                        <li class="test">X-Type</li>
                        <li class="test">X-Type</li>
                        <li class="test">X-Type</li>
                        <li class="test">X-Type</li>
                    </ul>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="options">
                    <ul class="test1">
                        <li class="test"><button onclick="changeImage('/testImage/ears_default1.png')"><img src="/testImage/ears_default1.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default2.png')"><img src="/testImage/ears_default2.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default3.png')"><img src="/testImage/ears_default3.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default4.png')"><img src="/testImage/ears_default4.png" width="108px" height="192px"/></button></li>
                        <li class="test"><button onclick="changeImage('/testImage/ears_default5.png')"><img src="/testImage/ears_default5.png" width="108px" height="192px"/></button></li>
                    </ul>
                </div>
              </div>
            </div>
          </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script src="script.js"></script>
    </body>

Your width attributes should read as `width="400"` instead of what you have. Although I would recommend setting that value with CSS instead :) — Frish, Aug 25 '22 at 00:30

score 1 · Accepted Answer · answered Aug 25 '22 at 00:28

Managing a complex layout with absolutely positioned elements is possible, but tricky. Consider using display: grid (handy reference here)!

Lay out your grid areas as you expect your facial features to appear (eyes, nose, ears, mouth, what-have-you). You can constrain them to fixed widths and heights, and play with the inner content alignment as you see fit. If body parts take up more than one grid area, then you may need to be clever with the grid-template-areas property. You can still use position: absolute within the grid areas.

Here's a little demo I whipped up with a very uninspiring face:

.container {
  padding: 2rem 0;
}

.head {
  border: 1px solid black;
  border-radius: 50%;
  display: grid;
  grid-template-areas:
    "left-eye right-eye"
    "nose nose"
    "mouth mouth";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  padding: 1rem;
  width: 100px;
  height: 100px;
}

/* Use display: flex; to vertically and horizontally 
   center elements within the grid areas */
.body-part {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-eye {
  grid-area: left-eye;
}

.right-eye {
  grid-area: right-eye;
}

.nose {
  grid-area: nose;
}

.mouth {
  grid-area: mouth;
}

<div class="container">
  <div class="head">
    <div class="body-part left-eye">0</div>
    <div class="body-part right-eye">0</div>
    <div class="body-part nose">|</div>
    <div class="body-part mouth">______</div>
  </div>
</div>
<div class="container">
  Controls, etc. here
</div>

Thank you. I knew grids existed but I somehow didnt think of using them - I now have a version that does not need any position and works more than fine with the grid system. Thank you again, you made my night! — ProjectDean, Aug 25 '22 at 02:19

Grid Alignment when using absolute-images (Boostrap)

1 Answers1