Menu en css non aligné et qui se décale sur IE !! [Résolu]

Question

niscemie

11 Jan 2008 à 16:27

Bonjour,

Je découvre un peu les CSS grâce à l'excellent livre CC2 de R. Goetter mais je bloque sur un truc bête, je pense. J'ai fait un menu en CSS mais les boutons ne sont pas tous placés sur une même ligne horizontale. Je les ais donc placés manuellement avec le positionnement relatif comme ceci (ex. bouton métiers) :

.metiers {
position: relative;
right: 10px;
bottom: 5px;
color:#F77117;

Jusque là tout va bien sur mon portable, jusqu'à ce que j'ouvre ma page test sur un autre PC ... Smiley confus

Là Firefox reste nickel mais IE décale le menu plus haut et affiche une bande bleu sous mon image de fond de menu ... Smiley bawling

Comme un bon lien en dit tjrs plus qu' 1 long discours ... Je vous laisse regarder ma page test :
http://www.apprentissage-mipy.fr/index_test.html

Est-ce que vous pouvez m'aider à résoudre ce petit pb ???

Merci d'avance de vos réponses !! Smiley cligne

Modifié par niscemie (28 Jan 2008 - 13:20)

6l20

11 Jan 2008 à 17:11

Bonjour niscemie,

C'est dans le livre de Raphael que tu as appris à faire de jolie mise en page en tableau ? Smiley cligne

Pour le problème de transparence png avec IE6:
http://forum.alsacreations.com/faq/faq-96-Obtenir-la-transparence-PNG-avec-Internet-Explorer-6.html

Pour le problème de décallage du menu, peut-être faut-il aller voir de ce coté :
http://forum.alsacreations.com/faq/faq-91-Qu039est-ce-que-le-HasLayout-et-comment-l039utiliser.html (et liens associés)

Cdt,
Sylvain

niscemie

11 Jan 2008 à 18:39

Merci sylvain pour tes conseils !

J'y vois un peu plus clair même si ce n'est pas encore ça ... Smiley cligne

Donc je résume :

1. pour LES FILTRES ALPHAIMAGELOADER, j'ai compris le principe, j'ai suivie les indications à la lettre mais ça enlève mon image de fond (normal puisqu'on a mis : background: none;) mais le chemin vers mon image ne l'affiche pas ...

Donc je te remet le début de ma page HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

et ensuite j'apelle la feuille de style dans mon tableau (aiee, je sais que c'est pas bien les tableaux ... Smiley murf

:

<table width="830" height="70" border="0" align="center" cellpadding="0" cellspacing="0" class="bloc">
<tr>
<td><ul id="nav">
...

je sais pas trop ou est mon erreur et pourquoi mon image ne s'affiche pas ... Smiley bawling

Mon image fond est pourtant bien à la racine de mon site :
http://www.apprentissage-mipy.fr/fond_menu.png

2. Pour le positionnement des termes du menu, je comprend un peu le principe des HAS LAYOUT mais ne sait pas trop ou placer ses données :

dans ma feuille de style ? :

.metiers {
position: relative;
width:100%;
right: 10px;
bottom: 5px;
color:#F77117;
}

ça ne marche pas ... ou alors faut-il le mettre dans le code html comme dans la page que tu m'as envoyé ?

Merci de ta patience ... Smiley smile

pour une pauvre ignorante ... Merci d'avance de ta réponse !!

6l20

12 Jan 2008 à 11:28

Bonjour niscenie,

Rapidemment:

Le fait de "bidouiller" pour afficher un png transparent sous IE6 ne te dispense pas de laisser disponible ton image pour les navigateurs à qui le png transparent ne pose pas de problème (on ne retrouve pas "fondmenu" dans ton code ) Smiley cligne

L'exemple de la FAQ doit être adapter à ton besoin (de façon générale Smiley cligne

)
Ce que tu peux faire :
1/Tout recommencer en t'inspirant du livre de Raphael et des tutoriels de ce site Smiley lol

bon ok, un peu plus tard... Smiley cligne

2/Pour ton commentaire conditionnel destiné uniquement à IE6 et versions inférieures (jusqu'à 5.5):

<!--[if lte IE 6]>
<style type="text/css">
#nav{
height: 60px; /* HasLayout */
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fond_menu.png", sizingMethod="scale");
}
</style>
<![ endif]-->

3/ Placer ton image fondmenu en background de ton id "nav" et empêcher que IE6 puisse avoir accès à l'information :


html>body #nav {
	background-image: url('fond_menu.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	height:60px;
	list-style-type: none;
	margin: 0 ;
	padding: 0 ;
	overflow: hidden ;
	}

Auquel cas l'id "fondmenu" ne te sert plus à rien Smiley cligne

4/ Sans doute faire les corrections de positionnement de tes liens...

Normalement, sauf erreurs ou omissions, cela devrait fonctionner Smiley smile

ps : penses à mettre ton code (html, css,etc...) entre les balises [ code][ /code] -> Sans espace (tu peux éditer ton message pour le faire Smiley cligne

)

Cdt,
Sylvain
Modifié par 6l20 (13 Jan 2008 - 13:44)

Laurent Denis

12 Jan 2008 à 11:45

Bonjour,

En apparté, une remarque à propos de la FAQ, du haslayout et des diverses versions d'IE: il serait habile AMHA de mettre à jour deux choses associées :
- le code destiné à doter un élément de haslayout: remplacer le height 1%; et l'éventuel overflow:visible; de précaution par le plus simple zoom:1;
- expliquer quelque-part (un nouvel item, un billet, un article) qu'on ne fait plus, sauf rares exceptions, de CSS correctives pour IE5.0 (qui ne connait pas zoom, d'où le height:1% historique) et comment on le filtre pour lui adresser le HTML brut tout comme à son équivalent MAC.

