18042 sujets

Questions générales et questions de débutants

[Résolu] Pb de présentation avec php + css

Bonjour,

C'est la première fois que je poste un message sur un forum. Je suis en train de développer un site en php (utilisant le css).
J'ai testé préalablement ma page en html, elle se présente correctement
voir le lien :
http://www-physique.u-strasbg.fr/~vfritsch/stageEntreprise/test/

(au passage, pouvez vous me dire si la méthode utilisée pour les boites css parait correcte?).

Mon pb vient aprés : lorsque je transforme ma page index.html en index.php en décomposant la page en include. Mon but étant de mettre dans 2 includes les parties de code qui seront tj les mêmes qq soit la page -> cad la banniere et le menu vertical.
Mon fichier .php se présente ainsi :
=====
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titre - xxxxxx - Accueil</title>
<link rel="stylesheet" type="text/css" href="styles/base.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="styles/page_accueil.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="styles/papier.css" media="print"/>
</head>
<body>
<?php include("commun1.inc");?>
<!-- partie qui sera spécifique à la page : contenu présent dans le bloc droite. Les balises div de la boite droite sont dans les includes
-->
<?php include("commun2.inc");?>
</body>
</html>
=====
Le pb est le suivant : alors que les tests de la page en .html ont été concluants, lorsque je teste la page .php sur mon serveur local apache, la présentation n'est plus la même -> sous IE7 et Firefox2 le bloc de droite est décalé sur la droite (presque au milieu de la page, alors qu'il devrait être proche du menu vertical)
De plus, sous IE, la page est cadrée à gauche au lieu d'être centrée.

Je ne vois pas d'où peut venir le pb?

Si vous avez une idée, merci de m'en faire part ...

Valérie
Modifié par valfr (06 Dec 2006 - 18:08)
bonjour,

La page en .html (avant transformation en .php) :
http://www-physique.u-strasbg.fr/~vfritsch/stageEntreprise/test/
-> La présentation est correcte

Cette même page en .php (avec la méthode des includes décrite dans le premier message) :
http://www-physique.u-strasbg.fr/~vfritsch/stageEntreprise/test/visuel_page_index_en_php.JPG
-> decalage sur la droite, et page non centrée dans IE7

Le fait de découper la page en plusieurs include provoque apparemment cette anomalie.

Merci de votre aide.
Si vous voyez une autre méthode pour mutualiser le code qui sera commun à ttes les pages du sites, n'hésitez pas à me le dire.

Valérie
Bonjour,

