Question 327994 in Html Question posted in
Some basic documentation can be found here.

having trouble creating something simple… info panel of a person (HTML, CSS)

what i need is a picture on the left of the panel then a title on the top right with list of text underneath the title. seems quite simple but cant seem to achieve it with the size or layout going haywire…

the layout i would like:
Panel Layout

using Visual Studio Code for both HTML and CSS

this is what i’ve just so far in HTML:

        <div class="role">
            <img id="role1" src="../images/owner.png" alt="Owner of Syndel">
            <div class="box">
                <ul>
                    <div class="picture">
                        <li><img src="../images/sinswordace150.png" alt="SinSwordAce's Profile Picture"></li>
                    </div>
                    <div class="title">
                        <li><h3>SinSwordAce</h3></li>
                    </div>
                    <div class="details">

                    </div>
                </ul>
            </div>
        </div>

.role {
    justify-content: center;
    margin-top: 20px;
    column-gap: 15px;
    row-gap: 15px;
}

.box {
    width: 900px;
    height: 300px;
    text-align: center;
    border-radius: 20px;
    justify-content: center;
    border: 7px solid rgba(169, 169, 169, 0.250);
    background: rgba(255, 255, 255, 0.050);
}

.picture {
    text-align: left;
    list-style-type: none;
}

.title {
    text-align: right;
    list-style-type: none;
}
Tags:

2

Answers


  1. 0

    wrap everything in one div and make a grid layout.

    <div class="grid">
  <img ... />
  <div>
    <div class="title"> ... </div>
    <div class="details"> ... </div>
  </div>
</div>

    .grid {
  display: grid;
  grid-template-columns: auto auto;
}

    more about grid layouts here:

    https://www.w3schools.com/css/css_grid.asp

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

    Login or Signup to reply.
  2. 0

    What you could also do is to seperate your layout into divs and then using flexbox rearrange into your desired layout.

    .role {
    justify-content: center;
    margin-top: 20px;
    column-gap: 15px;
    row-gap: 15px;
}

.box {
    width: 900px;
    height: 300px;
    display:flex;
    border-radius: 20px;
    justify-content: center;
    border: 7px solid rgba(169, 169, 169, 0.250);
    background: rgba(255, 255, 255, 0.050);
}

.left-side {
    height:100%;
    width:50%;
    background-color:red;
}

.right-side {
    height:100%;
    width:50%;
}
.title {
    background-color:green;
    height:20%;
    width:100%;
}
.title h3 {
  margin-top:0px;
}
.details {
    background-color:yellow;
    height:80%;
    width:100%;
}
    <div class="role">
    <img id="role1" src="../images/owner.png" alt="Owner of Syndel">
    <div class="box">
            <div class="left-side">
                <img src="../images/sinswordace150.png" alt="SinSwordAce's Profile Picture">
            </div>
            <div class="right-side">
                  <div class="title">
                      <h3>SinSwordAce</h3>
                  </div>
                  <div class="details">

                  </div>
            </div>
    </div>
</div>

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search