IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Positionnement éléments côte à cote


Sujet :

Positionnement en CSS

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2016
    Messages
    112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Mai 2016
    Messages : 112
    Points : 49
    Points
    49
    Par défaut Positionnement éléments côte à cote
    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 scrolle pour faire descendre
    pour voir tous les résultats de la requête, les widgets se placent mal lorsqu'il y a plusieurs enregistrements. Je cherche donc une propriété qui va faire
    scroller les éléments widgets avec le contenu de la page même s'il y a de nouveaux résultats de requête.

    Voici la partie php et html:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    <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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .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!

    Nom : widget.JPG
Affichages : 146
Taille : 146,9 Ko

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1- Regarde le code HTML généré.
    Tu verras qu'il n'est pas valide (mauvaises imbrications de balises,...).

    2- Revois le système de grid Bootstrap (quelle version ?).
    Apparemment, tu n'as pas bien compris comment ça fonctionne.

    3- Enfin, le code CSS que tu montres prouve que tu n'as pas bien compris comment le système de grid Bootstrap fonctionne.
    Dernière modification par Invité ; 07/08/2019 à 09h52.

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2016
    Messages
    112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Mai 2016
    Messages : 112
    Points : 49
    Points
    49
    Par défaut
    Bonjour jreaux.
    Merci pour la réponse. Peux-tu m'expliquer ou me montrer la partie exacte ou il y a le problème stp? Cela me permettra de bine revoir si je sais ou se situe le problème. On ne finit pas d'apprendre. J'apprendre toujours.
    Merci d'avance!

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <tr>
         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
         <td>
    Déjà ça, ce n'est pas possible.


    -> Regarde le code HTML généré ("Ctrl" + "U") !

    De plus :
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    echo '<b><b> [ '.$i.' ] </b></b>';
    Pourquoi doubler le <b> (partout) ??

    Quand à la balise <br>, elle s'écrit <br> ou <br />, mais pas </br> !
    Dernière modification par ProgElecT ; 09/08/2019 à 19h32.

Discussions similaires

  1. Positionnement éléments sur le scroll down
    Par Kagami dans le forum jQuery
    Réponses: 1
    Dernier message: 02/11/2017, 10h28
  2. Positionnement élément // incompatibilité ie et firefox
    Par sofiane06 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 18/08/2010, 21h58
  3. Positionnement élément absolu
    Par pierreonxbox dans le forum Android
    Réponses: 4
    Dernier message: 09/08/2010, 12h41
  4. [Toutes versions] 2 états en aperçu côte à cote en mosaïque verticale
    Par fevec dans le forum VBA Access
    Réponses: 7
    Dernier message: 04/09/2009, 08h10
  5. Positionnement éléments et layout
    Par bressan dans le forum Agents de placement/Fenêtres
    Réponses: 7
    Dernier message: 12/06/2006, 16h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo