28220 sujets

CSS et mise en forme, CSS3

Sur IE, le site marche impecablement.
En revanche, sur Firefox, c'est moche!
Le menu sur la gauche est écrit comme il faut mais la couleur de fond change. Lorsqu'on clique sur un lien du menu, il ne fait pas apparaître la galerie de photo dans le cadre central. J'ai écrit un script en php en suivant l'exemple de ce site.

Y-a-t-il un pb avec Firefox pour la gestion du php?

http://brunocaccio.ifrance.com
Modifié par brunocaccio (04 Jul 2005 - 08:58)
bonjour,

comme tous les navigateur, firefox ne connait pas le php, il ne connait que le html.

Le php est un langage interprèté côté serveur et pas côté client...
si, peux peut-être faire quelque chose : rendre ta page plus propre.
en effet, pour l'intant dans ta page il y a :

* du code en dehors des balises <html> et </html>
* 2 balises <html>
* 2 balise <head>
* 2 ou 3 balises <body>

bon courage...
Oui déjà premiérement faire du nettoyage et surtout:

Ce n'est pas Firefox qui bugue avec ton site mais plutot ton site qui est adapté à IE

En fait IE est assez particulier, il ne respecte pas les règles de w3c et donc n'est pas standard. Et c'est le seul navigateur qui est comme ça.

Donc apparement tu as programmé ton site en le testant par IE et ensuite en le testant par FF il a bugué et il buguera avec tous les autres navigateurs (Opéra,Netscape,...)

1 conseil qui est même un 'ordre' fait 2 css: Une pour IE et une pour les autres navigateur.

ensuite dans ta page principale tu appelles tes css ainsi
<script language="javascript">
        var agent = navigator.userAgent.toLowerCase();
        var ver = parseInt(navigator.appversion);
        if (navigator.appName=="Microsoft Internet Explorer")
           document.write('<link href="feuille_pour_IE.css" rel="stylesheet" type="text/css">');
        else
            document.write('<link href="autre_feuille.css" rel="stylesheet" type="text/css">');
</script>


Je sais c'est long mais c'est de la faute à Billou !!! Smiley langue
En effet, je viens de le remarquer en affichant la source. Pourtant, ce n'est pas du tout ça que j'ai écrit, voici le code original :

<html>
<head>
	<title>Le Site de Bruno</title>
	<link rel="stylesheet" type="text/css" href="style_sheet_02.css" />
</head>

<body>
	
	<div id="conteneur">
		<div id="header">Site de Bruno</div>	
		<div id="gauche">
			<p></p><p>
	  	
			<ul class="menugauche">			
				<li><a href="index.php?page=accueil">Accueil</a></li>
				<li><a href="index.php?page=gallerie_musique_03">Fête de la musique 2003</a></li>
				<li><a href="index.php?page=gallerie_musique_05">Fête de la musique 2005</a></li>
				<li><a href="index.php?page=gallerie_sassenage">Rando à Sassenage</a></li>
				<li><a href="index.php?page=gallerie_domene">Rando à Domène</a></li>
				<li><a href="index.php?page=gallerie_ski">Ski à Lans en Vercors</a></li>
			</ul>
		</div>
		<div id="frame">			
			<?php include("menu.inc.php");?>
		</div>	
		<div id="pied">
			<div id="aDroite"><?php include("liens.inc.php");?></div>
			Mise à jour : 04/07/2005			
		</div>
	</div>
	
</body>
</html>


Je pense que ce sont les include php qui ajoute du code dans la page.
Ok merci, je vais m'y atteler. Mais pour faire la feuille de style css, j'ai repris les exemples de ce site. Je pensais que ça s'adapter sur tous les navigateurs.

Maintenant, je ne sais pas comment écrire une feuille de style css pour firefox. Comment faire?
Modifié par brunocaccio (04 Jul 2005 - 09:49)
Administrateur
brunocaccio a écrit :
Ok merci, je vais m'y atteler. Mais pour faire la feuille de style css, j'ai repris les exemples de ce site. Je pensais que ça s'adapter sur tous les navigateurs.

