Discussion :

[_Mac_]

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 :

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

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 ?

[elitost]

Et en mettant ton tableau avec les images dans le DIV ça fonctionne ?

[_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.

[hackrobat]

salut,

tu peux faire un comme cela

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
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 :

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

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>

[SIBELIUS]

Hello,

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

Bonne lecture

[_Mac_]

Merci. Je vais regarder tout ça et je vous dis.

[hackrobat]

Excellent site SIBELIUS !

Merci pour le tuyau