Partage

Aligner des reponses

5 décembre 2017 à 15:15:10

Bonjour je souhaite aligner les réponses par rapport à la photo, j'ai déjà testé pleins de choses avec le fichier css  mais rien de bien concluant.

voici le code html concerné :

   <div class="container">
                <div class="test">
                <div class="row">
                    
                        <div class="col-sm-2">
                            <div class="topic">
                                <?php
                                $image=getreponse();
                                while ($donnees = $image->fetch())
                                {
                                ?>
                                    <div class="col-sm-12">
                                        <img src="scripts/avatar/<?php echo $donnees['avatar'];?>" width="110" height="120" /><br>
                                        <?php echo $donnees['pseudo'];?>
                                    </div>
                                    <?php
                                }
                                ?>
                            </div>
                        </div>
                    
                        <div class="col-sm-10">
                            <div class="topic">

                                <!-- affiche le text de la reponse -->
                                <?php  
                                $reponse = getreponse();
                                while ($donnees = $reponse->fetch())
                                { ?>
                                    <div class="col-sm-12">
                                        <div class="reponse">
                                    <?php echo $donnees['reponse']; ?> 
                                        </div>
                                    </div>
                                    <?php
                                }

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



-
Edité par loicfdu73 5 décembre 2017 à 15:15:29

5 décembre 2017 à 15:33:13

Salut si tu veut avoir plus de chance que les autres t'aide en HTML & CSS donne ta page une fois interpréter par le navigateur... donc sans PHP ou mieux une URL en ligne de ton site...
Problème résolu = Bouton en haut à droit + Un petit pouce en l'air sur le sujet qui ta aidé
5 décembre 2017 à 15:42:34

YOUPI UN FAN DE MR. ROBOT :ange:

.col-sm-12 {
    display:inline-block;
}
Good Luck cher ami fan

-
Edité par GuillaumeBo1 5 décembre 2017 à 15:44:45

Un homme azerty en vaut deux.
5 décembre 2017 à 15:49:34

Il faudrait effectivement le code de la page une fois interpréter par le navigateur pour plus de simplicité.

Mais de ce que je vois, le problème viens du Html, pas du css.

Tu as pour le moment 2 boucles while, chacune d'elle dans une collone (une colonne image, une colonne réponse)

Ce qu'il faut faire, c'est une seule boucle while qui te génère une 'row' par ittération et dnas ce while, faire une collone pour l'image et une pour la réponse

5 décembre 2017 à 15:54:23

Hello,

c'est peut-être ce que tu recherches ? fiddle

5 décembre 2017 à 15:56:21

larxenne a écrit:

Il faudrait effectivement le code de la page une fois interpréter par le navigateur pour plus de simplicité.

Mais de ce que je vois, le problème viens du Html, pas du css.

Tu as pour le moment 2 boucles while, chacune d'elle dans une collone (une colonne image, une colonne réponse)

Ce qu'il faut faire, c'est une seule boucle while qui te génère une 'row' par ittération et dnas ce while, faire une collone pour l'image et une pour la réponse


Aucunement d'accord ces boucles ne posent en rien problème ça lui permet d'afficher X éléments enregistrés dans ça BDD. il faut juste dire aux div contenant les réponses de toute se mettre cote à cote soit avec du flex soit avec inline-block

-
Edité par GuillaumeBo1 5 décembre 2017 à 15:57:33

Un homme azerty en vaut deux.
8 décembre 2017 à 11:13:30

Je connais l'utilité d'une boucle php ...

Mais la c'est bancale. Si les images et les réponses sont liées, alors il faut un seul boucle qui contient les 2 éléments.

Si il met toute les images dans une colonne et toutes les réponses dans une autre colonne, alors tu peux toujours t’arranger avec du flex etc, mais c'est pas la bonne solution selon moi.

Pour le moment la structure c'est:

