Loading ...Je n’avais pas encore publié d’articles relatifs au HTML et à sa mise en page CSS, j’ai donc décidé de me lancer !
Nous allons voir aujourd’hui quelques trucs et astuces pour bien gérer des problèmes récurrents lorsque l’on développe son site Web ! Et je parle en connaissance de cause ! Qui n’a jamais été confronté à un problème d’affichage entre Internet Explorer et FireFox ? Qui n’a jamais galéré pour arranger la mise en page de son site en modifiant aléatoirement sa feuille de style ? Je suis sûr que vous êtes nombreux.
Je vais donc vous faire partager mon expérience dans ce domaine pour mener à bien un projet de création de site Web et pour gagner du temps sur les phases de debogage.
1) Firebug : l’outil indisensable pour gérer sa mise en page (télécharger le ici : 
)
Et oui le monde de l’Open Source nous concocte parfois, je diraii même souvent, de très bonnes choses comme ce module complémentaire pour votre navigateur FireFox !
Avec ce dernier vous allez être capable de modifier le CSS et le HTML (et même le JavaScript, mais je ne m’arrêterai pas sur ce dernier) en « temps réel » sur votre page, sans avoir besoin d’ouvrir votre FTP, de modifier votre feuille de style et de l’uploader à nouveau sur votre FTP !
Attention tout de même, les modifications effectuées seront visibles sur votre écran mais ne sont pas reportées dans votre fichier CSS. C’est à vous, une fois que vous avez trouvé la bonne valeur à appliquer, de reporter ces changements dans votre feuille de style puis de la remettre sur le FTP.
Je vous laisse découvrir en vidéo les avantages de cet outil : FIREBUG
2. Un petit trick en CSS bien sympathique
Vous développez votre site et vous avez un problème de compatibilité en IE et FireFox ? Aucun problème, voici une astuce (il en existe beaucoup d’autres, mais celle-ci est peu connue) qui vous permettra de gérer au mieux les différences entre les 2 navigateurs web :
Le symbole slash (/) ! Et oui un simple slash suffit pour adapter un style différent pour IE et FireFox. Cette modification s’effectue directement dans votre feuille de style (fichier .css)
Voici un exemple :
div#main {
width:100px; /* Interprété par IE et FF */
/width : 120px; /* Interprété seulement par IE, prendre le dessus sur la valeur juste au dessus */
}
Bien sûr il faut replacer son utilisation dans son contexte. Dans mon exemple je me serais servi de cette astuce pour régler un problème d’affichage sur ma DIV portant l’id main, où la largeur affichée aurait été différente entre IE et FF.
Voilà c’est terminé, pour toute question ça se passe dans les commentaires ci-dessous.
Most Commented Posts
Commentaires
on 17 janvier, 2009 at 15:33 #
Dans ta vidéo de présentation y’a la mule qui tourne en bas à droite, c’est illégal… 
Bon tuto merci ^^
on 7 avril, 2009 at 20:08 #
Yo Ben tu te gave un PR de 4 ! c’est good fait moi des liens en follow un peu…^^(partage ton PR…)
on 5 décembre, 2009 at 20:46 #
I have a fresh joke for you) Why did the cannibal rush over to the cafeteria? He heard children were half price.
___________________________
–/ ceallis canadian /–
-
Commentaires
JChristophe.fr
