Forums Webou.net - Hébergement gratuit et sans publicités avec PHP/MySQL

Programmation => PHP/MySQL - (x)HTML - ... => Discussion démarrée; par: nico.reportages le 12 Novembre 2008, 14:17:12



Titre: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 12 Novembre 2008, 14:17:12
Bonjour,

Je recherche en vain un p'tit truc qui permette à mon site de s'afficher correctement sur l'écran de mes visiteurs quelle que soit la résolution de l'écran.

Auriez vous des suggestions pour ça? Une technique ou un code?

Merci beaucoup de votre attention.

Nico.


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: zezipper le 12 Novembre 2008, 15:48:48
Bonjour,
Je me permets de poster un lien externe au forum, tu devrais y trouver ton bonheur.
http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-site-pour-toutes-les-resolutions (http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-site-pour-toutes-les-resolutions)


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: K@cem le 12 Novembre 2008, 19:59:38
Salut,
L'astuce est très simple : dans ton fichier CSS au lieu de travailler avec des unités fixes (comme le px) tu travaille avec les % ;)
Exemple :
.exmpleDeClass {
width : 89%;
}


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 13 Novembre 2008, 00:54:23
Bonjour,

Wé merci
merci
, J'vais regarder à ça et j'repasserai par ici pour vous donner mon retour sur le sujet si ça peut aussi aider la communauté...

A bientôt,


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 13 Novembre 2008, 02:32:17
Wé wé,
Bon je viens d'aller voir le lien mais ça n'a l'air bien que pour IE.
Je me suis donc orienter vers la solution de K@cem.Mais ou placer width : 89%;
dans mon code html? le mot width apparait sans cesse sur mon code, et je ne vois pas lequel est associé à ma page entière?
Merci à vous et à bientôt...


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: K@cem le 13 Novembre 2008, 10:21:35
Non il faut le mettre dans ton code CSS (ou sinon dans la balise style dans le code html)
Donne nous le lien de ta page ;)


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 13 Novembre 2008, 11:25:30
Un CSS?

"Balise style" me parle déjà plus...

Enfin... Oui, voici mon site, http://www.photographe.fr.nf/ (http://www.photographe.fr.nf/)

Merci K@cem...


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: K@cem le 13 Novembre 2008, 22:52:48
Tu as fais le site en XML+XLST ??


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: zezipper le 14 Novembre 2008, 00:19:54
Wé wé,
Bon je viens d'aller voir le lien mais ça n'a l'air bien que pour IE.
Je me suis donc orienter vers la solution de K@cem.Mais ou placer width : 89%;
dans mon code html? le mot width apparait sans cesse sur mon code, et je ne vois pas lequel est associé à ma page entière?
Merci à vous et à bientôt...

Euh à bon, on a pas du lire le même article  :o


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 14 Novembre 2008, 12:24:13
Bonjour,

Ah... peut être.? J'utilise publisher pour créer mon site en visuel (pas en code j'm'y connais pas assez) et en allant dans la source je peux placer un code, ça j'y arrive. Je cherche juste à savoir ou placer quoi pour que mon site s'adapte à l'écran du visiteur.
Merci pour votre aide.


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: zezipper le 14 Novembre 2008, 15:37:14
dans la balise <head />
Code:
<style type="text/css">
#fluide {
width: 80%;
max-width: 1000px;
min-width: 700px;
}
</script>
<!--[if lt IE 7]>
<style type="text/css">
div {
width: 770px;
width: expression(document.body.clientWidth <= 602? "600px" : document.body.clientWidth >= 1002? "1000px" : "auto");
}
</style>
<![endif]-->


Code:
<body>
<div id="fluide">
CONTENU CREER AVEC PUBLISHER (((((<div style='position:absolute;width:10.4319in;height:6.5152in'>
<!--[if gte vml 1]>))))) --> j'ai rien compris))))))
</div>
</body>



Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 14 Novembre 2008, 16:17:46
Yé zezipper !

MERCI, OK...
Alors je mets le premier code dans head
et le deuxième?  c'est quoi à mettre dans body? C'est quoi qu't'as mis?
Citation
<div id="fluide">
CONTENU CREER AVEC PUBLISHER (((((<div style='position:absolute;width:10.4319in;height:6.5152in'>
<!--[if gte vml 1]>))))) --> j'ai rien compris))))))quote]