Maintenant, je ne sais pas comment écrire une feuille de style css pour firefox. Comment faire?

Il ne faut surtout pas faire une version "pour tel ou tel navigateur".
C'est contraire à tout ce que l'on apprend ici, contraire à toute notion de standard.

Voici quelques pistes à suivre :
Faire un site compatible sur tous les navigateurs
Comment résoudre les problèmes d'affichage en CSS ?

Bonne chance Smiley smile
Modifié par Raphael (04 Jul 2005 - 09:53)
Pops83 a écrit :

<script language="javascript">
        var agent = navigator.userAgent.toLowerCase();
        var ver = parseInt(navigator.appversion);
        if (navigator.appName=="Microsoft Internet Explorer")
           document.write('<link href="feuille_pour_IE.css" rel="stylesheet" type="text/css">');
        else
            document.write('<link href="autre_feuille.css" rel="stylesheet" type="text/css">');
</script>


Pitié !!!!!!!!!

pas de détection du navigateur côté client par identification javascript de celui-ci pour écrire des liens de CSS à la volée !
- ça ne marche que dans la mesure où le script peut identifier le navigateur, ce qui est faux dans de nombreux cas (script approximatif, user agent modifié ou imprévu, proxy, fire-wall, etc)
- ça laisse comme un léger problème si javascript est désactivé
- en javascript, le principe de base pour la fiabilité est de tester le support de la fonctionnalité requise, surtout pas l'identité affichée du navigateur
- c'est inutile : une CSS unique suffit à Firefox et IE

Ou alors, on laisse tout tomber, et on revient aux grandes heures du DHTML et du "optimized pour Brocolis Communicator 4.75" Smiley rolleyes
Modifié par Laurent Denis (04 Jul 2005 - 10:06)
J'ai pu corriger un pb sur mes pages.
Pour faire afficher mes images, je donnais le chemin avec des anti-slash, or sur Firefox, il ne reconnaît que les slash. Sur IE, il les reconnaît aussi, ça m'arrange!

Pour revenir à tes conseils Raphaël, je vois difficilement comment on peut rendre les pages visibles sans css. Toutes mes pages sont liées à la feuille de style. Comment faire si le navigateur ne reconnaît pas la feuille de style css?
Je suis allé sur W3C et il a validé ma feuille de style css.

D'autre part, en admettant que je teste mon site sur Firefox en premier, comment arranger les pages pour qu'elles soient aussi claires sur IE?
J'ai remarqué un truc : dans le menu, le fond n'est plus le même si on est dans l'une des trois premières rubriques. En revanche, le fond est bien celui du menu si on est dans l'une des trois dernières rubriques.

Si on est dans les trois premières, le pied de page est plus haut car il y a moins de photos. C'est peut-être à cause de ça mais je ne vois pas du tout pourquoi?

La feuille de style complète est :

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	background-color: #6666CC;
	color: #FFFFFF;	
	margin: 0;
	padding: 0;			
}
#conteneur {
	position: absolute;
	width: 750px;
	height: auto;
	background-color: #993366;
	left: 50%;
	margin-left: -375px;			/* la moitie de la largeur */
	border: 1px solid #000;
}
#frame {	
	background-color: #9933CC;
	margin-left: 150px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	overflow: auto;
}
#header {
	height: 75px;
	background-color: #000000;
	font-size: 40px;
	color: #FFCC99;
	font-weight: bold;
	text-align: center;
}
#gauche {
	position: absolute;
	left:0;
	width: 150px;
	padding-left: 1px;
}
#pied {
	height: 25px;
	background-color: #000000;
	font-size: 12px;
}
#aDroite {
	float: right;
	width: 300px;
	text-align: right;		
}

p {
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 15px;
	text-align: justify;
}

