Positionnement côte à cote de 2 blocs

Fermé
Busima Messages postés 55 Date d'inscription mercredi 10 février 2016 Statut Membre Dernière intervention 29 janvier 2021 - 7 août 2019 à 00:43
Morseaux Messages postés 41 Date d'inscription jeudi 27 septembre 2018 Statut Membre Dernière intervention 18 mai 2023 - 13 août 2019 à 09:46
Salut,
j'ai un soucis avec mon code css.
En effet, je cherche à mettre des widgets à côté (à droite) des résultats de requête venant de ma base de données.
j'ai déjà essayé la propriété "position:fixed" mais elle ne me donne pas ce que je veux. Elle fixe l'élément mais lorsque je scrole pour faire descendre
pour voir tous les resultats de la requête, les widgets se placent mal lorsqu'il y a plusieurs enregistrements. Je cherche donc une propriété qui va faire
scroler les éléments widgets avec le contenu de la page même s'il ya de nouveaux résultats de requête.

Voici la partie php et html:
Code :
<div class="container"> 
                                    <div class="row">								
								        <section class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="partag">
										    <?php include ('config.php');?>  
											<?php
												$immobiliersParPage=5; //Nous allons afficher 5 messages par page.
												//Une connexion SQL doit être ouverte avant cette ligne...
												$retour_total=$bdd->query('SELECT COUNT(*) AS total FROM immobiliers WHERE type="terrain" AND ville="abidjan"'); //Nous récupérons le contenu de la requête dans $retour_total
												$donnees_total=$retour_total->fetch(PDO::FETCH_ASSOC);
 
												$total=$donnees_total['total']; //On récupère le total pour le placer dans la variable $total.
 
												//Nous allons maintenant compter le nombre de pages.
												$nombreDePages=ceil($total/$immobiliersParPage);
 
												if(isset($_GET['page'])) // Si la variable $_GET['page'] existe...
												{
													$pageActuelle=intval($_GET['page']);
 
													if($pageActuelle>$nombreDePages) // Si la valeur de $pageActuelle (le numéro de la page) est plus grande que $nombreDePages...
													{
														$pageActuelle=$nombreDePages;
													}
												}
												else 
												{
													$pageActuelle=1; // La page actuelle est la n°1    
												}
 
												$premiereEntree=($pageActuelle-1)*$immobiliersParPage; // On calcul la première entrée à lire
 
												// La requête sql pour récupérer les messages de la page actuelle.
												$req_retour_immobiliers=$bdd->query('SELECT * FROM immobiliers WHERE type="terrain" AND ville="abidjan" ORDER BY idIm DESC LIMIT '.$premiereEntree.', '.$immobiliersParPage.'');
 
														if($donnees = $req_retour_immobiliers->fetch(PDO::FETCH_ASSOC))
															{
																do
																	{
																echo'<div class="row">
																		<table border="2px"; width:800px; height:500px; color="#FFFFFF";>
																		    <tr>
																				<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
																					<td>
																					    <a href="operation.php?id='.$donnees['idIm'].'">
																					    <img src="images/photos/'.$donnees['photo1'].'" class="photo" class="img-responsive img-rounded"/></a>  <!--style="width:350px; height:250px; color="#FFFFFF";"-->
																					</td>
																				</div>
 
																				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> </br>
																					<td class="description">
																					    <a href="operation.php?id='.$donnees['idIm'].'" class="resulat_requette_partie1">
																						 <b><b>Numero:</b></b> '.htmlentities($donnees['idIm']).'</br><b><b>ville</b></b>: '.htmlentities($donnees['ville']).'</br><b><b>quartier</b></b>: '.$donnees['quartier'].'</br><b><b>Type:</b></b> '.$donnees['type'].'</br><b><b>Titre:</b></b> ' .$donnees['titre'].'</br><b><b>Statut:</b></b> En ' .$donnees['statut'].'
																					    </a>
																					</td>
																				</div>
																			</tr>
																		</table>
																	</div>';
 
															} while($donnees = $req_retour_immobiliers->fetch(PDO::FETCH_ASSOC));
														}
															else
																{
																	echo '<center></br><b><b>Pas de résultat pour le moment!</br></br> Revenez voir plus tard svp! 
																	<a href="index.php">Accueil</a></b></b></center></br>';
																}
																	$req_retour_immobiliers->closeCursor();
												  /*   } else
															{ 
																echo "Il faut d'abord saisir un terme avant de le rechercher!";
															} */
 
												echo '<center><p align="center" class="pagination"><b><b>Page :</b></b> '; //Pour l'affichage, on centre la liste des pages
												for($i=1; $i<=$nombreDePages; $i++) //On fait notre boucle
												{
													 //On va faire notre condition
													 if($i==$pageActuelle) //Si il s'agit de la page actuelle...
													 {
														 echo '<b><b> [ '.$i.' ] </b></b>'; 
													 }	
													 else
													 {
														  echo ' <a href="location_villas.php?page='.$i.'">'.$i.'</a> ';
													 }
												}
												echo '</p></center>';
											?>
											<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" id="widgets">
											    <h2><b>WIDGETS</b></h2>
												<img class="img-responsive" src="img/agim14.jpg"><br>
												<p>Nous avons le choix de mettre tous ce que nous voulons dans ce widget.
												Nous avons le choix de mettre tous ce que nous voulons dans ce widget.
												Nous avons le choix de mettre tous ce que nous voulons dans ce widget.
												Nous avons le choix de mettre tous ce que nous voulons dans ce widget.</p>
												<img class="img-responsive" src="img/agim14.jpg"><br>
											</div>
									    </section>  
 
                                	</div>
				                </div>

Ensuite voici la partie css du code:

Code :
.resulat_requette_partie1
	{
	   width:500px; height:200px;background-color:rgb(249,175,86);padding:5px;display:block; margin-left:-15px;margin-right:5px;
	}
 
.photo
	{
	   width:265px; height:200px;display:block;
	}
 
Ci-dessous le widget que je cherche à positionner éternellement sur la page pour embellir la page et qui doit bouger avec le contenu pour aller en haut comme en bas.
 
#widgets
	{
	    width:400px; height:400px;display:block;margin-left:760px;margin-right:0px;margin-top:-820px;padding:50px; position:fixed; top:120%;right:12%;
	}


Ci-joint une capture de ce qui se passe lorsque je scrole la page pour descendre. Il ya de l'espace entre le haut et le widget, c'est ce que je ne veux pas d'ailleurs.
Merci pour votre aide!

1 réponse

Morseaux Messages postés 41 Date d'inscription jeudi 27 septembre 2018 Statut Membre Dernière intervention 18 mai 2023 219
13 août 2019 à 09:46
Salut!

Je suis pas rentré en profondeur dans le code, mais ça pourrait pas juste être la valeur "top" de #widgets qui pose problème? Genre la remplacer par 5 ou 10%?
0