Bon merci, je sens qu'j'approche?! Oui....

Merci


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: zezipper le 14 Novembre 2008, 16:34:22
un bloc nommé div avec pour identifiant fluide qui contient tous les autres blocs du corps du document donc qui commence ici:
<body>rien ici <div id=fluide>
et qui termine ici
</div>rien ici </body>


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 15 Novembre 2008, 01:40:01
Zezipper merci

j'ai essayé mais.... ça ne fonctionne pas. Ma page est même toute blanche maintenant. J'ai pas un truc à enlever? Ces codes n'en remplacent aucun?
C'est chaud cette histoire...
Merci de cette aide précieuse.


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: zezipper le 15 Novembre 2008, 10:47:02
Re resalut
as tu essayé un autre logiciel de création de site web ? qui créerai un code plus propre et moins complexe ?
Sinon tu peux toujours trouvés des templates complets open source codé en xhtml+css. Si cela t'intéresse il existe quelques très bon sites,
après tu n'as peut être ni l'envie ni le temps de te mettre au xhtml+css mais tu gagnerais du temps au final pour la maintenance de ton site. Parce que là je vois pas comment t'aider vu le code généré par Publisher.

Il doit même exister des script qui permettrait de gérer les galeries d'images, de façon propre et plus paramétrable.
Je fais quelque recherche et puis proposerai une alternative. A toi de voir et ce n'est que mon Humble avis.



Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 16 Novembre 2008, 18:05:32
Zezipper,

Wé... J'devrais me mettre à un autre logiciel, mais là avec publisher c'est simple. Je créer mon truc visuellement et c'est parti... Sauf que c'est vrai, ça donne des codes un peu chelou...
J'ai pas tellement l'temps en c'moment pour me mettre à apprendre un language mais c'est pourtant le mieux j'imagine... En plus, si tu l'dis....

Y doit qu'en même y'avoir un moyen, maintenant lequel... ça...

Bon merci.
Ca fait vraiment super plaisir d'avoir vos avis et vos conseils. C'est vraiment cool.
Faudrais que j'continu à chercher un code qui fonctionne dans mon cas, et c'est pas simple.

Si jamais y'a des idées, je reste très preneur...
et si je trouve une solution, je ne manquerai pas de revenir pour que ça puisse servir au "Wébouiens".

Salut et MERCI ...


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 17 Novembre 2008, 17:50:56
Salut,

