Posté 03 juillet 2004 - 09:48
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.
Le plus compatible?
Conseils sur cadre, iframe ou autre
Noter :
Haut
#2
- Motoriste amateur
-
- Groupe : Direction
- Messages : 3 297
- Inscrit(e) : 26-août 03
- Genre:Homme
- Localisation:London N7
- Société:Twenga
Posté 03 juillet 2004 - 10:22
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é.
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é.
Philippe
Directeur SEO International chez Twenga
Pnambique : chatterbots et agents virtuels -
AB Traductions - Traducteurs - Interprètes - Traductions assermentées
Directeur SEO International chez Twenga
Pnambique : chatterbots et agents virtuels -
AB Traductions - Traducteurs - Interprètes - Traductions assermentées
#3
- Groupe : Membre
- Messages : 87
- Inscrit(e) : 03-juillet 04
Posté 03 juillet 2004 - 10:28
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?
Tu n'aurais pas un bon lien qui explique tout ça?
#4
- Groupe : Membre
- Messages : 58
- Inscrit(e) : 18-juin 04
- Localisation:/dev/null/
Posté 03 juillet 2004 - 11:03
#5 Invité_CraJK_*
Posté 03 juillet 2004 - 11:18
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
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
#8
- Groupe : Membre
- Messages : 87
- Inscrit(e) : 03-juillet 04
Posté 03 juillet 2004 - 12:45
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...
#9
- Le Web à tous
- Groupe : Hubmaster
- Messages : 3 952
- Inscrit(e) : 19-août 03
- Genre:Femme
- Localisation:rue Georges Mabile, Havré
- Société:Webatou
Posté 03 juillet 2004 - 12:57
Bonjour,
Dans tes règles de style, tu dois spécifier les valeurs position et repeat du fond, par exemple
et cela devrait fonctionner.
Pour alléger le code, il est cependant préférable de le présenter ainsi
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;
}
Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web
#10
- Groupe : Membre
- Messages : 87
- Inscrit(e) : 03-juillet 04
Posté 03 juillet 2004 - 13:07
Bonjour,
Génial, merci beaucoup!
J'avais trouvé ça sinon:
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"...
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"...
Ce message a été modifié par Anaon - 03 juillet 2004 - 13:12.
#11
- Groupe : Membre
- Messages : 58
- Inscrit(e) : 18-juin 04
- Localisation:/dev/null/
Posté 03 juillet 2004 - 15:02
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;
...
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;
...
Ce message a été modifié par mee2 - 03 juillet 2004 - 15:02.
#13
- Groupe : Membre
- Messages : 87
- Inscrit(e) : 03-juillet 04
Posté 03 juillet 2004 - 22:08
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 ;-)
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 ;-)
Ce message a été modifié par Anaon - 03 juillet 2004 - 22:10.
#14
- Groupe : Membre
- Messages : 87
- Inscrit(e) : 03-juillet 04
Posté 04 juillet 2004 - 22:38
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... 
#15 Invité_meta nando_*
Posté 06 juillet 2004 - 02:49
Salut,
Chez moi, avec Firefox ça passe bien.
Cela dit, je ferais quelques remarques:
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.
...
#16
- Groupe : Membre
- Messages : 87
- Inscrit(e) : 03-juillet 04
Posté 08 juillet 2004 - 09:08
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.
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.
#17 Invité_meta nando_*
Posté 08 juillet 2004 - 19:48
Salut Anaon,
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.
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.
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.
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:
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.or...html_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:
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, le jeudi 08 juillet 2004, 09:08, dit :
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.
Anaon, le jeudi 08 juillet 2004, 09:08, dit :
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.
Anaon, le jeudi 08 juillet 2004, 09:08, dit :
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.
Anaon, le jeudi 08 juillet 2004, 09:08, dit :
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
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.or...html_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".
#18
- Groupe : Membre
- Messages : 87
- Inscrit(e) : 03-juillet 04
Posté 20 juillet 2004 - 23:08
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-...n.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.
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-...n.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.
#19
- Groupe : Email Invalide
- Messages : 42
- Inscrit(e) : 18-juillet 04
- Genre:Homme
- Localisation:Vitré (35)
Posté 21 juillet 2004 - 01:17
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é !
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é !
#20
- Groupe : Membres
- Messages : 1 243
- Inscrit(e) : 26-mars 04
Posté 21 juillet 2004 - 05:57
Desesperance, le mercredi 21 juillet 2004, 02:17, dit :
<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é !
_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).
