28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Html5 CSS3 et IE8 + Firefox 3.6

Bonjour,

Hier matin, j'ai décidé de mettre à jour mon site vers les standards HTML5 et CSS3 après la lecture d'un magazine Compétences Micro.

Tout s'est super bien passé ... chez moi ... sur IE9 et FF5 ... mais voilà .... une copine vient de m'annoncer que chez elle, mon site n'est pas du tout cadré...

En effet, sous FF3.6 et IE8 mon site est détruit ... j'ai pourtant rajouté les extensions -moz-
-webkit- et -o- mais rien n'y fais ...

Je suis perdu ... que devrais-je faire pour que mon site soit à nouveau le même partout ou presque ?

Merci d'avance pour vos conseils

Il s'agit du site www.depanne-pc.be
Modifié par subran (18 Jul 2011 - 11:52)
Bonjour,

mets des instructions conditionnelles dans le HEADER (du style "lte IE8" etc...) et fais une feuille de style pour les navigateurs ne supportant pas encore CSS3 complètement. Smiley cligne
FloydinBremen a écrit :
Bonjour,

mets des instructions conditionnelles dans le HEADER (du style "lte IE8" etc...) et fais une feuille de style pour les navigateurs ne supportant pas encore CSS3 complètement. Smiley cligne


J'ai remplacé :

<!--[if IE]><script src="[[++site_url]]assets/scripts/html5-ie.js"></script><![endif]-->

par

<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


"Des instructions conditionnelles dans le HEADER" ... tu peux me donner un exemple ? Je ne vois pas trop quoi mettre ...


Merci Smiley smile
ben, par exemple : 


<!--[if lte IE 8]> 
 <link rel="stylesheet" type="text/css" href="css_pour_ie8.css" media="screen"/> 
 <![endif]-->
D'accord, je retourne au boulot avec mon ancienne feuille de styles ... jvais devoir faire une feuille de style sans nav, header, ... ?

Et même chose pour FF3.6 ?

J'ai testé l'utilisation d'une CSS sous IE8 en ajoutant ceci : 

<!--[if IE]><script src="[[++site_url]]assets/scripts/html5-ie.js"></script><![endif]--> 
<!--[if lte IE 8]> 
<link rel="stylesheet" type="text/css" href="[[++site_url]]assets/css/ie8.css" media="screen"/>
<![endif]-->


Mais ma feuille ie8.css ne s'applique pas sous IE8 .... cela reste l'ancienne feuille et quand j'efface l'ancienne feuille ... plus aucun style
Modifié par subran (15 Jul 2011 - 17:31)
ah pour les header, article, section ... tu as Modernizr qui ajoute entre autres les nouvelles balises html5 au dom pour les ie & co

De plus le script teste les capacités css du navigateur et ajoute des classes au body permettant de savoir le support de telle ou telle propriété css
Arialia a écrit :
ah pour les header, article, section ... tu as Modernizr qui ajoute entre autres les nouvelles balises html5 au dom pour les ie &amp; co

De plus le script teste les capacités css du navigateur et ajoute des classes au body permettant de savoir le support de telle ou telle propriété css


Merci pour ta réponse, j'ai été voir sur le site de Modernizr mais je n'ai pas trop compris ce que je dois faire.

En fait avec mon design étant iddentique à l'ancien ( www.depanne-pc.be/old ) j'ai regardé ce que j'avais changé:
en css3 j'ai ajouté : hgroup, #header est devenu header , #sidebarnav est devenu aside, #contentarea est devenu section en gros j'ai pas changé plus.

ancien style - nouveau style
Est-ce que je dois laisser ces balises dans le css et html ou dois-je changer ces balises pour que ce soit à nouveau ok dans IE8 et FF3.6 ?
Modifié par subran (15 Jul 2011 - 18:20)
si tu utilises modernizr ( ou que tu intègres toi-même les éléments dans le dom) tu n'a pas a changer quoi que ce soit.
Modifié par Arialia (15 Jul 2011 - 18:31)
Arialia a écrit :
si tu utilises modernizr ( ou que tu intègres toi-même les éléments dans le dom) tu n'a pas a changer quoi que ce soit.

Ok mais je ne comprend pas ... le "dom" c'est quoi ?
Et pour modernizr je dois faire quoi ? Je ne comprend pas trop ...
Pour 3 ou 4 éléments, vu que les CSS sont courtes (y a pas 300 lignes, non plus), la solution, sans trop se casser la tête, reste celle-ci : 


<head>
        <title>Ton titre</title>
     <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="NOUVEAUSTYLE.css" media="screen"/>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ANCIENSTYLE.css" media="screen"/>
<![endif]-->
</head>
J'ai ajouter ces lignes dans mon code : 