Je cherche toujours ou mettre quel code dans mon code pour que le code fonctionne.... Et ainsi voir mon site s'afficher quelque soit la résolution de l'écran....
Merci de votre aide!


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: K@cem le 17 Novembre 2008, 18:01:20
Salut,
Franchement le code généré par publisher est vraiment illisible et moche !
Je vais quand même essayer un truc :
Remplace cette ligne :
Code:
<body link="#0066FF" vlink="#6633CC" bgcolor=black style='tab-interval:.3923in;
margin:0'>
Par :
Code:
<body link="#0066FF" vlink="#6633CC" bgcolor=black style="with:10%; tab-interval:.3923in;
margin:0">
Si la largeur de la page change dis le moi, sinon il faut changer de logiciel ...
++


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 17 Novembre 2008, 18:10:42
Pfffff.... Bah, ça ne fait rien de différent... Publisher, c'est pas terrible...
Bon... Zut... Merci quand même pour votre aide...


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: Micka le 17 Novembre 2008, 19:15:32
KompoZer (http://www.google.fr/url?sa=t&source=web&ct=res&cd=4&url=http%3A%2F%2Fwww.01net.com%2Ftelecharger%2Fwindows%2FInternet%2Fediteur_de_site%2Ffiches%2F36053.html&ei=iLQhSdfsHYbS0QXNu7jNDQ&usg=AFQjCNFUpRDrIpahgk5EiAsJr8lK9M0T4Q&sig2=BTCOtmVnDHBmbVfN3qdqBw) est vraiment bien, je te le conseil. ;)


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 18 Novembre 2008, 00:25:07
Wé,
Merci pour le truc... Mais arriverais-je plus facilement à ce que je veux en ce qui concerne l'adaptabilité de mon site en fonction de l'écran de mon visiteur?
Pourquoi n'est ce pas possible de modifier mon code actuel pour que ça fonctionne?

a plousse?


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 24 Novembre 2008, 00:41:02
Hé hé,

De retour sur le sujet pour aider les gens qui, comme moi, on fait "l'erreur" de fabricoter un site avec publisher.
Alors, vous souhaitez adapter votre site ainsi fait à la résolution du visiteur?
Eh bien... bon courage! J'ai pas dis impossible, mais... Bon courage. Je n'ai rien trouvé qui puisse fonctionner à partir code générer par publisher. Et j'ai pourtant cherché et même re re re cherché... Mais si vous trouver, merci de venir en témoigner. Ceci est bien sûr un défi que je lance!

Bon...  Si vous avez choisi publisher et que vous souhaitez adapter votre site à la résolution du visiteur, 3 choix s'offre à vous, les voici, les voilà:

1- Rechercher comment on fait et le faire
2- Abandonner et puis utiliser un éditeur de site digne de ce nom
3- Abandonner l'idée de vouloir adapter son site à la résolution de l'écran du visiteur et choisir plutôt de le centrer sur la page. Ce que j'ai fait et je suis très content du résultat.
Dans publisher y'a pas beaucoup de code qui fonctionne et j'ai mis un bon paquet de temps à trouver ça. y'a certainement d'autres moyens, mais j'ai pas trouvé.

Alors il suffit simplement de center le body du site (simple sur un éditeur et la galère avec publisher).
Il suffit donc pour se faire d'insérer
Code:
<div style=center><![endif]-->

en début de body juste après votre
Code:
<body link="#0066FF" vlink="#6633CC" bgcolor=black style='tab-interval:.3923in;
margin:0'>

Voilà, le tour est joué...

Bonne continuation, mais publisher n'a pas fini de vous embêter, alors apprenez sans plus tarder à utiliser un autre éditeur... Ca évitera des probèmes...

Salut et merci à ceux qui ont pris de leur temps ici pour m'aider...


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: peyo56 le 14 Décembre 2008, 23:00:57
bonjour; moi c un peu plus compliqué

j'ai mon corps de la page qui se redimensionne selon la resolution du visiteur mais les bord du haut de la gauche et droite suivent un motif. Y a t'il moyen d'ordoner au css de remplir la page au mieux et que la colone du milieu du tableau fasse toujours x*5 pixels de long car le fond de la celule est une image predefinie et sinon le motif devient moche.les X remplacant une image fictive

/
XXXXXXXXX
Titre avec motif deriere
XXXXXXXXX
\
X
X
x
x
.
.
Corps de la page
X
X
x
x
.
.


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: Arkhena le 14 Décembre 2008, 23:44:32
Bonjour,

Tu peux faire ça en javascript, Peyo, mais c'est un peu lourd...

Peut-être que finalement, ton design n'est pas adapté à une page Web avec toutes les contraintes que cela implique ?

Cordialement,

Arkhena


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: peyo56 le 19 Décembre 2008, 13:28:54
merci de ta réponse, je savait que le javascript pourrait m'aider mais je ne sait pas l'utiliser corectement
j'ai fait des recherches depuis et je pense que je peut approfondir l'énoncé de mon problème

Il y a la taille x de la cellule du milieu en haut (tc)(valeur dynamique)
Il y a la taille x de la page (tp)(valeur dynmique)
Il y a la taille x de la valeur que l'on veut enlever a la taille de la page (td)(valeur fixe)
Il y a la taille x en pixel de l'image a repeter (ti)(valeur fixe)
Voila en gros l'algo:
met la taille x de la page dans tp
tc= (valeur entiere en dessous de ((tp-td)/ti))*ti
ecrit tc a l'endroit ou il y a les styles de cette cellule

c'est tout


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: Arkhena le 19 Décembre 2008, 14:43:54
merci de ta réponse, je savait que le javascript pourrait m'aider mais je ne sait pas l'utiliser corectement
j'ai fait des recherches depuis et je pense que je peut approfondir l'énoncé de mon problème

Il y a la taille x de la cellule du milieu en haut (tc)(valeur dynamique)
Il y a la taille x de la page (tp)(valeur dynmique)
Il y a la taille x de la valeur que l'on veut enlever a la taille de la page (td)(valeur fixe)
Il y a la taille x en pixel de l'image a repeter (ti)(valeur fixe)
Voila en gros l'algo:
met la taille x de la page dans tp
tc= (valeur entiere en dessous de ((tp-td)/ti))*ti
ecrit tc a l'endroit ou il y a les styles de cette cellule

c'est tout

1 - Pour affecter une variable en javascript, il faut utiliser l'opérateur =.
2 - Pour récupérer un élément en javascript, le plus simple est d'utiliser les id dans les éléments de la page et d'utiliser la fonction document.getElementById(id).
Exemple si j'ai une image <img src="" id="monImage"> dans mon html, je peux la récupérer pour la manipuler dans le javascript en faisant var img = document.getElementById("monImage");
3 - Pour récupérer la taille d'un élément en javascript, tu peux faire : element.style.height ou element.style.width
4 - Tu peux ensuite affecter la valeur que tu veux.

Je te laisse chercher comment intégrer et exécuter un javascript dans une page Web.

Bon courage,

Arkhena

PS : Je continue à penser que ce n'est pas une bonne solution et qu'il serait préférable de repenser le design, mais ce n'est que mon opinion.


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: nico.reportages le 21 Décembre 2008, 12:27:07
Bonjour,

En css, un p'tit truc qui peut fonctionner et peut-être mieux qu'en javascript.
A placer dès le début du head:
Code:
<style type="text/css">
body {
width:800px;
margin:0 auto !important;
}
</style>

Peut être ce code fonctionnera t-il?

Salut.


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: Arkhena le 21 Décembre 2008, 16:08:54
Bonjour,

En css, un p'tit truc qui peut fonctionner et peut-être mieux qu'en javascript.
A placer dès le début du head:
Code:
<style type="text/css">
body {
width:800px;
margin:0 auto !important;
}
</style>

Peut être ce code fonctionnera t-il?

Salut.

Ce serait une très bonne solution... Si elle était acceptée par Internet Explorer...


Titre: Re: adapter ses pages à la résolution du visiteur
Posté par: peyo56 le 02 Janvier 2009, 03:14:47
Bonjour et bonne année a tous
Ça y est j'ai réussit et cela me donne exactement l'effet souhaité sauf sur IE (Voir ligne 9 pour l'erreur) ce que je ne comprend pas
je vous donne le code
ti étant la largeur de l'image a répéter
tm étant la largeur a enlever
Code:
<html>
 <head>
  <script language="JavaScript">
function taille()
{
ti=10;
tm=40;
taill = (Math.floor((window.innerWidth-tm)/ti))*ti;
document.getElementById('hautcadre').style.width = taill.toString()+'px';
}
</script>     
 </head>
 <body onload="taille()" onResize="taille()" style="margin:0;padding:0">
  <table style="border-collapse:collapse">
   <tr>
    <td style="width:20px;height:20px;padding:0">
/
    </td>
    <td id="hautcadre" style="width:700px;height:20px;padding:0">
---
    </td>
    <td style="width:20px;height:20px;padding:0">
\
    </td>
   </tr>
   <tr>
    <td style="width:20px;height:20px;padding:0">
|
    </td>
    <td style="width:20px;height:20px;padding:0">
ici ce trouve la celulle contenant le texte
    </td>
    <td style="width:20px;height:20px;padding:0">
|
    </td>
   </tr>
   <tr>
    <td>
\
    </td>
    <td>
---
    </td>
    <td>
/
    </td>
   </tr>
  </table>
 </body>
</html>
Je pende que cela permettra a créer des effet intéressants pour des pages avec un cadre a motif spécifique car l'utilisateur peut utiliser n'importe quel résolution

pour information nico; je pensait a la même chose au début (mettre une résolution fixe) car ca me semblait rentable et pas très difficile a faire mais récemment j'ai acquit un nouvel ordi avec un grand écran plat branché dessus (2048*1536) et visitant des site avec je finit par remarquer que 3/5 de la page est remplit de vide car le site était prévu pour du 800*600.
donc il faudrait mieux remplir au max l'ecran avec le contenu tout en ne cassant pas le theme du site.