Tu n'aurais pas un exemple en HTML ?
Car je suppose que le problème rencontré vient d'une erreur qui se glisse dans l'un de tes include (je ne vois rien d'autre). Et à partir d'un fichier jpeg, on ne peut pas le voir... Smiley rolleyes

As-tu bien pensé à supprimer les en-tête et autre balises HTML (<html>, <head>, <body> ...) dans les fichiers que tu inclus ?!?

Ah et au passage, tu as oublié un ; dans ton titre : Smiley murf 
<h2>CCM, un cabinet de proximité et international</h2>
Sans savoir précisément comment est réalisé l'include ou sans pouvoir tester le résultat final, difficile de trouver la source du problème.
L'inclusion du code d'une page HTML complète (avec doctype, balises html, head, body...) est une erreur de débutant courante, lorsque l'on pense que les include PHP c'est « comme les frames »... alors qu'il s'agit juste d'un moyen de générer le code d'une seule page (le résultat de l'inclusion).

Sinon, gros problème ici :
.boiteInfoFlash {
	float : right;     /* OK */
	width : 270px;  /* OK */
	height : 90px;  /* (!!!) houlà malheureux, surtout pas de hauteur fixe ! */
}

La hauteur fixe pour une boite censée contenir du texte, c'est suicidaire. Cf. le résultat lorsque l'on agrandit la taille du texte.

PS : toujours penser à tester le rendu lorsque l'on agrandit la taille du texte. Ici, c'est très correct, sauf pour cette boite en hauteur fixe et peut-être pour la hauteur de ligne trop importante des items du menu de navigation.
mpop a écrit :
Sans savoir précisément comment est réalisé l'include ou sans pouvoir tester le résultat final, difficile de trouver la source du problème.
L'inclusion du code d'une page HTML complète (avec doctype, balises html, head, body...) est une erreur de débutant courante, lorsque l'on pense que les include PHP c'est « comme les frames »... alors qu'il s'agit juste d'un moyen de générer le code d'une seule page (le résultat de l'inclusion).

Sinon, gros problème ici :
.boiteInfoFlash {
	float : right;     /* OK */
	width : 270px;  /* OK */
	height : 90px;  /* (!!!) houlà malheureux, surtout pas de hauteur fixe ! */
}

La hauteur fixe pour une boite censée contenir du texte, c'est suicidaire. Cf. le résultat lorsque l'on agrandit la taille du texte.

PS : toujours penser à tester le rendu lorsque l'on agrandit la taille du texte. Ici, c'est très correct, sauf pour cette boite en hauteur fixe et peut-être pour la hauteur de ligne trop importante des items du menu de navigation.


Merci BugsZilla et Gourou dickien, de vous etre penché sur mon pb.

1/ J'ai vu mon erreur pour l'erreur php
-> dans le corps de ma page index.php, mes balises <div id="droite"> ... </div>
étaient en double :
<div id="droite"> ds le premier include
</div> ds le deuxieme include
et <div id="droite"> ... </div> dans le corps de la page index.php

2/Au niveau du code css,
j'avais bien testé ma page en testant l'aggrandissement des caractères, et j'ai dû gérer le css
afin d'éviter que le texte sortent des boites -> en ne fixant pas de valeur fixe pour
height (ds le cas du menu vertical) et en fixant une valeur fixe de height pour les boites de la banniere
afin que les titres ou menu de la banierre n'empietent pas sur le reste.
Pour la boite info flash -> je l'ai mise en fixe car j'ai prévu ensuite de gérer un texte
en défilement et si on n'aggrandi pas à outrance, le texte pourra tj défiler.

Pour la hauteur de ligne trop importante des items du menu de navigation, je l'ai legerement diminué
ainsi que la largeur. J'ai aussi mis la valeur de width à auto pour ttes les balises
enfants de la balise gauche (de cette maniere j'ai seulement une balise avec widht, celle qui
s'appelle div#gauche).
La nouvelle version de la page est tj sur :
http://www-physique.u-strasbg.fr/~vfritsch/stageEntreprise/test/


3/ J'ai remarqué une chose bizarre avec IE 7, qd on utilise les touches Ctrl+ ou ctrl- pour
aggrandir ou diminuer la police de caractères -> ca ne donne pas la même chose
que si on passe par le menu affichage/taille du texte
Qd j'utilise la touche ctrl, le texte n'est pas tj justifié alors qu'en passant par le menu
ca l'est tj.

Merci pour vos conseils ...
Si vous voyez autre chose à améliorer ... n'hésitez pas ...
J'ai testé ma page avec IE7, firefox2, opera, netscape7.1,
mais pas avec les anciennes versions (comment faire?)

Valérie
valfr a écrit :
Pour la hauteur de ligne trop importante des items du menu de navigation, je l'ai legerement diminué

Le problème reste strictement le même (10% moins fort... la belle affaire). Vouloir obtenir un item de menu avec un écart assez important entre le texte et les bords de l'item (ce qui donne une respiration du texte intéressante et une bonne visibilité des items de menu) est une bonne idée. Mais il ne faut pas passer par line-height pour réaliser ça. Petite proposition concrète pour améliorer la qualité de la feuille de style sur ce point :
#nav_g li {
line-height: 1.2em;
}
#nav_g li a { 
padding : 10px 5px ;
}

Seules sont notées les modifications à apporter. Smiley smile

valfr a écrit :
3/ J'ai remarqué une chose bizarre avec IE 7, qd on utilise les touches Ctrl+ ou ctrl- pour
aggrandir ou diminuer la police de caractères -> ca ne donne pas la même chose
que si on passe par le menu affichage/taille du texte

Ctrl+ et Ctrl-molette de la souris, dans IE7, permettent de réaliser un zoom homothétique. C'est différent de la gestion de la taille du texte. Le principe est le suivant : l'utilisateur spécifie, pour naviguer, la taille de texte qu'il souhaite (ce qui s'appliquera à toutes les pages, dès leur chargement). Par ailleurs, si ce réglage ne suffit pas à obtenir une page lisible, on peut utiliser un zoom homothétique, qui agrandit tous les éléments de la page.

valfr a écrit :
J'ai testé ma page avec IE7, firefox2, opera, netscape7.1,
mais pas avec les anciennes versions (comment faire?)

Tu ne devrais pas avoir de problèmes importants entre Firefox 1.5 et Firefox 2, ou même entre Firefox 1.0 et Firefox 2. Il y a de petites différences, mais rien de méchant.
Idem pour Opera (surtout que les utilisateurs de ce logiciels sont souvent des technophiles, qui ont tendance à utiliser les versions récentes).

Le seul soucis, et le seul impératif, c'est de tester avec IE6. Donc soit tu trouves une version dite « standalone » (faire une recherche sur le forum ou sur le web à ce sujet), soit tu peux installer une distribution linux et le script IEs4linux, qui permet d'avoir IE 5, 5.5 et 6 (et récemment IE7, mais c'est encore en test).
Merci cher Gourou dickien,
pour ces derniers conseils au sujet de la feuille de style.

Je ne connaissais pas les versions standalone, merci pour l'info; j'ai commencé à chercher sur le web et j'ai trouvé la page ci-dessous (que je vais m'empresser de décortiquer) :
http://www.blog-and-blues.org/weblog/2006/01/24/459-plusieurs-versions-ie-windows-pour-tester-des-feuilles-de-style-css

C'est trés appréciable ce forum, et la rapidité des réponses que j'ai reçu ..
merci encore

Valérie
valfr a écrit :
C'est trés appréciable ce forum, et la rapidité des réponses que j'ai reçu ..
merci encore


Je suppose que tu considères ton problème comme définitivement [Résolu] Smiley murf
Sujet clos
Aller à