<div class="row">
	<div class="col-sm-2">
		<div class="topic">
			<div class="col-sm-12">
				Image 1
			</div>
			<div class="col-sm-12">
				Image 2
			</div>
			<div class="col-sm-12">
				Image 3
			</div>
			<div class="col-sm-12">
				Image 4
			</div>
		</div>
	</div>

	<div class="col-sm-10">
		<div class="topic">
			<div class="col-sm-12">
				Reponse 1
			</div>
			<div class="col-sm-12">
				Reponse 2
			</div>
			<div class="col-sm-12">
				Reponse 3
			</div>
			<div class="col-sm-12">
				Reponse 4
			</div>
		</div>
	</div>
</div>

(Déja il a des col dans des col sans row entre le deux, ce n'est pas top)

Il faudrait comme structure:

<div class="row">
	<div class="col-sm-2">
		Image 1
	</div>
	<div class="col-sm-10">
		Reponse 1
	</div>
</div>

<div class="row">
	<div class="col-sm-2">
		Image 2
	</div>
	<div class="col-sm-10">
		Reponse 2
	</div>
</div>

<div class="row">
	<div class="col-sm-2">
		Image 3
	</div>
	<div class="c3l-sm-10">
		Reponse 1
	</div>
</div>

<div class="row">
	<div class="col-sm-2">
		Image 4
	</div>
	<div class="col-sm-10">
		Reponse 4
	</div>
</div>



Il y a environ 14 heures

Merci pour toutes vos réponses je vais essayer tout ça et je vous redit :)

Voici le code de la page une fois exécuté (avant les changements)

<DOCTYPE html>
        <html lang="fr">
        <meta charset="utf-8" />

        <!--pour faire fonctionner les boutons-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!-- fin -->

        <!-- CSS BOOTSRAP -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <!-- fin -->

        <head>
            <nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand">Forum</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
            <i class="fa fa-bar"></i>
            </button>

        </div>
        <div class="collapse navbar-collapse  navbar-main-collapse">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="Accueil.php">Accueil</a></li>
            <li><a href="Nouveau_sujet.php">Nouveau sujet</a></li>
            <li><a href="Aide.php">Aide</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="Message.php"><span class="glyphicon glyphicon-envelope"></span> Message</a></li>
            <li><a href="Profil.php"><span class="glyphicon glyphicon-user"></span> Compte</a></li>
            <li><a href="scripts\Deconnexion.php"><span class="glyphicon glyphicon-log-out"></span> Deconnexion</a></li>

        </ul>
        </div>
    </div>
</nav>
        </head>

        <body>

            <div class="container">
                <div class="row">

                    <div class="col-sm-2">
                        <div class="topic">
                            <img src="scripts/avatar/15.jpg" width="110" height="120" /><br>
                                chris
                        </div>

                    </div>

                    <div class="col-sm-10">
                        <div class="topic">
                            <!-- affiche le titre du topics -->
                            <h2>
                                HTML                            </h2>

                            <!-- affiche le text du topic -->
                                                
                    Dum apud Persas, ut supra narravimus, perfidia regis motus agitat insperatos, et in eois tractibus bella rediviva consurgunt, anno sexto decimo et eo diutius post Nepotiani exitium, saeviens per urbem aeternam urebat cuncta Bellona, ex primordiis minimis ad clades excita luctuosas, quas obliterasset utinam iuge silentium! ne forte paria quandoque temptentur, plus exemplis generalibus nocitura quam delictis.

Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.

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

            <!-- Reponses -->
            <div class="container">
                <div class="test">
                    <div class="row">

                        <div class="col-sm-2">
                            <div class="topic">
                                                                    <div class="col-sm-12">
                                        <img src="scripts/avatar/14.jpg" width="110" height="120" /><br>
                                        loic                                    </div>
                                                                        <div class="col-sm-12">
                                        <img src="scripts/avatar/14.jpg" width="110" height="120" /><br>
                                        loic                                    </div>
                                                                        <div class="col-sm-12">
                                        <img src="scripts/avatar/14.jpg" width="110" height="120" /><br>
                                        loic                                    </div>
                                                                </div>
                        </div>

                        <div class="col-sm-10">
                            <div class="topic">

                                <!-- affiche le text de la reponse -->
                                                                <div class="col-sm-12">
                                    <div class="reponse">
                                        test                                    </div>
                                </div>
                                                                <div class="col-sm-12">
                                    <div class="reponse">
                                        reponse 2                                    </div>
                                </div>
                                                                <div class="col-sm-12">
                                    <div class="reponse">
                                        reponse 3                                    </div>
                                </div>
                                                            </div>
                        </div>
                    </div>
                </div>
            </div>
                            <div class="container">
                    <div class="row">
                        <div class="col-sm-2">
                            <div class="rep">
                                <img src="scripts/avatar/14.jpg" width="110" height="120" />
                            </div>
                        </div>
                        <div class="col-sm-10">
                            <div class="rep">
                                <form action="scripts/Reponse_Sujet.php?idu=14&ids=24" method="POST">
                                    <textarea name="reponse" placeholder="Votre réponse"></textarea>
                                    <input type="submit" name="formreponse" value="Répondre" />
                                </form>
                            </div>
                        </div>

                    </div>
                </div>


        </body>
        <footer>
        </footer>

        </html>
    </DOCTYPE>




