Bonjour à tous,

je bloque sur un élément pourtant simple : 

j'ai actuellement une liste d'élément afficher dans une section (5 par défaut) et un menu déroulant me permettant d'augmenter le nombre d'élement à afficher.

<section class="events" id="events-section">
        <div class="content-wrapper">
            <div class="inner-container container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="section-heading">
                            <div class="filter-categories">
                                <ul class="project-filter">
                                    <li class="filter" data-filter="all"><span>L'agenda général</span></li>
                                    <li class="filter" data-filter="Réunion"><span>Réunions</span></li>
                                    <li class="filter" data-filter="Action"><span>Journées d'action</span></li>
									<li class="filter" data-filter="Conférence"><span>Conférences</span></li>
									<li class="filter" data-filter="Sortie"><span>Sorties</span></li>                                    
                                </ul>
								<?php
					echo'<form method="post" action="index.php#events-section">';
					echo'
					<label>Afficher plus:</label>
					<select name="page" onChange="this.form.submit();">';
					echo'<option value="5">5</option>';
					echo'<option value="10">10</option>';
					echo'<option value="15">15</option>';
					echo'</select>
					<noscript><input type="submit" value="Envoyer"></noscript></form>';
					?>
                            </div>
                        </div>
                    </div>
					
                    <div class="col-md-10 col-sm-12 col-md-offset-1">
                        <div class="projects-holder">
                            <div class="event-list">
                                <ul style="display: block; position:relative;">
								<?php
								$page = 5;
								if (isset($_POST["page"])) {
								$page = $_POST["page"];
								}
								
								$req = $db->query('SELECT * FROM forum_agenda ORDER BY agenda_id DESC LIMIT 0,'.$page);
								$event = $req->fetchAll();
								foreach ($event as $article): ?>	
                                    <li class="project-item first-child mix <?php echo $article['agenda_cat'];?>">
                                        <ul class="event-item <?php echo $article['agenda_cat'];?>">
                                            <li>
                                                <div class="date">
                                                    <span><?php echo $article['agenda_date_D'];?>
													<br>
													<?php echo $article['agenda_date_M'];?></span>
                                                </div>
                                            </li>
                                            <li>
                                                <h4><?php echo $article['agenda_titre'];?></h4>
                                                <div class="web">
                                                    <span><?php echo $article['agenda_cat'];?></span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="time">
                                                    <span><?php echo $article['agenda_time_start'];?> - <?php echo $article['agenda_time_end'];?><br><?php echo $article['agenda_date_J'];?></span>
                                                </div>
                                            </li>
											<li>
                                                <h4><?php echo $article['agenda_lieu'];?></h4>
                                                <div class="web">
                                                    <span><?php echo $article['agenda_org'];?></span>
                                                </div>
                                            </li>
											<li>
                                                <div class="white-button">
													<?php
													
													$query=$db->prepare('SELECT * FROM forum_membres WHERE membre_id = :id');
													$query->bindValue(':id', $id ,PDO::PARAM_INT);
													$query->execute();
													$checkmembre=$query->fetch();
													
													if (!empty($id)) {
													$query=$db->prepare('SELECT * FROM forum_agenda_present WHERE membre_id = :id AND agenda_id =:agenda_id');
													$query->bindValue(':id', $id ,PDO::PARAM_INT);
													$query->bindValue(':agenda_id', $article['agenda_id'] ,PDO::PARAM_INT);
													$query->execute();
													if ($data=$query->fetch())
													{
														echo '<a href="desinscription.php?a='.$article['agenda_id'].'"> Se désinscrire </a>';
													}
													else
													{
														echo '<a href="inscription.php?a='.$article['agenda_id'].'"> S inscrire </a>';
															}													
													
													$query->CloseCursor();
													}
													if (empty($id)) {
													?>
														<a onclick="$('#login').css('display', '');$('#login_background').css('display', '');"> Se connecter </a>
													<?php	
													}
													if ($checkmembre['membre_rang'] > 1)
													{
														echo'
														<a href="admin/fiche_presence.php?action=consulter&p='.$article['agenda_id'].'"><img src="./forum/img/feuille.png" alt="feuille présence" title="feuille présence" /></a>
													';
													}
													if ($checkmembre['membre_rang'] > 3)
													{
														echo'
														<a href="admin/admin.php?cat=agenda&amp;action=modifier&amp;a='.$article['agenda_id'].'"><img src="./forum/img/edit.png" alt="éditer" title="éditer" /></a>
													';
													}
													?>
														
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
									<?php endforeach ?>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </section>

et pour le css, rien qui n'apparait pas ici à part:

.event-list ul li {
	display: block;
	text-align: left;
	margin-bottom: 5px;
}

ici j'ai attribué à mon <ul> une position relative et un display=block. Pourtant losque j'augmente le nombre d'élément, les sections qui suivent ne bougent pas (section également avec un position: relative;")

est ce un problème de height non déterminé ? (j'ai tenté avec un height:auto mais pas plus efficace) Comment feriez vous ?

-
Edité par OlivierPetit15 17 février 2020 à 15:49:00