(tiens, quand je vois ça, je me dis après coup, mais un peu tard, que c'est un peu c... de ne plus pouvoir éditer directement cette FAQ Smiley confus

)
Modifié par Laurent Denis (12 Jan 2008 - 11:46)

fvsch

12 Jan 2008 à 12:39

Laurent Denis a écrit :
- le code destiné à doter un élément de haslayout: remplacer le height 1%; et l'éventuel overflow:visible; de précaution par le plus simple zoom:1;
- expliquer quelque-part (un nouvel item, un billet, un article) qu'on ne fait plus, sauf rares exceptions, de CSS correctives pour IE5.0 (qui ne connait pas zoom, d'où le height:1% historique) et comment on le filtre pour lui adresser le HTML brut tout comme à son équivalent MAC.

J'avais justement mis le height: 1% avant le zoom: 1 dans l'ordre de priorité (bien entendu contestable) que je donne, à cause de la compatibilité IE 5.x. On pourrait effectivement inverser l'ordre et ne citer le height: 1% qu'à titre de curiosité historique, mais j'avoue ne pas être convaincu.

(Ah tiens, j'avais lu que zoom n'était disponible qu'à partir d'IE 6.0, et je lis sur MSDN que cette propriété a été introduite par IE 5.5... du coup effectivement, ça me semble plutôt pertinent de privilégier zoom.)

