Discussion :

[jak0]

Bonjour à tous,

Je connais bien le HTML mais je suis un peu noob en CSS, surtout en ce qui concerne le position de DIV en absolut, relatif, etc... C'est pourquoi j'aurai besoin de votre aide.

J'ai un tableau (ah, un bon vieux tableau ^^), et dans chaque case, je souhaite afficher un chiffre au centre, un triangle en haut à droite, un triangle en bas à droite et un triangle en bas à gauche. Je ne vous le cache pas, c'est pour une sorte de calendrier.
Je n'arrive pas à avoir un rendu correct et surtout un code propre (j'utiliserai une feuille externe ensuite).

Voila ce que j'ai codé pour le moment, pour chaque case (avec 3 images de 30px par 30px) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div style="width:60px;height:60px;border:0px solid black;">
   <div style="position:absolute;float:left;width:60px;height:60px;text-align:center;vertical-align:center;z-index:2;">
              15
   </div>
   <div style="position:relative;float:left;width:30px;height:30px;"></div>
   <div style="position:relative;float:right;"><img src="./top_right.gif" /></div>
   <div style="position:relative;float:left;"><img src="./bottom_left.gif" /></div>
   <div style="position:relative;float:right;"><img src="./bottom_right.gif" /></div>
</div>

Ca marche à peu près sous FF, mais pour IE, le texte ne s'affiche pas.
Merci d'avance pour toute votre aide.

[1407.]

pour positionner tes images, tu peux utiliser des marges. Ex

images en haut a droite tu utilise margin-right et margin-top, en bas a droite tu utilise margin-right et margin-bottom, et pour ton image en bas a gauche tu utilise les margin-left et margin-bottom


Voila.

[jak0]

Je comprend pas commentdes margin peuvent déplacer une image dans un coin de ma case.
Je sais pas si ma description était assez claire.

J'ai 3 triangles \/ < /\ et il faut que je les colle les uns aux autres comme ça X...

[1407.]

Je comprend pas commentdes margin peuvent déplacer une image dans un coin de ma case.
Je sais pas si ma description était assez claire.

J'ai 3 triangles \/ < /\ et il faut que je les colle les uns aux autres comme ça X...

essaye, tu verra bien...

[trotters213]

Lorsque tu définis un margin dans ton code CSS, tu définis (comme son nom l'indique) une marge (pas une bordure !!).
Il fonctionne comme ça :
margin:top right bottom left;

Dans ton cas, si tu fais :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="premiertriangle"><img src="./top_right.gif" /></div>
<div id="deuxièmetriangle"><img src="./bottom_left.gif" /></div>
<div id="troisièmetriangle"><img src="./bottom_right.gif" /></div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*ceci permet d'avoir les mêmes marges sous tous les navigateurs*/
* {
margin:0;
padding:0;
}
 
#premiertriangle {
float:right;
margin:5px 0 0 5px;
}
 
#deuxièmetriangle {
float:left;
}
 
#troisèmetriangle {
float:right;
}

En faisant ceci, tu auras ton premier triangle qui sera décalé de 5 pixels vers le bas et de 5pixels vers la droite (car la marge de pixel est en haut et à gauche )