Aujourd'hui, je vous contacte pour un soucis que je rencontre déjà depuis quelques temps, je mets des propriétés attribué à des ID où des balises simplement mais cela ne s'applique malheureusement pas sur ma page web.
Voici un exemple de code qui s'applique mais pas entièrement :
Pour ce qui est de la table j'ai l'impression que tu as déjà mis en place la largeur "width:100%;"
et que tu essayes de la changer après via une classe select : width: 50%;
C'est l'élément parent qui a la priorité.
Bonjour,
Je tiens tout d'abord à préciser que le select est un élément indépendant de table.
Voici donc le code HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="ajax.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" id="detail">Voir le détail de mes résultats </button>
<div id="resultat">
<button class="btn btn-primary" onclick="ajax('resultat', 'nbre_points.php' );" id="score">Je souhaite consulter mon score</button>
</div> <br/> <br/>
<a href="/accueil.php" class="btn btn-danger">Retourner à l'accueil</a> <br/> <br/>
<h5>Vous voulez jouez à un nouveau quiz ? Veuillez le sélectionner dans le liste ci-dessous :</h5> <br/>
<form method="post">
<select id="monselect" class="form-control">
<option value="valeur1" selected>Veuillez séléctionner le quiz...</option>
<option value="automobile">Automobile</option>
<option value="musique">Musique</option>
<option value="journalier">Journalier</option>
<option value="evenements">Evenements</option>
</select> <br/> <br/>
<input type="submit" name="valider" value="Valider mon choix de quiz" class="btn btn-success">
</form>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Le détail de mes résultats (questions par questions): </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table>
<tr>
<th>N° de la question :</th>
<th>Votre réponse :</th>
<th>Résultat de votre réponse :</th>
</tr>
<tr>
<td><?php echo $_SESSION['QR'][0][0]; ?></td>
<td><?php echo $_SESSION['QR'][0][1]; ?></td>
<td><?php if($_SESSION['reponse1'] == $reponse1){
echo $reponse; }else{ echo $mauvaise_reponse1; }?></td>
</tr>
<tr>
<td><?php echo $_SESSION['QR'][1][0]; ?></td>
<td><?php echo $_SESSION['QR'][1][1]; ?></td>
<td><?php if($_SESSION['reponse2'] == $reponse2){
echo $reponse; }else{ echo $mauvaise_reponse2; } ?></td>
</tr>
<tr>
<td><?php echo $_SESSION['QR'][2][0]; ?></td>
<td><?php echo $_SESSION['QR'][2][1]; ?></td>
<td><?php if($_SESSION['reponse3'] == $reponse3){
echo $reponse; }else{ echo $mauvaise_reponse3; } ?></td>
</tr>
<tr>
<td><?php echo $_SESSION['QR'][3][0]; ?></td>
<td><?php echo $_SESSION['QR'][3][1]; ?></td>
<td><?php if($_SESSION['reponse4'] == $reponse4){
echo $reponse; }else{ echo $mauvaise_reponse4; } ?></td>
</tr>
<tr>
<td><?php echo $_SESSION['QR'][4][0]; ?></td>
<td><?php echo $_SESSION['QR'][4][1]; ?></td>
<td><?php if($_SESSION['reponse5'] == $reponse5){
echo $reponse; }else{ echo $mauvaise_reponse5; } ?></td>
</tr>
</table>
</div>
<div class="modal-footer">
<em>Pour rappel, votre partie avec les réponses que vous avez données sont automatiquement enregistrées et vous pourrez à tout moment les retrouver sur votre compte dans l'onglet "Mes parties"</em>
<button type="button" class="btn btn-danger" data-dismiss="modal">Fermer la fenêtre</button>
</div>
</div>
</div>
</div>
</body>
</html>
J'utilise comme tu pourras le voir, Bootstrap et je cherche aussi à modifier la largeur du modal mais pour le moment, je n'y arrive pas non plus, peut-être que ce n'est pas possible.
Tu as une idée avec le code HTML maintenant ?
@Reader : Quels sont les éléments qui n'auraient pas de position relative ou absolute, top, margin-top et padding-top ? Des exemples ?
Supprime le cache de ton navigateur et réessaie .Car il peut mettre en cache ton ancienne feuille css et l'utilisé au lieu de télécharger la nouvelle .
https://www.youtube.com/channel/UCMFbNXUkjSUJ6WC20tGTzJg