Peut-être faudrait-il effectivement un article sur sur le filtrage de IE 5.0 (et tant qu'à faire de IE Mac). Quelque chose sur le blog serait pas mal. Je connais un mec, Laurent Denis, qui est très pointu sur le sujet. Il faudrait peut-être lui proposer d'écrire un petit quelque chose? Smiley cligne

Laurent Denis

12 Jan 2008 à 13:25

Florent V. a écrit :

(Ah tiens, j'avais lu que zoom n'était disponible qu'à partir d'IE 6.0, et je lis sur MSDN que cette propriété a été introduite par IE 5.5... du coup effectivement, ça me semble plutôt pertinent de privilégier zoom.)

ça relève de l'évidence.

Florent V. a écrit :

Peut-être faudrait-il effectivement un article sur sur le filtrage de IE 5.0 (et tant qu'à faire de IE Mac). Quelque chose sur le blog serait pas mal. Je connais un mec, Laurent Denis, qui est très pointu sur le sujet. Il faudrait peut-être lui proposer d'écrire un petit quelque chose?

D'une manière générale, je préfère agiter les discussions ici ou là, à commencer par les solutions que je pratique ou diffuse, histoire de chercher les objections imprévues et les améliorations.

Sur le sujet du filtrage des IE5.0, il y a un vieux thread ici où on avait expliqué comment faire. Il suffit de le le ranimer Smiley cligne

fvsch

12 Jan 2008 à 18:16

Hmm... pas super libre/motivé là tout de suite pour modifier/écrire tout ça.

Au sujet des propriétés conseillées pour l'attribution du layout, du coup je suppose qu'on mettra zoom en avant, et que dans un deuxième temps on mentionnera width et height?

Sinon, je ne crois pas avoir retrouvé le sujet que tu mentionnes. Tu n'aurais pas le lien sous la main?
Edit: trouvé ça:
- http://centricle.com/ref/css/filters/
- http://imfo.ru/csstest/css_hacks/import.php
Pour filtre à la fois IE Win 5.0 (et pas le 5.5) et IE Mac, la syntaxe serait:

@import/**/"style.css";

Modifié par Florent V. (12 Jan 2008 - 19:37)

Laurent Denis

12 Jan 2008 à 20:01

import single quotes, no url, ne me dites pas que vous découvrez, please.

Et par pitié par pas de /* */

C'est pas vrai ? Je me goure depuis deux ans ? Ou ça n'est pas encoe une solution de base ?

maman, ne dis pas que je suis une gâcheuse, en vrai, je suis dans le Web...
Modifié par Laurent Denis (12 Jan 2008 - 20:05)

fvsch

12 Jan 2008 à 23:12

Laurent Denis a écrit :
import single quotes, no url, ne me dites pas que vous découvrez, please.

Je savais qu'il y avait différentes possibilités de filtrage via certaines syntaxes avec la règle @import, et dans mon souvenir il s'agissait surtout de filtrer les versions 4 des navigateurs IE et Netscape, ou bien de filtrer IE Mac.

La syntaxe dont tu parles est, si je ne m'abuse:

@import 'styles.css';

Le tableau sur centricle.com indique que cette syntaxe est lue correctement (et la feuille de style importée) par Internet Explorer Windows 5.0. On ne parlait pas de filtrer IE 5.0, justement?

Il me semble que si:

Laurent Denis a écrit :
expliquer quelque-part (un nouvel item, un billet, un article) qu'on ne fait plus, sauf rares exceptions, de CSS correctives pour IE5.0 (qui ne connait pas zoom, d'où le height:1% historique) et comment on le filtre pour lui adresser le HTML brut tout comme à son équivalent MAC.

Donc si je veux pouvoir écrire que pour le HasLayout on utilisera zoom en priorité, que ça fonctionne à partir d'IE 5.5 et jusqu'à IE 7 (à voir par la suite pour le 8...), et qu'IE 5.0 Windows comme IE 5.x Mac sont filtrés via une syntaxe @import valide mais inconnue d'eux... ben il faudrait que j'aie cette syntaxe sous la main.

Et ce que je constate, c'est que je trouve deux syntaxes:
- @import/**/"style.css"; qui filtre bien à la fois IE Win 4-5.0 et 5.5, et IE Mac 5.x, mais dont on peut peut-être craindre qu'elle ne déclenche un parsing bug à l'avenir pour telle ou telle version de tel ou tel navigateur;
- @import 'styles.css'; qui filtre IE Win 4, IE Mac 5.x, mais pas IE Win 5.0.

...

Je viens de passer une bonne demi-heure à rechercher une information là-dessus. Les ressources les plus complètes qui sont inidiquées ici ou là sur le Web sont les deux que je citais dans mon précédent message, et que j'avais trouvées en cinq minutes.

En fait, je vois une seule source indiquant que la syntaxe avec les single quotes et sans url filtre IE Win 5.0, et c'est Blog & Blues (avec peu d'explications données vu que seule l'absence de url() est mentionnée).

Le tableau sur centricle.com est donc faux? Smiley confuse

niscemie

13 Jan 2008 à 16:16

Bonjour tout le monde et surtout Sylvain,

Je vois que le sujet a un peu dérivé, excusez-moi d'être si terre à terre avec mon petit problème qui n'est tjrs pas tout a fait résolu ... Smiley bawling

J'ai suivi tous tes conseils à la lettre mais maintenant ça fait qqchose sur IE 6 et sur les versions suivantes d'IE ça affiche une page blanche !! Smiley biggol

Voilà pour IE 6 : (tjrs fond gris + image de fond en double)

upload/15371-clipimage0.jpg" alt="upload/15371-clipimage0.jpgupload/15371-clipimage0.jpg" />

Dernière question qu'entend-tu par :

a écrit :
3/ Placer ton image fondmenu en background de ton id "nav" et empêcher que IE6 puisse avoir accès à l'information :

comment empêcher IE 6 d'avoir accès à l'information ??

Je te remet mon code :

- Au début de la page HTML :

<!--[if lte IE 6]>
<style type="text/css">
#nav{
height: 60px; /* HasLayout */
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fond_menu.png", sizingMethod="scale");
}
</style>
<![ endif]-->

- Dans mon fichier externe CSS :

}
#nav {
	background-image: url('fond_menu.png');
	background-repeat: no-repeat;
	background-position: left top;
	height:80px;
	list-style-type: none;
	margin: 0 ;
	padding: 0 ;
	overflow: hidden ;