a:link {
	color: #FFFFFF;
	text-decoration: none;
	background-color: transparent;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
	background-color: transparent; 
}
a:hover {
	color: #FFFF00;
	text-decoration: underline;
	background-color: transparent;
}
a:active {
	color: #99CC00;
	text-decoration: underline;
	background-color: transparent;
}

img {
	border: none;
}

.menugauche {
	list-style-type: none;
	font-size: 11px;
	margin: 0;
	padding:0;	
}
.menugauche li {
	margin-bottom: 5px;	
}
.menugauche a:link {
	color: #FFFFFF;
	text-decoration: none;
	background-color: transparent;
}
.menugauche a:visited {
	color: #FFFFFF;
	text-decoration: none;
	background-color: transparent; 
}
.menugauche a:hover {
	color: #FFFF00;
	text-decoration: underline;
	background-color: transparent;
}
.menugauche a:active {
	color: #99CC00;
	text-decoration: underline;
	background-color: transparent;
}


Bon courage pour la lecture...
Modifié par brunocaccio (04 Jul 2005 - 10:55)
brunocaccio a écrit :


Pour revenir à tes conseils Raphaël, je vois difficilement comment on peut rendre les pages visibles sans css. Toutes mes pages sont liées à la feuille de style. Comment faire si le navigateur ne reconnaît pas la feuille de style css?


Etapes de conception :
1. la page sans aucune CSS, en (X)HTML brut, valide. Le but : un affichage cohérent, ergonomique et pleinement fonctionnel dans n'importe quel navigateur (texte, ancien navigateur graphique sans CSS viable, navigateurs récents).
2. la CSS valide pour les navigateurs ayant une bonne implémentation CSS (Firefox, Opera, Safari, Konkeror). Objectif : la présentation de mon choix, sans hack
3. la CSS valide modifiée ou complétée si nécessaire (hacks, CSS complémetaire en commentaires conditionnels, etc) pour IE. Objectif : pas forcément le rendu à l'identique, mais une expérience graphique pleinement acceptable.
Bon ok je reconnais mon erreur mais je n'ai fait que suivre des conseils trouvés sur le net!
J'ai l'impression que ceux qui font avec des tableaux n'aiment pas ceux qui font avec des div et inversement!
Et que chacun a sa méthode et critiquent les autres!
Il n'y pas une bonne méthode mais plusieurs mauvaises à cause de IE

Après en ce qui concerne le javascript: je n'ai toujours pas compris pourquoi 10% (chiffre bizarre) des internautes désactivent le javascript.
Problème de sécurité??? J'ai jamais entendu parler et eu un énorme virus ou une attaque par du javascript mais bon!!! Autant désactiver alors tous les langage côté client mais bon ça veut dire pas de mise à jour de xp, pas de formulaire,...
ça fait un peu parano!!! non?
Pops83 a écrit :
Bon ok je reconnais mon erreur mais je n'ai fait que suivre des conseils trouvés sur le net!
J'ai l'impression que ceux qui font avec des tableaux n'aiment pas ceux qui font avec des div et inversement!
Et que chacun a sa méthode et critiquent les autres!
Il n'y pas une bonne méthode mais plusieurs mauvaises à cause de IE

Pour ce qui est des conseils trouvés sur le net, sur le net il y a de tout, du bon, du moins bon et du franchement n'importe quoi, donc ne pas suivre aveuglement sans réfléchir Smiley cligne

Tu parles de ceux qui utilisent les tableaux et ceux qui ne le font pas... mwui je vois pas trop la corrélation m'enfin...
En tout cas, ce que nous promottons sur ce forum c'est la qualité de conception, et ceci entraine l'utilisation de langages normalisés, de la séparation contenu / mise en forme etc

Il n'est pas difficile d'associer le qualitatif à un code propre, bien structuré, sémantique, face à l'anarchie de la soupe de <table> et autres spacer.gif
Pops83 a écrit :

