[html, php, css] PB
Résolu/Fermé
titchouzaune
Messages postés
219
Date d'inscription
samedi 11 août 2007
Statut
Membre
Dernière intervention
28 décembre 2010
-
9 sept. 2009 à 11:54
titchouzaune Messages postés 219 Date d'inscription samedi 11 août 2007 Statut Membre Dernière intervention 28 décembre 2010 - 9 sept. 2009 à 17:08
titchouzaune Messages postés 219 Date d'inscription samedi 11 août 2007 Statut Membre Dernière intervention 28 décembre 2010 - 9 sept. 2009 à 17:08
A voir également:
- [html, php, css] PB
- Editeur html - Télécharger - HTML
- Easy php - Télécharger - Divers Web & Internet
- Espace html ✓ - Forum Webmastering
- Espace en html - Astuces et Solutions
- Html download - Télécharger - HTML
5 réponses
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
9 sept. 2009 à 12:56
9 sept. 2009 à 12:56
Bonjour,
Comment faire?
Il y a une méthode pour faire un site identique sur tous les navigateurs (ou presque):
Au niveau du bon sens:
* Déjà, commencer par installer le plus de navigateurs possibles, et dans leurs dernières versions: Firefox, Opera, Safari, Chrome et IE me paraît être la liste la plus pertinente. Selon le public de ton site, il faut parfois installer MultipleIEs et IE7 portable afin d'avoir IE5.5, IE6, IE7 et IE8 sur son PC.
* Le second point est de ne pas se fier à l'aperçu donné par les logiciels de création de sites comme dreamweaver par exemple.
* Développer manuellement et non en mode design
* A chaque modification du code, rafraichir sur tous les navigateurs, ne pas mettre les naviageurs en plein écran, et modifier la taille de la fenêtre des navigateurs. Modifier également le zoom de la page, tout le monde n'est pas en 100%. Rien que ce point permet de tester "rapidement" toutes les résolutions et tous les navigateurs.
* Vérifier les positions des blocs et les propriétés CSS avec Firebug.
Au niveau du code:
* Ne surtout pas oublier le DOCTYPE de la page, cela permet une meilleure compatibilité entre les navigateurs.
* Si l'on est pas à l'aise avec le développement web, il faut préférer un site à taille fixe.
* Être rigoureux
* Lors de la création du site, ne pas hésiter à rajouter des couleurs aux background des blocs pour bien les visualiser dans la page.
* Développer en essayant toujours d'anticiper le résultat. Il ne faut pas être surpris par le rendu.
* Être rigoureux
* Développer pour Firefox en priorité. En général, si Firefox donne un rendu, Opera, Safari et Chrome donneront le même rendu. Il est plus facile après de rectifier certaines erreurs d'affichage sur IE.
* Eviter de tomber directement dans le travers des css alternatifs pour corriger les erreurs d'affichage sur certains navigateur, et ne les utiliser qu'en dernier recours!!!
* Eviter tout javascript pour d'éventuelles correction!!!
* Eviter le position:absolute; pour des raisons de positionnement foireux si on a pas bien compris la philosophie du position: Il faut savoir que le position:absolute; prend comme origine l'élément parent dont la position est relative, absolute ou fixed. si l'élément parent est correctement positionné, il est facile de positionner l'élément fils.
* Être rigoureux
Petites astuces de développement:
* Il faut parfois préférer ajouter des blocs et les imbriquer intelligemment plutôt que d'en faire le moins possible
* Les paddings sont plus sûrs que les margins: les margins génèrent fréquemment des bugs d'affichage sur firefox sur des éléments flottants, et certains navigateurs fusionnent les margins entre 2 blocs alors que d'autres les additionnent.
* Utiliser Firebug est très pratique
* Si un problème survient, mettre en commentaire certains bouts de code peut détecter la source du problème.
* Être rigoureux
Voilà en gros ma méthode. Après, à chacun la sienne...
Comment faire?
Il y a une méthode pour faire un site identique sur tous les navigateurs (ou presque):
Au niveau du bon sens:
* Déjà, commencer par installer le plus de navigateurs possibles, et dans leurs dernières versions: Firefox, Opera, Safari, Chrome et IE me paraît être la liste la plus pertinente. Selon le public de ton site, il faut parfois installer MultipleIEs et IE7 portable afin d'avoir IE5.5, IE6, IE7 et IE8 sur son PC.
* Le second point est de ne pas se fier à l'aperçu donné par les logiciels de création de sites comme dreamweaver par exemple.
* Développer manuellement et non en mode design
* A chaque modification du code, rafraichir sur tous les navigateurs, ne pas mettre les naviageurs en plein écran, et modifier la taille de la fenêtre des navigateurs. Modifier également le zoom de la page, tout le monde n'est pas en 100%. Rien que ce point permet de tester "rapidement" toutes les résolutions et tous les navigateurs.
* Vérifier les positions des blocs et les propriétés CSS avec Firebug.
Au niveau du code:
* Ne surtout pas oublier le DOCTYPE de la page, cela permet une meilleure compatibilité entre les navigateurs.
* Si l'on est pas à l'aise avec le développement web, il faut préférer un site à taille fixe.
* Être rigoureux
* Lors de la création du site, ne pas hésiter à rajouter des couleurs aux background des blocs pour bien les visualiser dans la page.
* Développer en essayant toujours d'anticiper le résultat. Il ne faut pas être surpris par le rendu.
* Être rigoureux
* Développer pour Firefox en priorité. En général, si Firefox donne un rendu, Opera, Safari et Chrome donneront le même rendu. Il est plus facile après de rectifier certaines erreurs d'affichage sur IE.
* Eviter de tomber directement dans le travers des css alternatifs pour corriger les erreurs d'affichage sur certains navigateur, et ne les utiliser qu'en dernier recours!!!
* Eviter tout javascript pour d'éventuelles correction!!!
* Eviter le position:absolute; pour des raisons de positionnement foireux si on a pas bien compris la philosophie du position: Il faut savoir que le position:absolute; prend comme origine l'élément parent dont la position est relative, absolute ou fixed. si l'élément parent est correctement positionné, il est facile de positionner l'élément fils.
* Être rigoureux
Petites astuces de développement:
* Il faut parfois préférer ajouter des blocs et les imbriquer intelligemment plutôt que d'en faire le moins possible
* Les paddings sont plus sûrs que les margins: les margins génèrent fréquemment des bugs d'affichage sur firefox sur des éléments flottants, et certains navigateurs fusionnent les margins entre 2 blocs alors que d'autres les additionnent.
* Utiliser Firebug est très pratique
* Si un problème survient, mettre en commentaire certains bouts de code peut détecter la source du problème.
* Être rigoureux
Voilà en gros ma méthode. Après, à chacun la sienne...
jjsteing
Messages postés
1670
Date d'inscription
vendredi 11 mai 2007
Statut
Contributeur
Dernière intervention
21 mai 2012
181
9 sept. 2009 à 12:41
9 sept. 2009 à 12:41
Bonjour :)
2 choses pour résoudre ton problème :
résolution de l écran:
soit :
1) Faire en sorte avec tes div que la résolution de ta page ne depasse pas 800*600 ou 1024*768 et figer ton site dans cette résolution
2) récupérer la taille intérieur de la fenêtre du client et afficher ton site en fonction de ca (dans le css)
=> va voir mon site : jjsteing.u7n.org et regarde en mettant différentes taille de la fenêtre, le site se modifie en conséquence ;)
------------------
Compatibilité de ton site sous Internet Explorer et Firefox (les 2 navigateurs les + utilisés)
Certaines fonction doivent etre spécifique au navigateur... ex pour récupérer la résolution intérieur de la fenêtre (en javascript) :
De plus, des fonction en css ne sont pas prise en charge suivant le navigateur.. ex : transparence :
<?php
if ($Navigateur=="IE"){
echo "filter:alpha(opacity=50);";
}else{
echo "-moz-opacity:.50;";
echo "opacity:.50;";
}
?>
fait gaffe aussi aux marges et bordures qui peuvent ne pas r&éagir correctement !
voili.. sinon, envoie un lien vers ton site.. je te dirais comment résoudre les soucis ;)
2 choses pour résoudre ton problème :
résolution de l écran:
soit :
1) Faire en sorte avec tes div que la résolution de ta page ne depasse pas 800*600 ou 1024*768 et figer ton site dans cette résolution
2) récupérer la taille intérieur de la fenêtre du client et afficher ton site en fonction de ca (dans le css)
=> va voir mon site : jjsteing.u7n.org et regarde en mettant différentes taille de la fenêtre, le site se modifie en conséquence ;)
------------------
Compatibilité de ton site sous Internet Explorer et Firefox (les 2 navigateurs les + utilisés)
Certaines fonction doivent etre spécifique au navigateur... ex pour récupérer la résolution intérieur de la fenêtre (en javascript) :
NomNavigateur=navigator.appName;
VersionNavigateur=parseInt(navigator.appVersion);
//pour IE
if(NomNavigateur=='Microsoft Internet Explorer' && VersionNavigateur>=4){
if(document.body.clientWidth != GetCookie("InnerWidth") || document.body.clientHeight > (GetCookie("InnerHeight")*11/10) || document.body.clientHeight < (GetCookie("InnerHeight")*9/10)){
document.cookie = "InnerHeight=" + document.body.clientHeight + "; expires=" + expdate.toGMTString();
document.cookie = "InnerWidth=" + document.body.clientWidth + "; expires=" + expdate.toGMTString();
document.cookie = "Navigateur=IE; expires=" + expdate.toGMTString();
Recharge=true;
}
//Pour Firefox
}else{
if(window.innerWidth != GetCookie("InnerWidth") || window.innerHeight > (GetCookie("InnerHeight")*11/10) || window.innerHeight < (GetCookie("InnerHeight")*9/10)){
document.cookie = "InnerHeight=" + window.innerHeight + "; expires=" + expdate.toGMTString();
document.cookie = "InnerWidth=" + window.innerWidth + "; expires=" + expdate.toGMTString();
document.cookie = "Navigateur=Other; expires=" + expdate.toGMTString();
Recharge=true;
}
}
De plus, des fonction en css ne sont pas prise en charge suivant le navigateur.. ex : transparence :
<?php
if ($Navigateur=="IE"){
echo "filter:alpha(opacity=50);";
}else{
echo "-moz-opacity:.50;";
echo "opacity:.50;";
}
?>
fait gaffe aussi aux marges et bordures qui peuvent ne pas r&éagir correctement !
voili.. sinon, envoie un lien vers ton site.. je te dirais comment résoudre les soucis ;)
jjsteing
Messages postés
1670
Date d'inscription
vendredi 11 mai 2007
Statut
Contributeur
Dernière intervention
21 mai 2012
181
9 sept. 2009 à 13:17
9 sept. 2009 à 13:17
:)
je pense que l on se complete.. juste un ptit mot concernant le css et la position absolute... tout dépend de ce que tu veux afficher sur ton site. perso j utilise pratiquement que des positions absolute et je place mes div en fonction de la taille de la fenêtre.. mais comme j ai dis.. les 2 solutions sont bonnes à prendre...
tu peux mémé mixer les deux.. mais il faut être très très très rigoureux et pas se planter et tester, encore tester et retester dans les différents navigateurs !!
ps... n'oublie pas d'être rigoureux !! :p ca parrait con, mais je pense qu il y a 2 principes quelque soit le langage de programmation: l'homogénéité du code qu il soit aérer (tabulation, retour ligne, ...) et.. les commentaires afin de relire plus facilement le code ;)
je pense que l on se complete.. juste un ptit mot concernant le css et la position absolute... tout dépend de ce que tu veux afficher sur ton site. perso j utilise pratiquement que des positions absolute et je place mes div en fonction de la taille de la fenêtre.. mais comme j ai dis.. les 2 solutions sont bonnes à prendre...
tu peux mémé mixer les deux.. mais il faut être très très très rigoureux et pas se planter et tester, encore tester et retester dans les différents navigateurs !!
ps... n'oublie pas d'être rigoureux !! :p ca parrait con, mais je pense qu il y a 2 principes quelque soit le langage de programmation: l'homogénéité du code qu il soit aérer (tabulation, retour ligne, ...) et.. les commentaires afin de relire plus facilement le code ;)
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
9 sept. 2009 à 13:51
9 sept. 2009 à 13:51
Un site intégralement fait de position:absolute; incite à utiliser le javascript pour arranger tout ça à chaque redimensionnement, et j'aime pas javascript =)
Je préfère utiliser le position:absolute; avec parcimonie et seulement dans quelques cas précis.
J'ai récemment fait un site sans javascript (enfin pas pour le design), et quasiment intégralement en position:fixed; avec le contenu principal qui défile dans un cadre, alors c'est pas incompatible non plus =)
Je préfère utiliser le position:absolute; avec parcimonie et seulement dans quelques cas précis.
J'ai récemment fait un site sans javascript (enfin pas pour le design), et quasiment intégralement en position:fixed; avec le contenu principal qui défile dans un cadre, alors c'est pas incompatible non plus =)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
titchouzaune
Messages postés
219
Date d'inscription
samedi 11 août 2007
Statut
Membre
Dernière intervention
28 décembre 2010
16
9 sept. 2009 à 17:08
9 sept. 2009 à 17:08
Merci beaucoup cela m'a bien aidé
ca semble marcher ! ^^
ca semble marcher ! ^^
