Le plus compatible?

[Anaon]

Bonjour,

C'est mon deuxième message, j'espère ne pas me tromper de forum...

Voilà, désireux de rendre mon site plus compatible et rapide, je me pose une question, suite aussi à ce que j'ai lu ici. J'hésite entre une construction à base de cadres traditionnels, d'iframe, ou bien encore, comme je l'ai lu ici, d'include php (Mais là, j'ai du mal, j'avais essayé une fois mais j'avais lamentablement échoué, je ne suis pas un pro du tout).

J'avais commencé par un iframe, mais comme je n'ai jamais lu vraiment que du bien là-dessus, j'ai changé pour des cadres normaux, mais je me demande si y'a vraiment un intérêt vu que 80% des visiteurs de mon site actuel sont sous IE6...

Mais j'avoue vouloir retenter le coup des includes php mais j'ai peur que ça ne me permette pas de faire un layout comme je le veux...

Si vous pouviez me conseiller, je vous en serez très reconnaissant, car je suis un peu (Beaucoup?) perdu...

Merci à vous,

AnaoN.

[Cariboo]

Incontestablement, le mieux est de ne pas utiliser de frames du tout. Pas de frames, pas d'iframes.

La solution, ce sont bien les includes php... et cela ne gêne pas pour faire quelque layout que ce soit...

En fait, les include php servent, lorsque l'on définit des pseudoframes, a "stocker" dans un fichier unique, tous les bouts de code qui sont communs à plusieurs codes (comme un en-tête, un menu, un footer, ...). Plutôt que de répéter le même code plusieurs fois, on fait appel à l'include et le tour est joué.

[Anaon]

Ok c'est bien ce qu'il me semblait... Bon alors faut que je trouve des infos là-dessus car je comprends ben le principe genre : include "header", include "footer", mais technique j'ai jamais réussi...

Tu n'aurais pas un bon lien qui explique tout ça?

[mee2]

http://www.alsacreations.com/articles/include/

[Guest CraJK]

Les Frames ça existe encore......

Les includes trop cool à utiliser le plus possibles, qu'est ce que c'est cool de pouvoir modifier 200 pages d'un coup en ne chageant qu'un seul petit fichier, fini les galères.

Sinon, je rajouterais qu'il faut (comme tu dois surement le savoir) que ton hébergeur accepte le PHP.

Et qu'en local, cela ne marche pas toujours

[Guest CraJK]

ARf j'ai fait un doublon de mon post autant pour moi

Modifié 3 Juillet 2004 par CraJK

[Anaon]

Génial, merci pour le lien et vos conseils, ça me motive! Je tente ça cet après-midi

Pour le php ça va mon héberger accepte ;-)

[Anaon]

Et bien dîtes donc ça avance mais j'ai juste un soucis... Je voudrais que dans ma css, le fond image de mon header soit au milieu mais il semblerait que seul les valeurs droite et gauche soient prises en compte... Si je mets "center", ça ne fait rien du tout...

[Monique]

Bonjour,

Dans tes règles de style, tu dois spécifier les valeurs position et repeat du fond, par exemple

div {
 background-image: url(fichier.gif);
 background-repeat: no-repeat;
 background-position: center;
}

et cela devrait fonctionner.

Pour alléger le code, il est cependant préférable de le présenter ainsi

div {
	background: url(fichier.gif) no-repeat center;
}

[Anaon]

Bonjour,

Génial, merci beaucoup!

J'avais trouvé ça sinon:

.conteneur {
     margin-left: auto;
     margin-right: auto;
     width: 799px; /* largeur obligatoire pour être centré */
     text-align: left; /* on rétablit l'alignement normal du texte */
     }

Mais j'y arrive pas trop, j'essaie ton code ;-)

Par contre là subitement, je me demande un truc, ça sert à rien que je continue si c'est pas possible, j'aimerais que le fond du "centre" (Les éléments qui changent) soit fixe parce que tout mon layout est lié à ça, vous pensez que c'est possible?

EDIT : Ah nan en fait le code que j'ai donné marche mieux, il ne semble pas prendre en compte la valeur center de "background-position"...

Modifié 3 Juillet 2004 par Anaon

