28220 sujets

CSS et mise en forme, CSS3

[Resolu] Exclure une feuille CSS pour IE Mac

Bonjour,

Je fais suite à mon précédent post de cette nuit, qui m'a permis d'entrevoir une ou des solutions et pour tenter de résoudre mon pb.

En résumé, je veux exclure IE 5 Mac de la lecture d'un style de ma CSS, car il ne reconnait pas l'utilisation des marges négatives pour centrer verticalement une balise.

Après lecture d'un post trouvé dans la FAQ http://forum.alsacreations.com/topic.php?tid=6312&fid=4&p=1#p54966[/url],
j'avoue être un peu largué.

Voici un extrait du code de ma CSS:

#globalHaut{
	position:absolute;
	left: 50%; 
	width: 745px;
	margin-left: -372px; 
	top: 50%;
	height: 423px;
	margin-top: -211px; /* 
 }


qui agit sur le code html de la page tel que suit:


<div id="globalHaut">
	<table width="745" border="0" align="center" cellpadding="0" cellspacing="0" id="Contenu">
		<tr><!-- 1 -->
		......
		</tr>
	</table>
</div>


En fait pour que cela fonctionne sous IE MAc, il faudrait écrire (mais dans ce cas, je perds le centrage vertical pour les autres browsers:

#globalHaut{
	position:absolute;
	left: 50%; 
	width: 745px;
	margin-left: -372px; 
	top: 50%;
/*	height: 423px;
	margin-top: -211px; */
 }

Suite à ce lien:http://w3development.de/css/hide_css_from_browsers/summary/[/url]
il faudrait donc que j'écrive dans la CSS pour que IE Mac soit exclus:

@media all {
#globalHaut{
	position:absolute;
	left: 50%; 
	width: 745px;
	margin-left: -372px; 
	top: 50%;
	height: 423px;
	margin-top: -211px; /* 
 }
}

Exact ?
Mais comment ensuite, avec le même com de classes de style, appliqué une règle modifié pour IE Mac telle que:
(dans ce cas, bien sûr, la page ne serait plus centré mais à 10% du haut de la fenêtre. C'est ce que j'ai trouvé de mieux....)

#globalHaut{
	position:absolute;
	left: 50%; 
	width: 745px;
	margin-left: -372px; 
	top: 10%;
 }


Ai-je le droit de mettre deux noms identiques de classes dans la même CSS, même si la 2eme est précédé entre "@media all" et qu'elle est placée en dernier.
Dois-je mettre cette dernière, directement dans toutes les pages HTML, pour avoir priorité ou cela ne change rien ?
Dois-je faire deux feuilles séparées ?
Dans ce cas, comme dans le lien cité plus haut, je dois utilisé, cet import avec des guillemets simples, filtrant les IE MAc:

@import url('advanced.css') screen, projection;

Mais là, c'est nouveau pour moi.
Dans ce cas, je n'ai plus besoin du @media all , non ?
Mais où le placer cet import, dans le head de chaque page Html ?
Avec quelle syntaxe ?

Comme vous le constatez, cela est très confus pour moi, car c'est la première fois que je suis confronté à ce type de pb !
Juste besoin d'apprendre et de votre aide précieuse.

MErci
Furet92
Modifié par furet92 (03 Sep 2005 - 19:13)
Je vais peut-être jouer les énervantes qui répondent à côté ... mais il y a quelque chose qui me gêne dans cette technique : imaginons qu'on ait un bloc de 800px de large, qui est centré avec cette technique d'être positionné à 50% de la marge gauche de la fenêtre et à encore -400px par rapport à ce centre. C'est parfait pour des écrans d'au moins 800px de large... mais pour un écran plus petit ? que se passe-t-il ? Le bloc déborde de l'écran et une partie en est masquée... Smiley confus
Est-ce qu'une marge de quelques dizaines de pixels du haut de l'écran ne peut pas être satisfaisante ?
Smiley smile
Rien ne m'énerve, hormis IE en particulier et son "despotisme" .

Pour réagir à ton post:
1/ le site est prévu pour être consulté sur PC et sur Mac. (et non des appareils portables type Palm). Et de toute façon, s'il fallait le porter sur ce genre de média, le site devrait de toute façon être refait ... car malgré que ce soit moi qui l'ai fait, j'ai un peu honte de dire que c'est loin d'être un modèle du genre, le client tenant absolument à avoir un certain type de polices à l'écran, et il n'était pas question de tout faire en Flash

2/ le site fait 745 par 423 et est prévu pour des résolutions minimum de 800 x 600, ce qui avec les internautes en 1024 et plus, représente je crois, plus de 90 % des internautes.
Donc, même en 800x600, le centrage horizontal ne fait pas déborder les pages.

Cela dit, j'en profite pour apporter une réponse aux pbs que je posais dans ce post, cela peut peut-être servir à d'autres.:
Je pense en effet les avoir résolu en mettant dans la feuille de style, une classe "globalHaut" qui fait le minimum, à savoir un centrage horizontal (accepté par IE Mac) avec un positionnement vertical à 10% du haut de la fenêtre. Ainsi, pour IE MAc, j'aurais au moins le centrage horizontal et la page ne sera pas coupé de 50% vers le haut comme c'éatit le cas précédemment.

Puis je rajoute la même classe (plus complète: avec centrage vertical), nsérée dans un @media all, mais dans une déclaration "online" (c'est le bon terme ?), cad dans chaque page Html du site. Ainsi, cette dernière, qui ne sera pas lu par IE MAc (à cause du @media all) aura priorité sur celle en link, et permettra le centrage vertical pour tous les autres browsers.

Voici l'extrait de code de la CSS:

#globalHaut{
	position:absolute;
	left: 50%; 
	width: 745px;
	margin-left: -372px; 
	top: 10%;
 }


et la déclaration dans chaque page Html:

<style type="text/css">
@media all {
#globalHaut{
	position:absolute;
	left: 50%; 
	width: 745px;
	margin-left: -372px; 
	top: 50%;
	height: 423px;
	margin-top: -211px;
 }
}
</style>


Suivi de: 

<div id="globalHaut">
...... le site
</div>


Cela vous semble t'il correct et pas trop tiré par les cheveux ?

Si ce n'est pas très élégant , au moins j'espère que cela a le mérite de marcher... mais je n'ai pas de Mac !
Donc, si quelqu'un pouvait tester le site:
- sur IE MAc: pages centrées horizontalement mais à 10% du haut en vertical
- sur Netscape/ Firefox ou Opera sur MAc: là, les pages doivent être centrées horizontalement et verticalement.


Adresse du site: http://sepeg.cineteck-fr.com/[/url]

Merci de vos remarques et de votre aide, et un grand merci aux créateurs de ce site: Alsacréations, pour la somme de connaissances qu'ils m'apportent.

PS: si quelqu'un a une autre méthode, ce sera avec plaisir !

Cordialement
Furet92
Bonjour,

Ne mélangeons pas tout: les "style switchers" n'ont aucun rapport avec le filtrage des CSS selon les navigateurs (ils servent à permettre l'utilisation de styles alternatifs).

Pour IE5 Mac, il est inutile de placer la règle @media dans une feuille de style interne (en ligne). Il suffit de la placer dans la CSS externe, après le premier bloc visant ce navigateur:
- IE5Mac lira le premier bloc et ignorera le second.
- Les autres navigateurs récents obéiront aux règles de la cascade : les propriétés du 2e bloc surclassent celles du premier.

Pour se rassurer, il est également possible d'écrire un sélecteur plus spécifique pour le 2e bloc, tel que div#globalHaut, qui l'emportera sur #globalHaut (voir article sur la cascade dans OpenWeb)

Cela dit, il sera nécessaire de cacher tout cela aux navigateurs Windows de type NS4.x, où le rendu se dégrade très mal. Voir par exemple l'utilisation de @import dans ce message: http://forum.alsacreations.com/topic.php?fid=4&tid=6312&s=%40import#p55007
MErci à tous pour ces réponses précises et constuctives. Smiley smile
Je vais de suite m'appliquer à mettre ces conseils en pratique.

Cordialement
Furet
Sujet clos
Aller à