T'as vu je m'améliore pour la présentation de mes posts ? Smiley ravi

6l20

13 Jan 2008 à 16:50

niscemie,

Le sujet s'enrichie (et nous tous par la même occasion ) il ne dérive pas vraiment Smiley cligne

Pour le commentaire conditionnel, enlève l'espace après le premier crochet du "endif" cela devarit mieux se passer :

<![[#blue]espace à supprimer[/#]endif]-->

J'aurai dû le préciser, il ne s'agit que de tenter "de présenter proprement le code" (ce qui est sans doute une erreur... Smiley confused

) désolé

Pour cacher l'info à IE6, recopie tout le code :

[#blue]html>body [/#]#nav {blablabla }

IE6 ne comprend pas "l'info" et ignore "les ordres" (sauf ceux du commentaires placé plus haut Smiley cligne

) les autres navigateurs dont IE7 font exactement le contraire Smiley smile

Si tu as toujours des soucis, n'hésites pas Smiley cligne

ps: http://galaxie-net.com/smileys/petit%20smileys/054.gif Félicitation pour la présentation du code, tu peux à présent faire la même chose sur tes posts précédents Smiley lol

Cdt,
Sylvain
Modifié par 6l20 (13 Jan 2008 - 17:04)

niscemie

23 Jan 2008 à 17:02

Bonjour,

C'est bon tout marche sur une vieille version d'IE !! Smiley smile

sauf le ...

 ... sizingMethod="scale"

qui m'étire mon image de fond ? Que puis-je mettre à la place de scale ?
(J'ai cherché sur le forum sans grand succès ...) ? Smiley cligne

Merci encore pour votre aide !! Smiley biggrin

Modifié par niscemie (23 Jan 2008 - 17:04)

6l20

23 Jan 2008 à 17:22

Bonjour niscemie,

Tu n'as pas dû forcer sur la recherche... Smiley murf

Je t'ai donné ce lien plus haut dans les débats...
On peut y lire :

a écrit :

Le code ci-dessus permet donc d'afficher l'image PNG, qui sera étirée (sizingMethod="scale") dans le bloc.
Les valeurs possibles pour la propriété sizingMethod sont:
- "crop" (rogne l'image pour qu'elle tienne dans le bloc);
- "image", valeur par défaut (réduit ou élargit le bloc pour correspondre aux dimmensions de l'image);
- "scale" (étire l'image aux dimmensions du bloc).

En espérant que cela suffira à ton bonheur Smiley cligne

Cdt,
Sylvain

niscemie

23 Jan 2008 à 17:54

...

Oui en effet, je sus un peu fatiguée ... milles excuses !!

J'ai mis "image" mais c'est tjrs pareil ... Smiley bawling

6l20

23 Jan 2008 à 22:52

niscemie a écrit :
...
Oui en effet, je sus un peu fatiguée ... milles excuses !!
J'ai mis "image" mais c'est tjrs pareil ...

Dans le fond, est-ce si grave que cela ? Smiley ohwell

C'est une jolie prise de tête pour peu de chose tout de même, non ?

En l'état actuelle des choses et compte tenu de mes maigres connaissances, le mieux que je puisse te proposer, pour un rendu caïman identique...

<!--[if lte IE 6]>
<style type="text/css">
#nav{
height: 70px; /* HasLayout */
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fond_menu.png",sizingMethod="[#red]crop[/#]");
}
.contact { 
position: relative;
right: [#red]92px;[/#]
color:#6EAB23;
top: 20px;}
</style>
<![ endif]-->

Toujours sans espace avant endif...
Pour un petit ajustement de "contact" sous IE6...


[#red]html>body[/#] .contact {
	position: relative;
	right: 32px;
	color:#6EAB23;
	top: 20px;
}

Pour empêcher IE6 d'accéder à l'info dans ta feuille de style.

Adiou. Smiley cligne

niscemie

27 Jan 2008 à 10:44

Génial !! Tous marche !!! Merci beaucoup beaucoup de ton aide !!!
Sujet résolu !!! Smiley biggrin

Felipe

Administrateur

27 Jan 2008 à 11:39

Bonjour,

pour marquer comme [Résolu] un sujet (et comme c'est expliqué dans le lien précédent), il suffit d'éditer le 1er message de ce sujet pour rajouter le terme [ Résolu] au titre Smiley cligne

Felipe

Sujet clos

Questions générales et questions de débutants

Menu en css non aligné et qui se décale sur IE !! [Résolu]