Après en ce qui concerne le javascript: je n'ai toujours pas compris pourquoi 10% (chiffre bizarre) des internautes désactivent le javascript.
Problème de sécurité??? J'ai jamais entendu parler et eu un énorme virus ou une attaque par du javascript mais bon!!! Autant désactiver alors tous les langage côté client mais bon ça veut dire pas de mise à jour de xp, pas de formulaire,...
ça fait un peu parano!!! non?


Ca c'est encore une autre question, mais tu n'y changera rien et c'est très bien comme ça Smiley cligne
Le JavaScript doit être utilisé pour ajouter du plus, faire du mieux, offrir une meilleure navigation dans la mesure du possible, etc mais en AUCUN cas faire dépendre l'affichage d'un site de son support.
A ce sujet :
http://blog.alsacreations.com/2005/06/09/161-javascript-aucune-contre-indication
Pops83 a écrit :

J'ai l'impression que ceux qui font avec des tableaux n'aiment pas ceux qui font avec des div et inversement!


Il n'y a pas ceux qui font avec des tableaux et ceux qui font avec des div.

Il y a des choix à faire en terme de qualité du code, du résultat produit et de qualité de l'expérience utilisateur, en fonction des compétences et des moyens.

Le codage à la papa (DHTML, optimisation pour un navigateur, etc.) ne répond simplement plus aux exigences d'aujourd'hui en termes de qualité.
Administrateur
Pops83 a écrit :

Après en ce qui concerne le javascript: je n'ai toujours pas compris pourquoi 10% (chiffre bizarre) des internautes désactivent le javascript.
Problème de sécurité??? J'ai jamais entendu parler et eu un énorme virus ou une attaque par du javascript mais bon!!! Autant désactiver alors tous les langage côté client mais bon ça veut dire pas de mise à jour de xp, pas de formulaire,...
ça fait un peu parano!!! non?

Imagine-toi être responsable de 500 ou 5000 postes informatiques au Ministère de la Défense, Aéroport de Paris, Airbus, Michelin, ... Tu désactives JS ou bien tu prends le risque de tout faire tomber en 1 attaque sournoise? Smiley cligne
Chez moi, j'active JS (et je fais des backups manuels), au boulot je voudrais pas être "le gars par qui c'est arrivé"

EDIT: la pire plaie étant le portable qui navigue entre l'ADSL le week-end à la maison et reviens le lundi chargé d'on ne sait quoi au sein même de l'entreprise ... S'il y a un jour où il faut tout désactiver, c'est le lundi Smiley ravi JS ou autre
EDIT2: juste devant la clé USB, très pratique pour transférer volontairement et ... involontairement.
Modifié par Felipe (07 Jul 2005 - 08:02)
Pops83 a écrit :

Après en ce qui concerne le javascript: je n'ai toujours pas compris pourquoi 10% (chiffre bizarre) des internautes désactivent le javascript.


ce 10% est un chiffre mythique : personne n'a la moindre certitude sur le nombre d'utilisateurs activant / désactivant javascript, sans même tenir compte des zones de sécurité d'Internet Explorer, de l'activation/désactivation à la volée dans Firefox, Opera, etc.

Pops83 a écrit :

Autant désactiver alors tous les langage côté client


Non, pas du tout. Juste s'en servir là où ils ont été conçus pour : c'est à dire ajouter du confort, sans compromettre le résultat lorsque le client n'implémente ou n'active pas le bidule.

Si javascript était un outil universel, il s'appelerait HTML.

Pops83 a écrit :

mais bon ça veut dire pas de mise à jour de xp, pas de formulaire


Pas de formulaire ? Ah... Il y a un truc bien qui s'appelle la validation des formulaires côté serveurs, et qui n'empêche en rien de tenter une validation côté client sans qu'elle soit obstructive Smiley cligne
Modifié par Laurent Denis (07 Jul 2005 - 08:30)
Administrateur
10% avec JS désactivé> en effet, l'expression "une minorité non négligeable" permettrait de moins s'avancer Smiley cligne