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...
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
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
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.
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 DirkGently 11 décembre 2017 à 11:14:52
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.
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 ?
2ème chose, si tu met tes 'col' en: 'col-sm-12', elles vont prendre toute une ligné (une 'row' est composé de 12 'col'). Donc met plutôt tes 'col' en 'col-sm-6', par exemple.
Mais je pense que tu devrais revoir le système de grille de bootstrap, il me semble que tu ne le maîtrise pas encore très bien
Tu as édité le code de ton précédent message ? J'y vois toujours une double row.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Aligner des reponses
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)