Pages :
J'pourrai dire que mon sujet est résolu, mais non.
J'ai enfin mis mon site en ligne sans frame et supprimé les pages de test.

Reste quelques trucs qui vont pas.
- Mettre un espace avant le H2 sur chaque page:
pour que IE prenne cela en compte j'ai mis tout bêtement
H2{margin-top: 2em;
et ça a marché.
pour FF, ça marchait pas alors j'ai mis
<H2><br>Contacts</H2>
et ça a marché.
Donc, 2 codes pour avoir un résultat, il me semble que ce n'est pas normal.
- Avoir un title personnalisé pour chaque page. Comment faire avec une base de données qui génèrent la page? J'ai essayé quelques codes en php, j'ai pas trouvé.
- En ce qui concerne les navigateurs, ça marche sous mozilla et IE7.
J'ai pas pu tester les autres IE donc si vous avez un IE antérieur au 7, j'aimerai savoir, si possible, si vous avez des problèmes.
J'ai testé sous Opéra, c'est la cata, tout mon haut s'affiche n'importe comment, j'vais cherché c'qui va pas.
Pourriez-vous me dire quels autres navigateurs sont souvent utilisés?
Merci d'avance et désolé du pavé.
Modifié par MissGG (18 Feb 2007 - 05:40)
Salut !

MissGG a écrit :
- Mettre un espace avant le H2 sur chaque page:
pour que IE prenne cela en compte j'ai mis tout bêtement
H2{margin-top: 2em;
et ça a marché.
pour FF, ça marchait pas alors j'ai mis
<H2><br>Contacts</H2>
et ça a marché.
Donc, 2 codes pour avoir un résultat, il me semble que ce n'est pas normal.
Et pourtant, ça arrive régulièrement Smiley smile La marge en em n'est peut-être pas très judicieuse, elle risque de prendre beaucoup de place si on aggrandit la taille de police ... Utilise plutôt les px Smiley cligne

a écrit :
Avoir un title personnalisé pour chaque page. Comment faire avec une base de données qui génèrent la page? J'ai essayé quelques codes en php, j'ai pas trouvé.
Tu fais comme pour inclure tes pages, tu utilises la variable $_GET['page'] :
<title>Coxdream : <?php
if (isset($_GET['page'] && is_int($_GET['page']):
  $page = $_GET['page']; 
  $title = array('News', '','Goodies','Liens') ; 
   echo $title[$page];
endif;
?></title>
Pas testé, mais ça devrait être quelque chose du genre. A adapter si tu passes autre chose que des nombres entiers dans la variable $_GET['page'] !

a écrit :
Pourriez-vous me dire quels autres navigateurs sont souvent utilisés?
Safari, IE6, IE7, Firefox & Opera, c'est déjà pas mal Smiley cligne
Modifié par Thomas D. (22 Jan 2007 - 12:55)
Salut Thomas,

Merci de m'avoir répondu aussi vite.
En ce qui concerne les px, em, je ne sais sur quel pied danser car certains me conseille le px pour bien contrôler ce que je veux qui s'affiche, d'autres le em afin de laisser libre choix au visiteur d'agrandir ou non la police. LooL. On pourrait en faire un débat. Du coup, moi, j'utilise les 2 comme ça m'arrange, mais j'imagine qu'il faut choisir. Humm... J'hésite.
Pour ton code, je vais de ce pas essayer.
Et malheureusement, je crois que je vais galérer avec Opéra et ce qui s'ensuit. De plus, je ne les ai jamais utilisé.
Je vous tiendrai au courant de l'avancement et espère vite mettre un [Résolu] à ce sujet Smiley cligne
Modifié par MissGG (22 Jan 2007 - 13:19)
MissGG a écrit :
Salut Thomas,

Merci de m'avoir répondu aussi vite.
En ce qui concerne les px, em, je ne sais sur quel pied danser car certains me conseille le px pour bien contrôler ce que je veux qui s'affiche, d'autres le em afin de laisser libre choix au visiteur d'agrandir ou non la police. LooL. On pourrait en faire un débat. Du coup, moi, j'utilise les 2 comme ça m'arrange, mais j'imagine qu'il faut choisir. Humm... J'hésite.

En gros:
- utilise une unité relative pour tes polices (em de préférence, % ou ex)
- utilise des px pour tout le reste
Pour les unités sur des polices, le débat a déjà eu lieu, MissGG Smiley smile Il faut privilégier les unités relatives. De toutes façons, tu n'as aucune chance d'avoir exactement le rendu voulu chez tous tes visiteurs, inutile d'essayer de "contrôler".

On recommande en général, pour avoir un affichage aussi proche que possible dans IE & Firefox (configurés par défaut), de définir une taille de police en % sur body, puis en em dans le reste de la page.

Par contre, pour les autres dimensions, ça dépend du comportement que tu souhaites observer :

- les éléments dimensionnés en % vont changer de taille en fonction de la taille de la fenêtre ;

- les éléments dimensionnés en em changeront en fonction de la taille du texte ;

-les éléments dimensionnés en px ne changeront pas du tout.

Les trois unités ont des utilisations différentes, et elles peuvent être utiles selon les circonstances.

Ici, dans le cas de la marge, on ne souhaite pas qu'elle change de taille en re-dimensionnant la fenêtre ou en augmentant la taille de police --> px ...
Bonjour à vous,

Deux de mes amis ont testés le site. Un en 800*600 sur IE, l'autre en 1280*768 sur FF. Ben ça donne pas comme chez moi qui suit en 1024*768 sous FF. Donc, ben j'ai fait un site que pour ceux qui ont ma configuration, mdrrr. Je dois tout revoir. C'est balot!
J'vais essayé de changer les em en px, on verra si ça arrange une grande partie ou non. Pour le 1er, y'à l'entête et l'image de fond qui bouge en plus.
Bref, j'ai pas fini. Et pourtant tout est validé en W3C, même pas un tit avertissement quand aux problèmes de config. Bref, souhaitez-moi bon courage. Smiley bawling
Salut.

MissGG a écrit :
Et pourtant tout est validé en W3C, même pas un tit avertissement quand aux problèmes de config. Bref, souhaitez-moi bon courage. Smiley bawling

Ah ben, c'est pas son rôle non plus, au validateur Smiley smile

Lui, il te dit déjà gentiment où et pourquoi il y a des erreurs de syntaxe, pas de conception ! Sinon, il suffirait peut-être de lui demander de faire le site à ta place Smiley lol

Sinon pour "tester" en 800x600, il suffit de redimensionner la fenêtre de ton navigateur Smiley cligne
Lool, pour W3C, je sais que c'est pas son rôle. C'était une boutade !! Smiley cligne
Merci pour l'info du redimensionnement, mais je savais lool. En fait c'est surtout les IE inférieur à 6 qui posent problème apparemment, je dois revenir à une version antérieur à IE7 pour bien tester mon site.
Le problème c'est que toutes mes polices je les ai mis en px, et certains styles varient juste d'1 px. Je sais pas s'il existe une conversion px/em. J'avoue être un peu perdue et ne sait par où commencer. Surtout, je suis franchement découragée. Je pensais voir le bout. Fin, j'vais m'y remettre mais là, je suis démotivée. Ca restera comme ça, et donc inaccessible ou seulement visuellement trés moche pour la plupart, le temps que je me remotive.
Merci en tout cas Smiley cligne
Bonjour à tous,

Ayez, c'est fait. J'ai converti les px en em pour les font-size, et les em en px pour les margin et padding. Il me reste juste des pourcentages quand les height ou width sont à 100% sinon c'est en px. Ca pose pas de problème?
Juste une question, je pense que le menu, je devrais le laisser en px pour qu'il reste toujours affiché de la même manière. Qu'en pensez-vous?
Si vous avez quelques citiques concernant mon code, je suis ouverte aux suggestions.
Si le site s'affiche mal chez vous, n'hésitez pas à me le dire.
Merci d'avance.
:)
Bonjour,

1. Pour le texte en EM, une référence :
Typographie web : gérer la taille du texte avec les « em »
À noter que rien n'interdit d'utiliser les EM pour gérer la taille des blocs, mais qu'à moins de savoir précisément ce que l'on fait ça n'est pas forcément une bonne idée.

2. Le menu a un titre qui dit « Menu » (ce qui a le mérite d'être clair et explicite). Mais si on regarde le code HTML, il s'agit d'un simple paragraphe (élément p). Un titre de section (éléments h1, h2, h3, etc.) serait le bienvenu.

3. De même, la cohérence des titres sur la page est toute relative. La bannière, par exemple, est considérée comme un simple bout de texte. Pourquoi pas, mais on pourrait très bien avoir la structure suivante (pour la page d'accueil :
<h1><img src="..." alt="COXDream"></h1>

<h2>Menu</h2>

<h2>Bienvenue sur COXDream !</h2>

Cela implique de respecter cet ordre logique, et donc de placer la bannière en premier dans le code, avant le menu de navigation. Vu que ces éléments seront positionnés en fixe ou en absolu, cela ne devrait pas poser de problème.

4. L'intitulé du texte alternatif pour l'image de la bannière ne me semble pas pertinent. La question à se poser est : que voudrais-tu voir apparaitre comme texte si jamais le navigateur n'arrivait pas à charger l'image ? Rien (image de décoration) ? Une information précise ? À toi de voir.

5. On garde un problème de lisibilité dans le bloc de contenu principal, avec le texte bleu/vert sur une image de fond vert sombre. La lisibilité du texte sur des images est souvent problématique. Il faudra peut-être assombrir un peu l'image de fond pour renforcer le contraste. Ou encore : supprimer l'image de fond, et songer à un moyen d'intégrer cette image sur tout ou partie des pages, comme image de contenu.

6. Les blocs div#menu et div#contenu ont une hauteur de 100% (height: 100%). C'est problématique : si le contenu est plus important que la hauteur de la fenêtre, les blocs se figeront à cette hauteur (c'est à dire : une « fenêtre » de haut), et le contenu dépassera. Ça n'a pas l'air très problématique sur ton site, mais autant apprendre à faire les choses correctement :
Il faut utiliser non pas une hauteur fixe mais une hauteur minimale, avec la propriété min-height (donc : min-height: 100% sur ces deux blocs -- on garde height: 100% pour html et body, par contre).
IE6 ne comprend pas min-height, mais la FAQ en parle et indique la marche à suivre (indice : on utilisera les commentaires conditionnels pour apporter le correctif spécifique à IE6 et inférieurs).

7. La largeur donnée à div#contenu est trop importante pour que tout le site passe en 800x600. div#contenu fait 770px, auxquels il faut rajouter des marges latérales et le menu de gauche. Ça passera très bien en 1024 pixels de large et plus, mais pas en 800x600.

8. Le code suivant est une bêtise méthodologique :
<img src="../images/bann.gif" style="position:fixed" alt="bannière COXDream">
	<!--[if lte IE 6]> <img src="images/bann.gif"  style="position:absolute" alt="bannière COXDream"><![endif ]-->

Ce code condense trois erreurs
1 - le chemin indiqué pour IE6 et inférieurs n'est pas le même que celui indiqué pour les autres navigateurs ;
2 - le fait de placer une image affichée uniquement par IE6 et inférieurs ne signifie pas que la première image ne sera pas affichée Smiley sweatdrop ... on aura donc deux images, du moins si le deuxième lien pointe vers une image existante ;
3 - les corrections de style spécifiques à Internet Explorer doivent se faire dans la feuille de style CSS des correctifs pour IE, appelée via les commentaires conditionnels. Pas avec des styles en-ligne, en utilisant l'attribut HTML style.

Voilà, ça sera tout. Smiley cligne
Bonjour Florent V.,

Merci pour ta "petite" synthèse Smiley cligne , et surtout merci d'avoir pris le temps, à plusieurs reprises, de te pencher sérieusement sur mes questions et mon site.
Voici mes réponses à tes suggestions :

1. Pour les em/px, j’pense que c’est ok maintenant.

2. Pour le menu, je n’ai pas compris ce que tu me conseillais de faire.
Voici mon code sur la page "menu.html" :
<div id="menu">
  <p class="menutitre">Menu</p>
<ul>
	   <li><a href="../index.php" title="Accueil">Accueil</a></li>
	   <li><a href="../presentation.php" title="Présentation">Présentation</a></li>
	   <li><a href="../Data.php?page=1" title="News">News</a></li>
	   <li><a href="../macox.php" title="Ma Cox">Ma Cox</a></li>
	   <li><a href="../calend/calend1.php" title="Calendrier">Calendrier</a></li>
	   <li><a href="../rass/amn06.php" title="Concentr'">Concentr'</a></li>
	   <li><a href="../discussion.php" title="Discussion">Discussion</a></li>
	   <li><a href="../livredor.php" title="Livre d'Or">Livre d'Or</a></li>	
	   <li><a href="../Data.php?page=3" title="Goodies">Goodies</a></li>	
	   <li><a href="../Data.php?page=4" title="Liens">Liens</a></li>
	   <li><a href="../contacts.php" title="Contacts">Contacts</a></li>
	 </ul>
 </div>

Je ne vois pas en quoi utiliser des h1, h2 serait plus judicieux, mais tu peux me l’expliquer si tu veux Smiley cligne

3. En fait, chacun de ces éléments sont sur des pages différentes, et je ne comprends pas l’intérêt de faire ça. (voir 2.)

4. L'intitulé du texte alternatif pour l'image de la bannière est "bannière COXDream" et "photos Spa 2004" pour le gif, c’est ce que représente les images, pourquoi n’est-ce pas pertinent ?

5. Tu dis : On garde un problème de lisibilité dans le bloc de contenu principal, avec le texte bleu/vert sur une image de fond vert sombre. J’ai pévu de refaire l’interface du site une fois le site sans frame ok. Mais je vais sûrement assombrir l’image en attendant.

6. Pour min-height ça m’a bien servit. Merci. Par contre je n’ai pas compris comment l’utiliser dans IE<6, même en ayant lu la FAQ.
Pour la css normal :
div#menu {
min-height: 100%;}
J’ai créé en tout pour mon site 4 feuilles de styles : le style de base pour tous les navigateurs sauf IE<6 qui a sa propre feuille de style, et deux autres styles pour ma page calendrier.

7. La largeur donnée à div#contenu est passé à 580px. J’ai vérifié en 800*600, ça marche très bien.

8. Ralala, là, j’avais fait une belle boulette. Merci de me l’avoir fait remarquer.
J’ai rétabli mes erreurs et créé un nouveau style rien que pour cette image sur mes deux css. De là, venait le mauvaise affichage sous Opera et sous IE<6.


Concernant, l’affichage sur les navigateurs, j’ai testé de 800*600 à 1152*864 sous Firefox, sous IE7, sous Opéra. Tout marche.
Sous IE<6, le dégradé du menu ne s’affiche pas jusqu’en bas, je ne comprends pas pourquoi. Si on peut m'aiguiller?
J’ai pas pu tester sous Safari (je ne suis pas sur Mac) ni sous Konqueror (j’ai pas Linux), mais je pense que ça devrai aller.

Sinon, pour que les titles soit différents sur chacune de mes pages, l’astuce de Thomas D ne marche qu’à moitié. Seulement certaines pages affichent le title, d'autres rien, et d'autres un mauvais title. Je ne sais pas comment faire exactement car je passe pour une base de données pour certaines pages et pour d’autre non. Fin je comprends pas comment faire.

Voilà tout.
Modifié par MissGG (30 Jan 2007 - 20:08)
Bonjour MissGG,

Ton sujet dérive de plus en plus vers ton sujet perso où tu abordes pêle-mêle tous les problèmes de natures différentes que tu rencontres successivement dans la construction de tes pages.

Pour que ce sujet conserve un intérêt pour la communauté, et si ton problème initial est résolu, merci d'indiquer dans le titre qu'il est effectivement résolu.

La règle sur Alsacréations c'est un sujet par question/problème, ce qui rendra la recherche plus efficace et permettra à chaque membre de pouvoir t'aider à la lecture d'un sujet bien identifié. Smiley cligne

Dès que tu rencontres un nouveau soucis, créez un nouveau sujet avec un titre pertinent.

Merci d'avance de faire le nécessaire.
Bonjour Igor,

Je suis désolée, j'avais pas la sensation d'aborder tellement de sujets que ça. Et tous ont trait à mon problème principal : "passer d'un site avec frame à un site sans frame".
Mon sujet est presque résolu mais il me reste 2 problèmes ("l'affichage sous IE<6" et "les titles différents sur chaque page") et je me vois mal refaire le speech dans chacun de mes messages.
Je comprends bien que pour le bon référencement de votre site par rapport à ces différents problèmes, il vaut mieux faire plusieurs messages, mais je ne voulais pas spammer votre forum.
Je vais donc clore ce sujet et en ouvrir deux autres bien que je ne considère pas celui-ci comme étant résolu.
Cordialement.
Géraldine Smiley cligne
Salut,
MissGG a écrit :
Je comprends bien que pour le bon référencement de votre site par rapport à ces différents problèmes, il vaut mieux faire plusieurs messages, mais je ne voulais pas spammer votre forum.
Il ne s'agit pas du tout d'un problème de référencement, et ce ne sont de toute façon pas deux sujets supplémentaires qui vont y changer quelque chose. Smiley cligne C'est une question d'organisation du forum.
Modifié par Julien Royer (02 Feb 2007 - 10:15)
Pages :