faire condition if else endif en css

**calitom** · 03/07/2008, 14h46

Bonjour,

Je cherche à utiliser

Code :

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

position:fixed

Or, ca ne marche pas sous IE6...

Je veux donc que si le navigateur est IE 6 alors position=absolute, sinon position=fixed...

J'ai trouvé ca;

Code :

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

1
2
3
4
 
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->

Comment faire pour faire un si else finsi?

**pop_up** · 03/07/2008, 16h24

Tu n'as pas besoin de faire un si ..... sinon

Tu as juste a faire une feuille de style principale avec dedans ton position:fixed et ensuite tu mets le commentaire conditionnel suivant :

Code :

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

1
2
3
4
5
6
7
8
 
<!--[if IE 6]>
<style type="text/css">
tonbloc {
    position: absolute;
}
</style>
<![endif]-->

Ce qui signifiera position fixed pour tous sauf IE6

c'est ça que tu veux ?

**calitom** · 03/07/2008, 16h28

Mais comment je dis position fixed pour le reste?
Il n'y a pas de else...

Je ne comprend pas trop!! désolé!

**calitom** · 03/07/2008, 16h34

Voici mon code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!--[if IE 6]>
<style type="text/css">
.fenetre-panier {
    position: absolute;
}
</style>
<![endif]-->
 
<style type="text/css">
.fenetre-panier {
position:fixed;
}
</style>

**pop_up** · 03/07/2008, 16h53

En réalité tu utilise la surcharge de la position. Je m'explique dans le code

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
 
<head>
/* on commence par appliquer la feuille de style generale qui applique un position fixed pour tous les navigateurs sans exception. c'est donc ici que tu dis position fixed pour le reste */
<style type="text/css">
.fenetre-panier {
position:fixed;
}
</style>
 
/* ensuite on met le test conditionnel qui va etre pris en compte seulement pour IE6 et qui mettra un position absolute */
<!--[if IE 6]>
<style type="text/css">
.fenetre-panier {
    position: absolute;
}
</style>
<![endif]-->
 
/* au final pour tous les navigateurs c'est position fixed sauf pour IE6 */
 
</head>

**avogadro** · 05/07/2008, 03h33

c'est compliqué d'avoir 140 feuilles de styles, utilise en une et aide toi du code :

body {
background:#EEE;
font:1.7em/1.2 Trebuchet MS, Arial, Helvetica, sans-serif
}
body div {
margin:2em auto;
padding:2em;
width:50%;
}
div {
/* Pour SF 1&2 */ background:purple;
}
body {
display:block;
#
}

* html div {
/* Pour IE 5.5 */ background:red;
voice-family: "\"}\""; voice-family: inherit;
/* Pour IE 6.0 */ background:blue;
}
*:first-child+html div {
/* Pour IE 7.0 */ background:yellow;
}
div {
/* Par défaut */ background:green;
}

demo : http://www.babylon-design.com/exemples/test-hacks/

**pop_up** · 05/07/2008, 22h25

Je ne suis pas d'accord avec toi. L'utilisation des hacks n'est pas une solution pérenne car ce n'est pas très robuste.

Ceci a été évoqué récemment sur ce post

Les commentaires conditionnels sont fait pour ça et ça ne fait pas 140 feuilles de style. De plus les feuilles conditionnelles pour IE ne contiennent en général que les éléments qui corrigent donc ce n'est pas aussi long qu'une css générale