edit: du coup  la structure que tu me propose est la même  que la mienne, ensuite j'ai mis des col sans row pour que le texte s'affiche à coté et non en dessous et pour que les images restent alignées entre elle.

Ou alors je ne sais pas comment l’écrire pour que le résultat obtenu par la page soit comme le tient.

J'ai ensuite testé en mettant les 2 boucles dans une mais du coup j'ai toutes les réponses qui s'affichent sous chaque image.

je pense donc qu'il faut que je me tourne vers le css

-
Edité par loicfdu73 il y a environ 14 heures

Il y a environ 12 heures

Non, le css ne sera pas la solution, c'est le html qui n'est pas bon.

La structure que je te propose n'est pas la même.
Pour faire ce que tu veux, le plus simple et le plus propre est de faire une "row" pour chaque binome image / reponse.

L'idéal, c'est d'avoir une boucle php, cette boucle se fait sur un tableau contenant des objets.
Chaque objet contenant : L'image et la réponse.

Le soucis c'est que la tu fais 2 boucles sur 2 tableaux, l'idéal serait d'avoir un seul et unique tableau.

Il y a environ 12 heures

daccord faut juste que je trouve comment faire ^^

J'ai fait ça et chaque réponse s'affiche sous l'image correspondante, c'est deja mieux mais comment faire pour afficher la réponse à coter de l’image ?


<div class="container">
                <div class="test">
                    <div class="row">
                        <div class="col-sm-12">

                        <?php
                            $image=getreponse();
                            $reponse = getreponse();
                                while ($donnees = $image->fetch() and $donnes = $reponse->fetch())
                                {
                                ?>
                            <!--affiche l'image -->
                            <div class="col-sm-12">
                                <div class="row">
                                    <img src="scripts/avatar/<?php echo $donnees['avatar'];?>" width="110" height="120" /><br>
                                    <?php echo $donnees['pseudo']; ?>
                                </div>
                            </div>

                            <!-- affiche le text de la reponse -->
                            <div class="col-sm-12">
                                <div class="row">
                                    <?php echo $donnees['reponse'];?>
                                </div>
                            </div>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>


-
Edité par loicfdu73 il y a environ 11 heures

Il y a environ 6 heures

Salut, pour aider un peu :

.row =  ligne

.col = colonne

Si tu veux afficher des colonnes, il te faut l'englober en premier sur la ligne et dans la ligne, tes colonnes

là tu fais l'inverse, tu mets une ligne dans la colonne

donc en gros tu fais ton while et dedans tu mets ta ligne et dans ta ligne, tes colonnes

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE

Aligner des reponses

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown