Superposition de tableaux (CSS)
Lacide
Messages postés
785
Statut
Contributeur
-
Oduesp -
Oduesp -
Bonjour,
Je sais que la question a été posé plusieurs fois, mais aucune de celles que j'ai lu ne me permet de réaliser ce que je veux.
Je voudrais obtenir un résultat comme ceci :
https://i49.servimg.com/u/f49/11/09/56/31/intri-10.png
Il s'agit en fait d'enchainer plusieurs questions réponses avec ce design de tableaux.
Est-ce que quelqu'un aurait une idée de comment faire ?
J'ai déjà fait un bout de code basique, mais je n'arrive pas à grand-chose de plaisant. Je précise que je ne tiens pas à faire de feuille de style séparée car cela n'a lieu que pour un seul post et c'est à poser sur un forum, donc je n'en ai pas l'utilité (d'où l'intégration du css directement dans le code html).
Voici ce que j'ai :
<html><head><title>Essai questionnaire</title>
</head><body>
<table border="1" style="position:relative; top:87px; width:350px; height:100px; border-style: dotted solid dashed ; border-color:green ;" class="framemonster"><tr><td><div style="padding:30px;" >Question du lecteur</div></td>
</tr></table>
<table border="1" style="position:relative; left:15%; border-top-style: solid ; border-width: thin ; border-color:white; width:500px; height:320px;" class="framemonster"><tr><td><div style="padding:40px;" >Réponse du consultant</div></td>
</tr></table>
</body></html>
Je joue avec la position des tableaux, mais j'avoue ne pas trop savoir ce qu'il faut vraiment mettre en oeuvre. Une idée ?
Merci d'avance pour votre aide.
Lacide.
Je sais que la question a été posé plusieurs fois, mais aucune de celles que j'ai lu ne me permet de réaliser ce que je veux.
Je voudrais obtenir un résultat comme ceci :
https://i49.servimg.com/u/f49/11/09/56/31/intri-10.png
Il s'agit en fait d'enchainer plusieurs questions réponses avec ce design de tableaux.
Est-ce que quelqu'un aurait une idée de comment faire ?
J'ai déjà fait un bout de code basique, mais je n'arrive pas à grand-chose de plaisant. Je précise que je ne tiens pas à faire de feuille de style séparée car cela n'a lieu que pour un seul post et c'est à poser sur un forum, donc je n'en ai pas l'utilité (d'où l'intégration du css directement dans le code html).
Voici ce que j'ai :
<html><head><title>Essai questionnaire</title>
</head><body>
<table border="1" style="position:relative; top:87px; width:350px; height:100px; border-style: dotted solid dashed ; border-color:green ;" class="framemonster"><tr><td><div style="padding:30px;" >Question du lecteur</div></td>
</tr></table>
<table border="1" style="position:relative; left:15%; border-top-style: solid ; border-width: thin ; border-color:white; width:500px; height:320px;" class="framemonster"><tr><td><div style="padding:40px;" >Réponse du consultant</div></td>
</tr></table>
</body></html>
Je joue avec la position des tableaux, mais j'avoue ne pas trop savoir ce qu'il faut vraiment mettre en oeuvre. Une idée ?
Merci d'avance pour votre aide.
Lacide.
A voir également:
- Superposition de tableaux (CSS)
- Tableaux croisés dynamiques - Guide
- Fusionner deux tableaux excel - Guide
- Les tableaux word - Guide
- Les données fournies dans le fichier à télécharger peuvent être synthétisées par le tableau récapitulatif ci-dessous. dans le fichier, générez ce tableau automatiquement (tableau croisé dynamique ou table de pilote) à partir des quatre premières colonnes. il manque 5 valeurs dans le tableau ci-dessous. retrouvez-les dans votre tableau, puis reportez-les arrondies à l’entier le plus proche. ✓ - Forum Excel
- Tableau de combinaison loto 5/90 - Forum Excel
1 réponse
yo, je voit aucune utilité d'avoir un tableau de une case...utilisez plutôt des div.
Pourquoi ne pas faire un div qui contient l'autre et positionner celui de l'intérieur en fonction des bords de l'extérieur?
<div class="container">
<p class="question">
Question
</p>
<br/>
<div class="reponse">
<p class="textereponse">
Réponse
</p>
</div>
</div>
Voilà déjà plus propre non?
<table border="1
Ceci est inutile puisque les bordures sont définies en css.
Ou avec un tableau(méthode dépréciée puisque ce ne sont pas des données tabulaires):
<table class="contient"><!-- CE TABLEAU FAIT 3X3
<caption>
Question/Réponse
</caption>
<tr>
<td>
<p>Question</p> <!-- CELLULE EN HAUT A GAUCHE --->
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tr>
<tr>
<td></td>
<td></td>
<td>R&eaccute;ponse</td> <!-- CELLULE EN BAS A DROITE --->
</tr>
</table>
Il suffit de donner des dimensions aux cellules pour ajuster à la mise en forme que vous voulez.
Pourquoi ne pas faire un div qui contient l'autre et positionner celui de l'intérieur en fonction des bords de l'extérieur?
<div class="container">
<p class="question">
Question
</p>
<br/>
<div class="reponse">
<p class="textereponse">
Réponse
</p>
</div>
</div>
Voilà déjà plus propre non?
<table border="1
Ceci est inutile puisque les bordures sont définies en css.
Ou avec un tableau(méthode dépréciée puisque ce ne sont pas des données tabulaires):
<table class="contient"><!-- CE TABLEAU FAIT 3X3
<caption>
Question/Réponse
</caption>
<tr>
<td>
<p>Question</p> <!-- CELLULE EN HAUT A GAUCHE --->
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tr>
<tr>
<td></td>
<td></td>
<td>R&eaccute;ponse</td> <!-- CELLULE EN BAS A DROITE --->
</tr>
</table>
Il suffit de donner des dimensions aux cellules pour ajuster à la mise en forme que vous voulez.
