Discussion :

[Poulpynette]

Bonjour,

Désolé si ma question est redondante, mais j'ai du mal à trouver une réponse satisfaisante.

Je souhaite que la couleur de fond de mon menu situé à gauche de mon écran s'étire jusqu'en bas du navigateur, à la fois sous IE(6), FFX et Opera.

J'ai résolu le problème avec la syntaxe suivante, faisant appel à du Javascript :

Code :

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

1
2
3
4
5
6
7
8
.divMenu {
	width: 193px;
	position: absolute;
	background-color: #ced7de;
	left: 0;
	min-height: 100%; /* pour FFX */
	height: expression(document.body.clientHeight); /* pour IE6 */
}

Soucieuse de coder proprement le CSS, ce que je souhaiterais savoir, c'est si cette syntaxe vous paraît "correcte", ou si vous avez une meilleure solution.

[Erwan31]

Bonjour,
oui mais la valeur Microsoft expression(...) invalide ta CSS et tu n'en as pas besoin puisque IE6 interprète le height comme un min-height.

Pour le fond de ton menu essayer la technique des colonnes factices (background en repeat-y au niveau du body)?

[Poulpynette]

Bonjour Erwan,

C'est bien ce que je pensais !

Bonjour,
oui mais la valeur Microsoft expression(...) invalide ta CSS et tu n'en as pas besoin puisque IE6 interprète le height comme un min-height.

Je me retrouve bien évidemment dans un cas ou le javascript et le height n'ont pas le même comportement, sinon ce ne serait pas drôle ^^.

Si je remplace par ce code :

Code :

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

1
2
3
4
5
6
7
8
.divMenu {
	width: 193px;
	position: absolute;
	background-color: #ced7de;
	left: 0;
	min-height: 100%; /* pour FFX */
	height: 100%; /* pour IE6 */
}

Eh bien il apparaît une anomalie sous Firefox (et Opera) lorsque je réduis en hauteur la taille du navigateur de manière à avoir un ascenseur vertical : si je descends l'ascenseur pour voir le bas de ma page, je constate que le fond ne suit plus et garde la taille de la partie visible du navigateur.

(j'espère me faire comprendre car ce n'est pas évident à expliquer)

Pour le fond de ton menu essayer la technique des colonnes factices (background en repeat-y au niveau du body)?

Je vais jeter un œil à cette technique, merci

[Macmillenium]

Bonjour,

Eh bien il apparaît une anomalie sous Firefox (et Opera)

C'est normal puisque les navigateurs alternatifs vont interpréter le height:100% et ignorer le min-height:100%, seule la valeur auto sur height fait fonctionner les deux en même temps.

Pour IE6, il suffit de placer le correctif entre commentaires conditionnelles :

Code :

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

1
2
3
4
5
6
7
8
 
<!--[if lte IE 6]>
<style type="text/css" media="screen">
 .divMenu {
	height: 100%; /* pour IE6 */
}
</style>
 <![endif]-->

[Poulpynette]

C'est normal puisque les navigateurs alternatifs vont interpréter le height:100% et ignorer le min-height:100%, seule la valeur auto sur height fait fonctionner les deux en même temps.

Ok ^^

Pour IE6, il suffit de placer le correctif entre commentaires conditionnelles :

Code :

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

1
2
3
4
5
6
7
8
 
<!--[if lte IE 6]>
<style type="text/css">
 .divMenu {
	height: 100%; /* pour IE6 */
}
</style>
 <![endif]-->

Ça j'aime beaucoup moins

C'est même pas en feuille de style mais direct dans le HTML ?

Merci pour ton aide mais si c'est la seule solution ... Je trouve pas ça plus propre que mon morceau de JS

[Macmillenium]

Merci pour ton aide mais si c'est la seule solution ... Je trouve pas ça plus propre que mon morceau de JS

Les commentaires conditionnelles sont plus propres dans ton cas.

C'est même pas en feuille de style mais direct dans le HTML ?

C'est comme tu veux, tu peux aussi faire :

Code :

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

1
2
3
4
 
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles-ie.css" media="screen" />
 <![endif]-->

[Poulpynette]

Les commentaires conditionnelles sont plus propres dans ton cas.

Ah j'aurais pas cru, mais je te fais confiance ^^

C'est comme tu veux, tu peux aussi faire :

Code :

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