<!--[if IE]>
<script src="http://depanne-pc.be/assets/js/html5-ie.js"></script>
<![endif]--> 
<!--[if lte IE 8]> 
<link rel="stylesheet" type="text/css" href="http://depanne-pc.be/assets/css/ie8.css" media="screen"/>
<![endif]--> 
<link href="http://depanne-pc.be/assets/css/style.css" rel="stylesheet">
<script src="http://depanne-pc.be/assets/js/modernizr.js"></script>


Mais cela ne change rien sous IE8 et FF3.6
Pourtant j'ai aussi intégré le modernizr.js

Donc je ne dois rien changer à mes balises <header> </header>, ... mais je dois faire une autre feuille de style pour IE8 ... dans cette feuille pour IE8 j'ai mis #header au lieu de header,...
est-ce bien cela que je dois y changer ?

Pourriez-vous m'éclairer ?

J'ai testé aussi en changeant dans le html les balises de <header> vers <div id="header">, etc. et en prenant la feuille de style appelée IE8 (ancienne feuille)
exemple ici : http://depanne-pc.be/nl/services.html
et là c'est à nouveau ok (sauf petit bug au footer) mais bon je ne suis plus en HTML5 vu que j'utilise plus </header>,... Smiley rolleyes

Merci d'avance pour vos conseils et votre aide Smiley smile
Modifié par subran (16 Jul 2011 - 03:17)
bon, il te faut une feuille css pour IE8 et une feuille CSS pour ta nouvelle version. Cette solution reste valable si tes documents CSS ne sont pas lourds.
pour les éléments html5 pas encore reconnus sur les anciennes versions IE, tu feras appel à un script JavaScript. 


<!--[if lte IE 8]>
<script src="html5_pour_ie.js"></script>
<![endif]-->


Smiley murf

ensuite, dans ce script, tu vas créer les éléments qui n´existent pas encore dans les anciennes versions IE :


document.createElement("header");


Smiley langue

voili, voilà, tu devrais pouvoir t´en sortir.

Bon courage
FloydinBremen a écrit :
il te faut une feuille css pour IE8 et une feuille CSS pour ta nouvelle version.


J'appel mon fichier ie8.css via : 
<!--[if lte IE 8]> 
<link rel="stylesheet" type="text/css" href="http://depanne-pc.be/assets/css/ie8.css" media="screen"/>
<![endif]-->

Mais cette feuille, je ne comprend pas ce qui dois y changer vu que plus bas on intègre le <header> dans les anciennes versions de IE (quiq de FF3.6). Pour l'instant, j'y ai donc recopié le nouveau style en changeant les header en #header mais jpense pas que c'est ce que je dois faire. De plus, pour FF3.6 ... que faire vu que ce "if" n'est que pour IE8...

La nouvelle feuille je l'appelle via : 
<link href="http://depanne-pc.be/assets/css/style.css" rel="stylesheet">



FloydinBremen a écrit :

Pour les éléments html5 pas encore reconnus sur les anciennes versions IE, tu feras appel à un script JavaScript.

J'ai créé les éléments qui n'existent pas dans ancien IE (et pour FF3.6?)

document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("figure");
document.createElement("hgroup");


C'est dans le fichier html5-ie.js appelé via : 
<!--[if IE]><script src="http://depanne-pc.be/assets/js/html5-ie.js"></script><![endif]-->


J'ai aussi ajouter le script Modernizr:
<script src="http://depanne-pc.be/assets/js/modernizr.js"></script>



Mais ces solutions ne fonctionnent pas ...
Modifié par subran (16 Jul 2011 - 10:10)
Je suis perdu ... entre-temps je vais remettre les balises <header>, <nav>, et autres en mode ... <div id="header"> et je met le ie8.css comme style de base et jvais lire/tester un max
Modifié par subran (16 Jul 2011 - 12:38)
Yes, j'ai avancé ! Hier, j'ai été acheté le livre "CSS avancées" de Raphaël Goetter à la FNAC et ... j'adore... (au passage MERCI pour ce livre !)

A la page 60 j'ai trouvé un exemple de feuille css qui introduit les nouveaux éléments HTML5... je suis directement venu tester sur mon PC et cela a beaucoup changé à ma page :

En rajoutant (en haut de style.css) : 

/* Introducing new HTML5 elements */

header, footer, section, hgroup, aside, nav, article, figure, figcaption, time, dialog { 
	display: block;
}


Mon site est à nouveau correctement disposé sous IE7,8 et FF3.6 donc génial.

Voici une partie de l'en-tête de ma page :

Merci pour votre aide Smiley smile

Je retourne à ma lecture (encore 300 pages Smiley biggrin )
Modifié par subran (18 Jul 2011 - 11:53)
Sujet clos
Aller à