Положение foreach l oop работает неправильно

Question

Я пытаюсь составить список с людьми, которые были сохранены в базе данных mysql, однако только первый элемент базы данных оформлен должным образом, а остальные неуместны. Я довольно новичок с css и, вероятно, допустил ошибку в то время как l oop или позиционирование.

https://i.imgur.com/cKJqT6s.png Изображение ^^

Я использую следующий код:

   <div id="adminsummary">

<div id="admintitel">
    <p id="admintext">Admin Overview</p>
</div>
<?php
while ($row = mysqli_fetch_array($result)) {
    $steamid = $row["steamid"];
    $xml = simplexml_load_file("http://steamcommunity.com/profiles/$steamid/?xml=1");
    if (!empty($xml)) {
        $username = $xml->steamID;
    }
    ?>

    <div id="admin">
        <img id="adminimg" src="<?php echo $steamprofile['avatarmedium']; ?>">
        <p id="adminname"><?php echo $username; ?></p>
     <!--   <p id="adminname"> SteamID: <?php echo $row["steamid"]; ?></p> -->
        <p id="adminname"> Rank: <?php if ($row["rank"] == 1) {echo "SuperAdmin";} else {echo "Admin";} ?></p>
        <hr id="hr2">
    </div>
    </div>

Таблица стилей:

#adminsummary {
    background: white;
    margin-top: 5%;
    height: 75%;
    width: 25%;
    margin-right: 5%;
    float:right;
    border-radius: 25px;
    box-shadow: 10px 10px 77px -6px rgba(0,0,0,0.59);
}

#admintitel{
    background: #343a40;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;


}

#admintext{
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 25px;

}


#adminimg {

    border-radius: 25px;
    float: left;
    margin-left: 25px;
}


#hr2 {
    display: block;
    margin-top: 25px;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

#adminname {
    text-align: left;
    font-weight: bold;
    margin-left: 25%;
    font-family: sans-serif;
}

Спасибо, что нашли время помочь мне

Answer 1

Попробуйте поместить классы вместо идентификатора в ваши divs и p внутри while l oop.

Идентификаторы уникальны в CSS, что объясняет, почему стилизована первая строка а не другие.

Answer 2

Если вы измените HTML и удалите идентификаторы в l oop, вы можете использовать комбинацию классов с селекторами дочерних / родных элементов для более четкого назначения стилей

<!-- these IDs are OK as they are unique ( presumably ) -->
<div id="adminsummary">

    <div id="admintitel">
        <p id="admintext">Admin Overview</p>
    </div>

    <?php

        while ($row = mysqli_fetch_array($result)) {
            $steamid = $row["steamid"];
            $xml = simplexml_load_file("http://steamcommunity.com/profiles/$steamid/?xml=1");

            if (!empty($xml)) {
                $username = $xml->steamID;
            }

    ?>

    <!-- use classes &/or sibling selectors for cleaner html ~ no duplicate IDs though -->
    <div class="admin">
        <img src="<?php echo $steamprofile['avatarmedium']; ?>">
        <p><?php echo $username; ?></p>
        <p> Rank: <?php if ($row["rank"] == 1) {echo "SuperAdmin";} else {echo "Admin";} ?></p>
        <hr />
    </div>


    <?php
        }//close loop
    ?>

</div>

слегка изменено CSS с использованием дочерних селекторов для назначения стилей в кодовом блоке .admin

#adminsummary {
    background: white;
    margin-top: 5%;
    height: 75%;
    width: 25%;
    margin-right: 5%;
    float:right;
    border-radius: 25px;
    box-shadow: 10px 10px 77px -6px rgba(0,0,0,0.59);
}
#admintitel{
    background: #343a40;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
#admintext{
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 25px;
}


#adminsummary .admin img {
    border-radius: 25px;
    float: left;
    margin-left: 25px;
}

#adminsummary .admin hr {
    display: block;
    margin-top: 25px;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}
#adminsummary .admin p {
    text-align: left;
    font-weight: bold;
    margin-left: 25%;
    font-family: sans-serif;
}