Superposition de tableaux (CSS)

Fermé
Lacide Messages postés 737 Date d'inscription mardi 24 octobre 2006 Statut Contributeur Dernière intervention 1 juillet 2022 - Modifié par Lacide le 18/08/2011 à 03:06
 Oduesp - 18 août 2011 à 03:44
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.

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.
0