1
2
3
4
 
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles-ie.css" />
 <![endif]-->

Là c'est moi qui dis
Je boycotte à fond la solution d'une feuille de style juste pour IE

Mais oui, c'est une solution aussi, juste pas pour moi.

Tant que possible, j'essaie d'avoir un CSS unique et qui fonctionne partout.

Merci pour ton aide Macmillenium

[Erwan31]

Salut,
juste au passage Macmillenium, ne pas oublier de préciser le media="screen" dans le style/link


EDIT

Je boycotte à fond la solution d'une feuille de style juste pour IE

Eh bien tu ne devrais pas Il est rarement possible de s'en passer lorsque l'on cible IE6.

[Macmillenium]

Salut,
juste au passage Macmillenium, ne pas oublier de préciser le media="screen" dans le style/link

Yes tout à fait, j'ai édité mon post. Merci Erwan

EDIT : Explication à Poulpynette quand même, sans préciser que l'on cible les media screen on se retrouve par défaut avec media all.

[Poulpynette]

Je boycotte à fond la solution d'une feuille de style juste pour IE

Pas tant que ça finalement, je m'incline ...

Encore merci pour vos conseils

PS : le media="screen" est-il indispensable ?

PS bis : je vous ai déjà dit que je haïssais IE 6 ? ^^

[Erwan31]

Hello,

PS : le media="screen" est-il indispensable ?

Non le media est facultatif mais conseillé. Comme le précise Macmillénium de rien mettre équivaut à media="all" mais dans de nombreux cas media="all"
n'est pas pertinent puisque qu'il mélange des médias visuels statiques paginés (projection, print) et des médias visuels interactifs (et statiques) continus (screen, handheld...) pour ce qui concerne les medias suffisamment implémentés à l'heure actuelle. Autrement dit des média de nature différente qui impliquent pour l'essentiel différentes logiques de rendus et donc d'implémentation.
D'autre part il est parfois préférable d'avoir une version brut linéarisée (sans CSS) pour l'impression voire même pour les petits écrans.

En règle général, il est préférable d'avoir une CSS principale pour le media screen (ordinateur desktop) qui prenne en compte les limitation propres aux petits écrans, une CSS handheld (complétée par des media queries (un module CSS3 malheureusement pas encore implémenté par IE8 et versions inférieures) pour l'Iphone) une CSS print (impression donc) et si nécessaire une CSS projection
(projecteur et mode plain écran d'Opera), mais ce conseil n'a pas la prétention d'être le plus pertinent concernant le media handheld qui devient caduc du fait de l'absence de frontière nette entre screen et handheld...

PS bis : je vous ai déjà dit que je haïssais IE 6 ? ^^

Tu n'es pas la seule
http://www.stopie6.com/
http://idroppedie6.com/
http://www.stoplivinginthepast.com/

[Macmillenium]

PS : le media="screen" est-il indispensable ?

Oui et non, tout dépend du contexte.
Le media="screen" cible principalement les navigateurs graphiques et lecteurs d'écrans, ce qui permet d'exclure les autres types de média print, projection, braille etc ...

[Erwan31]

Oui et non, tout dépend du contexte.
Le media="screen" cible principalement les navigateurs graphiques et lecteurs d'écrans

En fait les lecteurs d'écran ne lisent pas le média.
Il ne vise (n'est censé viser) que les navigateurs graphiques d'ordinateurs
de bureau et pas les navigateurs graphique pour appareils mobile même si c'est en réalité parfois le cas.

[Poulpynette]

Ok merci pour vos réponses.
J'ignorais cet aspect.

http://www.stopie6.com/
http://idroppedie6.com/
http://www.stoplivinginthepast.com/

Excellent je ne connaissais pas

[Macmillenium]

En fait les lecteurs d'écran ne lisent pas le média.

Oui, j'avais oublié qu'ils interprètent uniquement le DOM généré

[Erwan31]

Excellent je ne connaissais pas

Au passage acheter un nom de domaine uniquement pour ça, faut être quand même un peu intégriste

[Macmillenium]

Au passage acheter un nom de domaine uniquement pour ça, faut être quand même un peu intégriste

[mode troll=on]
Et encore :

http://dearie6.com/

#DearIE6 {float:left;margin:2px;_float:far away; /*Take your double margin with you*/_margin-left:not much more hopefully ;P}

[/mode troll=off]