Problème de codage d'un tableau.

[vatnsmelona]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : dès la création du code
Lien du forum : http://sethview-rpg.forumactif.com

Description du problème

Bonjour à tous, aujourd'hui je viens vous voir car j'ai un petit problème de codage. Je viens de débuter donc je pense que c'est normal que je n'arrive pas du premier coup

Donc pour expliquer mon problème:
j'aimerai faire une boite dans laquelle se trouverait deux cases (donc quelque chose d'assez simple pour débuter), mais lorsque je mets mes deux cases elles se retrouvent dans le bas de la page alors que j'aimerais qu'elles soient plus haut.

Voici le codage que j'ai réalisé:

Code:

<div style="width:400px; height:250px; background-color:pink;">
<div align="center">
<table>
<tr valign="top"
     <td><div style="width:190px; height:100px; background-color:black">Case 1 avec un joli texte.</div></td>
     <td><div style="width:190px; height:100px; background-color:black">Case 2 avec un autre joli texte.</div></td>
</tr>
</table>
</div>
</div>

Merci d'avance de bien vouloir m'aider vous me sauveriez la vie

PS: merci de ne pas faire attention aux couleurs que j'ai mise dans mon tableau, elles ne sont pas du tout définitives ^^

[reshiram44]

Bonjour, j'ai refait ton code de a à z en évitant de mélanger les <table> avec les <div> donc voici le code.
Pour les blocs noir j'ai mis dans le css les balises

Code:

position:absolute;
margin-left:5px;
margin-top:-10px;

donc pour les positions absolute il y a un cours ici https://developer.mozilla.org/fr/docs/Web/CSS/position pour expliquer les différents propriétés et ensuite tu peux le postioner à l'aide des margin-top / margin-bottom / margin-left / margin-right.
Si tu as des questions n'hésite pas ^^.

Code:

<div style="width:400px; height:260px; background-color:pink;">
<div style="width:190px; height:100px; background-color:black;position:absolute;margin-left:5px;margin-top:-10px;"><div style="color:white;text-align:center;">Case 1 avec un joli texte.</div>
</div>
<div style="width:190px; height:100px; background-color:black;display:inline-block;position:absolute;margin-left:205px;margin-top:-28px;"><div style="color:white;text-align:center;">Case 1 avec un joli texte.</div>
</div>
</div>

[vatnsmelona]

Merci beaucoup à toi tu me sauves la vie ^^

C'est bon je n'ai aucune question, tes explications étaient très claires et merci de m'avoir diriger vers ce cours