[mee2]

Heu, le code de Monique centre une image de fond dans le div tandis que le tiens centre le div dans la page, je crois, ça sert pas à la même chose - ou alors j'ai rien compris ce qui est aussi possible.

Et pour que l'image de fond ne bouge pas quand on scrolle (si c'est ça que tu veux), il faut mettre background-attachment: fixed;

...

Modifié 3 Juillet 2004 par mee2

[Anaon]

Faut dire que je m'exprime mal aussi, mais j'ai compris ce que tu veux dire, et en effet, j'ai réctifié, moi c'est vraiment l'ensemble du site que je voulais centrer et j'ai réussi ;-)

[Anaon]

Voilà, ça m'aura près près d'une journée entière pour uniquement une page, c'est un début, j'en ai bavé et je ne suis pas encore sûr de mon coup, m'enfin je ne me suis pas occupé du design, c'est juste le squelette css du site que j'ai fait...

Et... Si vous pouviez me dire si je suis sur la bonne voie d'un site compatible et rapide, ce serait vraiment très sympa parce que là j'ai tout donné

C'est cette page : http://www.sleeping-demon.com/home.php (Que pour résolution 1280 pour l'instant :/)

Voilà, merci déjà pour tous vos conseils...

AnaoN.

Edit: Je m'aperçois à l'instant que dans Mozilla le site est à gauche et dans IE il est au centre que je voulais... Hum... C'est vexant lol mais je verrais ça demain ;-)

Modifié 3 Juillet 2004 par Anaon

[Anaon]

Bon et bien je m'en aperçois à l'instant, je ne sais pas pourquoi mais ma page c'est du n'importe quoi dans Mozilla alors que c'est impecc dans IE, si quelqu'un sait pourquoi, je suis très très preneur car là, je ne vois plus...

[Guest meta nando]

Salut,

Chez moi, avec Firefox ça passe bien.

Cela dit, je ferais quelques remarques:

• Ton image map est curieuse, c'est la 1ère fois que je vois ce système.
  Visuellement l'image qui sert de repère pour l'oeil c'est une image de fond, tandis que l'image map, en elle même, c'est juste une gif transparente...
  Cela fait 2 images. Une pourrait suffire, surtout si elles sont de grande taille (elles font 1000px de large). De plus l'image significative apparaît seulement dans la couche CSS, c'est-à-dire dans partie cosmétique du document. C'est un contresens: l'information (le fond) doit être dans le document HTML et non dans le fichier CSS (la forme).
  
  Etale les menus dans l'image sur deux lignes, on passera de 1000px à environ 500px, ça rentrera dans un écran 800x600, étant donné que c'est cette image map qui fixe la largeur de la page.
  
  
  
• Tu as placé du code spécifique à Microsoft, je pourrais en déduire que tu ne considère que la majorité: les internautes utilisant MS IE. Si tu te sers aussi de Mozilla pour créer le site il vaut mieux ne pas utiliser de code propriétaire (sauf, par exemple, pour la coloration des barres de défilement qui n'a pas d'incidence dans l'accès à l'info) pour éviter d'avoir de mauvaises surprises.
  
  
  
• Tu utilises une DTD stricte, et peut-être cela serait plus simple d'utiliser une DTD transitionnelle. Cette dernière colle mieux à ton type de code.
  
  ...
  

[Anaon]

Salut,

D'abord, merci beaucoup pour toutes ces remarques, très enrichissants.

Mon histoire de gif transparent, c'était un peu une pirouette, je ne savais pas comment faire. Or, je pensais qu'on pouvait mettre les fonds dans la css? Il me semble l'avoir lu sur un site, non?

Parce que dans l'idée, j'aimerais faire des versions 800 et 1024 (Là c'est pour du 1280), d'où ces tailles d'images importantes, mais donc je pensais ainsi pouvoir mettre une css pour chaque résolution, et si l'adresse des images de fond figure dans les différentes css, ça me paraissait beaucoup plus simple non?

Après pour le code, alors je ne m'y connais pas assez, je crois juste avoir le code pour l'ascenseur en couleur, ce qui n'est pas compatible Mozilla mais sinon, je ne sais pas ce que je dois changer pour que ce soit plus compatible...

Au sujet de ta dernière remarque, alors là, je ne sais même ce que veut dire DTD

Mais je veux je suis ouvert

@+ et merci encore ;-)

