[DIV] afficher des images aux 4 coins d'un DIV

Version imprimable

Bonjour à tous,

J'aimerais remplacer les tables que j'utilise actuellement pour régler l'affichage de mon site par du vrai CSS, à grand renfort de DIV. Problème : j'ai un design (en attendant de le refaire) qui affiche des images aux 4 coins d'un tableau à 3 lignes et 3 colonnes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 +-------------+ |i| |i| |-------------| | | | | | | | | | | | | | | contenu | | | | | | | | | | | | | | |-------------| |i| |i| +-------------+
Mes images font 12x12 pixels.

Pour le moment, j'ai mis mes images dans des DIV. Avec IE, quand je mets "float: left" et "float: right", mes images sont bien aux 4 coins et correctement alignées verticalement, mais avec FF.

Savez-vous comment résoudre ce pb ?

16/11/2005, 14h12
elitost

Et en mettant ton tableau avec les images dans le DIV ça fonctionne ?
16/11/2005, 14h36
_Mac_

Oui, ça marche, mais le but c'est justement de se remplacer le tableau par un div. Ma question n'était peut-être pas très claire, effectivement.

salut,

tu peux faire un comme cela

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.main
{
width : 100%;
}
 
.header, .footer
{
float: left;
width : 100%;
heigth : 50px;
}
.left
{
float : left;
with : 40%;
}
.right
{
float : rigth;
with : 40%;
}
.contenu
{
float : left;
width : 100 %;
min-height : 500px;
_height: 500px; // underscore hack uniquement interprété par IE Win
}

Code:

1
2
3
4
5
6
7
8
9
10
11
<div class="main">
<div class="header">
<div class="left"> ton image a gauche </div>
<div class="right"> ton image a droite </div>
</div>
<div class="contenu"> Ton contenu </div>
<div class="footer">
<div class="left"> ton image a gauche </div>
<div class="right"> ton image a droite </div>
</div>
</div>

16/11/2005, 18h30
SIBELIUS

Hello,

Voici un résumé des techniques utilisables :
http://articles.e-t172.net/round/

Bonne lecture ;)
16/11/2005, 18h58
_Mac_

Merci. Je vais regarder tout ça et je vous dis.
17/11/2005, 09h41
hackrobat

Excellent site SIBELIUS !

Merci pour le tuyau ;)