AnaoN.

[Guest meta nando]

Salut Anaon,

Mon histoire de gif transparent, c'était un peu une pirouette, je ne savais pas comment faire. Or, je pensais qu'on pouvait mettre les fonds dans la css? Il me semble l'avoir lu sur un site, non?

Bien sûr qu'avec les CSS on peut gérer les fonds, c'est même l'un de ses buts.

CSS sert à mettre en forme les données du document (alignement, couleurs, indentations...) et à faire de la mise en page (marges, remplissages, divisions...).

CSS est indépendante de l'information, elle est accessoire. Ta page doit pouvoir entièrement fonctionner s'il n'y a pas de CSS associée, puisque l'information est sur la page HTML et non pas dans la CSS.

Le lien vers ton image map, qui contient les repères visuels de navigation, n'est pas sur le document HTML, mais sur le fichier CSS. L'image map destinée à être vue par l'humain doit être dans la page HTML. Cette image fait partie de l'information et non pas de la déco facultative.

La naviagation dans ta page fonctionnera tant que la CSS sera activée.

À lire: Utilisation des images dans les CSS, sur OpenWeb.

Parce que dans l'idée, j'aimerais faire des versions 800 et 1024 (Là c'est pour du 1280), d'où ces tailles d'images importantes, mais donc je pensais ainsi pouvoir mettre une css pour chaque résolution, et si l'adresse des images de fond figure dans les différentes css, ça me paraissait beaucoup plus simple non?

Tu peux le faire, si tu veux. Mais... c'est plus compliqué. Tu dois gérer autant de séries CSS que de résolutions, et utiliser un script (en PHP par exemple, mais là je suis débutant de chez débutant) pour détecter la résolution de l'écran du visiteur.

Pourquoi pas. Je voudrais pas te mettre un barrage, après tout une des qualités du net c'est sa diversité.

En tout cas réaliser une page qui se dérade élégamment (mettons de 800x600 à 1152x864) permet de gérer plus de cas, tout en utilisant qu'une seule feuille CSS.

Après pour le code, alors je ne m'y connais pas assez, je crois juste avoir le code pour l'ascenseur en couleur, ce qui n'est pas compatible Mozilla mais sinon, je ne sais pas ce que je dois changer pour que ce soit plus compatible...

J'ai vue que tu as placé l'attribut SCROLL, dans l'élément BODY, qui est spécifique à Microsoft.

Tu as une liste ici: La balise BODY, sur ZONE DMC.

Au sujet de ta dernière remarque, alors là, je ne sais même ce que veut dire DTD

Mais je veux je suis ouvert

C'est la déclaration de type de document, c'est un lien vers un fichier qui contient les définitions des éléments (les balises) et des attributs qui doivent utilisés dans la page.

Dans ton site tu as écrit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Cela sous-entend que tu dois mettre des guillemets aux attributs, que certains sont interdits par la DTD, que tu t'engage à respecter le sens des balises, etc.

A lire sur OpenWeb:

- Passer du HTML au XHTML

- http://openweb.eu.org/articles/xhtml_une_heure/

- Pourquoi plusieurs variantes de DTD en XHTML ?

Si tu n'est pas à l'aise une DTD stricte, en atendant choisi la DTD suivante:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Elle tolère beaucoup de choses.

Autre chose:

Il y a une barre oblique qui traine entre deux attributs dans la balise IMG, dans la div "header".

[Anaon]

Salut Meta nando et merci pour ta longue réponse... J'en apprends beaucoup...

Je vais donc changer de DTD alors...

Je prends bonne note de tous tes conseils mais avant de continuer dans ce style de site, je sollicite vos talents...

Voilà, j'ai avancé sur ma page mais j'ai un gros soucis, j'aimerais que le fond de ma div principal soit fixe, le truc c'est que ça fonctionne soit sur IE soit sur Mozilla mais pas les deux en même temps, comment faire?

Vous pouvez voir ça sur http://www.sleeping-demon.com/porte.php

Sous IE c'est impeccable, alors que sous Mozilla, mon image de fond est complètement redimensionné, j'ignore vraiment pourquoi...

Si quelqu'un pouvait m'aider avant que j'abandonne ce serait fantastique...

Merci d'avance,

AnaoN.

[Desesperance]

Hi;

Je viens de me rendre compte que le resize du site était assez crado chez moi, je m'explique : lorsque ma résolution est infèrieure a 1280 x 1024, je ne peux pas afficher les données sur la gauche, même la barre de défilement à fond, je vois "EEPING" en haut, et ça s'empire lorsque je réduis la fenêtre.

Ca, même si tu fais une version plus petite, faudrait le revoir je pense !

Pour que ton fond soit fixé, il n'y a pas de remède miracle :

background-repeat: no-repeat;

background-attachment: fixed;

Normalement ça fonctionne sans problème sur tous les navigateurs, à moins que je n'omette un ou deux totalement marginaux (?)

<style type="text/css">

_AT_import url("demon.css");

</style>

Par contre ça, il est préférable de le changer pour un

<link href="demon.css" rel="stylesheet" type="text/css">

En espérant t'avoir aidé !

[LaurentDenis]

<style type="text/css">

_AT_import url("demon.css");

</style>

Par contre ça, il est préférable de le changer pour un

<link href="demon.css" rel="stylesheet" type="text/css">

En espérant t'avoir aidé !

Non : l'@import permet de cacher la CSS aux navigateurs ayant un support CSS buggués (typiquement, NS4).

[LaurentDenis]

J'ai vue que tu as placé l'attribut SCROLL, dans l'élément BODY, qui est spécifique à Microsoft.

Tu as une liste ici: La balise BODY, sur ZONE DMC.

Un p'tit truc tout bête pour vérifier qu'un élément ou un attribut est valide, propriétaire, obsolète, déconseillé... les tableaux récapitulatifs de la specification HTML4.01 :

- Index des éléments

- Index des attributs

Ces tableaux sont valables aussi bien en HTML qu'en XHTML.

- Les éléments et attributs absents de ces tableaux... sont invalides.

- Les attributs ne sont utilisables que sur les éléments mentionnés en regard.

- la colonne "Déc." permet d'identifier les éléments et attributs "déconseillés", c'est à dire les restes de HTML présentatif tolérés en (X)HTML transitional, mais qui disparaissent en (X)HTML strict et dans les spécifications XHTML suivantes.

En outre, ces tableaux offrent des liens direct vers la définition des éléments et attributs dans la spécification... Bref, une référence simple à utiliser et une entrée facile dans la spécification

PS: de même, pour CSS2:

- Index des propriétés

- Index des descripteurs

Modifié 21 Juillet 2004 par LaurentDenis

[Anaon]

Merci à vous deux pour ces infos.

Desesperance, ça m'inquiète un peu ce que tu me dis mais de toute façon, je compte faire d'autres versions pour des résolutions différentes.

Mais sinon, j'ai bien mis le no-repeat et le fixed, ça marche bien dans IE comme tu peux le voir, mais absolument pas dans Mozilla, je ne comprends vraiment pas pourquoi l'image de fond est redimensionnée... Personne n'aurait une idée de génie?

[Desesperance]

Salut,

Les modifications ont empiré les choses sous mozilla !

Le fond qui bogeait c'était pas trop grave, mais là c'est tout ton "cont" qui fous le camps !

Et le problème de redimensionnement n'en est pas un : il part sur la gauche, il est rogné.

De là à te dire tout de suite ce que c'est ... hum.. J'vais me remplir le ventre avant

[Anaon]

Oula oui mais j'ai tout refait en fait, et j'ai trouvé sur un site comment fixer le fond sous Mozilla, il faut faire un overflow en fait...

Je bosse actuellement sur cette page:

http://www.sleeping-demon.com/demon4.php ;-)

[Anaon]

Bonjour,

Voilà, j'ai presque terminé mon site, je n'ai finalement pas abandonné le CSS, mais ça m'a pris du temps.

Vous pouvez visiter le site ici : http://www.sleeping-demon.com

Merci d'avance pour vos avis ;-)

AnaoN.