Choix automatique de CSS en fonction de la résolution du visiteur

Choix automatique de CSS en fonction de la résolution du visiteur - PHP - Programmation

Marsh Posté le 08-08-2008 à 12:09:24    

Bonjour bonjour,
 
Bon, je présente ce que je voudrais. ;)
En fait, que le CSS s'adapte en fonction de la résolution du visiteur.
 
J'aurais beaucoup de mal à régler ça avec des %, donc voilà ce à quoi j'avais pensé :
 
- Si la largeur est supérieure à 1280, appliquer le CSS1
- Si la largeur est inférieure strictement à 1280, appliquer le CSS2
 
Seulement, je ne saurais pas trop l'appliquer, c'est pourquoi je viens demander votre aide. :)
 
Pour avoir la résolution du visiteur :
 

Code :
  1. <script type="text/javascript">
  2. function res()
  3. {
  4.  x = screen.width;
  5.  y = screen.height;
  6.  location.href="action.php?x="+x+"&y="+y;
  7. }
  8. </script>


 
Pour renvoyer vers un thème, ou l'autre :
 

Code :
  1. <?php
  2. if(isset($_GET['x'])){
  3.    if($_GET['x'] > '1279'){ //Si la largeur est supérieure ou égale à 1280, on met le CSS1
  4.       echo '<link href="lesite1.css" rel="stylesheet" title="CSS1" type="text/css" media="screen" />';
  5.    }
  6.    else{ //Sinon, on met le CSS2
  7.       echo '<link href="lesite2.css" rel="stylesheet" title="CSS2" type="text/css" media="screen" />';
  8.    }
  9. }
  10. ?>


 
Et en fait, ça ne marche pas.
 
Donc j'aurais aimé avoir un peu d'aide de votre part si possible...  :whistle:  
 
Merci d'avance ! :jap:

Reply

Marsh Posté le 08-08-2008 à 12:09:24   

Reply

Marsh Posté le 08-08-2008 à 12:17:52    

qu'est ce qui marche pas exactement ?
$_GET['x'] est bien renvoyé §?
tu as bien mis ce morceau de code dans le <head> de ta page html ?

Reply

Marsh Posté le 08-08-2008 à 12:59:33    

Ben en fait, aucun CSS n'est renvoyé quand je teste la page, dont voilà le head :
 

Code :
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>Index Test</title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <meta name="Description" content="Test" />
  5. <meta name="Keywords" content="Test" />
  6. <meta name="Copyright" content="Test" />
  7. <script type="text/javascript">
  8. function res()
  9. {
  10.  x = screen.width;
  11.  y = screen.height;
  12.  location.href="index.php?x="+x+"&y="+y;
  13. }
  14. </script>
  15. <script type="text/javascript">
  16. <!--
  17. window.onload=montre;
  18. function montre(id) {
  19. var d = document.getElementById(id);
  20. for (var i = 1; i<=10; i++) {
  21. if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  22. }
  23. if (d) {d.style.display='block';}
  24. }
  25. //-->
  26. </script>
  27. <?php
  28. if(isset($_GET['x'])){
  29.    if($_GET['x'] > '1279'){ //Si la largeur est supérieure ou égale à 1280, on met le CSS1
  30.       echo '<link href="lesite.css" rel="stylesheet" title="CSS1" type="text/css" media="screen" />';
  31.    }
  32.    else{ //Sinon, on met le CSS2
  33.       echo '<link href="lesite2.css" rel="stylesheet" title="CSS2" type="text/css" media="screen" />';
  34.    }
  35. }
  36. ?>
  37. <link rel="shortcut icon" type="image/png" href="sm/penta.png" />
  38. </head>

Reply

Marsh Posté le 08-08-2008 à 13:32:46    

Je viens de tester ca marche très bien chez moi, tu as bin un '?x=1280' (par exemple) dans ton url ?

Message cité 1 fois
Reply

Marsh Posté le 08-08-2008 à 14:10:13    

Hmm... Là je vois pas ce que tu veux dire par contre. :/
 
Je dois faire comment pour faire ça ?
 
C'est par rapport à cette ligne je suppose :
location.href="index.php?x="+x+"&y="+y; ?
 
Si oui, elle est indispensable ?
 
Merci :jap:

Reply

Marsh Posté le 08-08-2008 à 14:14:28    

if(isset($_GET['x'])){
 
=> ca veut dire si la variable x est passé en paramètre dans l'url

Reply

Marsh Posté le 08-08-2008 à 15:12:38    

*Toum*
 
Ah ok, je savais pas. http://img1.xooimage.com/files/a/e/d/ack-2853f.gif
 
Comment faire pour passer la variable x dans l'url ? Tu pourrais m'éclairer ? :$

Reply

Marsh Posté le 08-08-2008 à 15:45:04    

Bein dans le code que tu proposes, c'est exactement ce que fait la fonction JS... elle passe x et y comme parametres dans l'url à la page action.php  Du coups après si t'appelle cette fonction dans un lien, le lien renverra vers action.php?x=resolutionX&y=resolutionY
 
A part ça, on fait pas le support des scripts copiés sur le web, donc tu vas devoir y mettre du tien

Message cité 1 fois
Reply

Marsh Posté le 08-08-2008 à 16:16:27    

Sebastien a écrit :

Je viens de tester ca marche très bien chez moi, tu as bin un '?x=1280' (par exemple) dans ton url ?


 
Non, je n'ai pas le '?x=1280' dans l'url. :/
 

esox_ch a écrit :

Bein dans le code que tu proposes, c'est exactement ce que fait la fonction JS... elle passe x et y comme parametres dans l'url à la page action.php  Du coups après si t'appelle cette fonction dans un lien, le lien renverra vers action.php?x=resolutionX&y=resolutionY
 
A part ça, on fait pas le support des scripts copiés sur le web, donc tu vas devoir y mettre du tien


 
Je ne connais pas Javascript ni PHP et je comprenais que ça prenait la résolution, mais je ne savais pas que ça le mettait dans l'url.
Les scripts ne sont pas copié sur Internet, mais par des visiteurs du SdZ bien aimables.

Reply

Marsh Posté le 09-08-2008 à 12:38:23    

Up pour savoir pourquoi j'ai pas le '?x=1680' dans l'url et pour l'arranger. :spamafote:

Reply

Marsh Posté le 09-08-2008 à 12:38:23   

Reply

Marsh Posté le 09-08-2008 à 13:28:12    

ce que je me demande surtout c'est :  
POURQUOI TU AS BESOIN D'UNE CSS EN FONCTION DE LA RESOLUTION DE L'UTILISATEUR.  
J'appelle ça du grand n'importe quoi.
 
Tu pourrais nous en dire plus ? Car selon moi, il suffit juste de corriger ta CSS et ton problème est réglé

Reply

Marsh Posté le 09-08-2008 à 13:40:53    

Ben, le CSS de base est prévu pour une résolution de 1280*1024.
Ce qui fait que les 1024*768 qui sont encore nombreuses ont une barre de défilement horizontal qui fait chier. :spamafote:
 
Il y aurait la solution de CSS à %, mais je ne sais pas m'y prendre, et ça pourrait poser des problèmes avec les tableaux, menus et compagnie avec des grosses résolutions.
 
Voilà voilà pour la petite explication. :spamafote:

Message cité 1 fois
Reply

Marsh Posté le 09-08-2008 à 14:33:07    

Raito33 a écrit :

Ben, le CSS de base est prévu pour une résolution de 1280*1024.
Ce qui fait que les 1024*768 qui sont encore nombreuses ont une barre de défilement horizontal qui fait chier. :spamafote:
 
Il y aurait la solution de CSS à %, mais je ne sais pas m'y prendre, et ça pourrait poser des problèmes avec les tableaux, menus et compagnie avec des grosses résolutions.
 
Voilà voilà pour la petite explication. :spamafote:


Ben tape sur la CSS [:dawak]
on est là pour t'aider pour la CSS aussi [:dawak]
donc au choix, tu balances la CSS ou l'url du site et c'est réglé (cat html/Css/javascript) [:dawak]
 
Je suis sur à 100% que je te trouve une solution
 
et accessoirement, c'est de la folie de faire un site pour une résolution en 1280x1024, alors que la resolution la plus courante à l'heure actuelle est le 1024 en largeur

Reply

Marsh Posté le 09-08-2008 à 14:44:37    

Je suis d'accord pour le 1024, c'est justement pour ça que je cherche une solution avant de commencer quoi que ce soit. ;)
 
Moi, je veux bien balancer mon CSS et l'url du site, mais personnellement, j'y connais vraiment pas grand chose en programmation, et une des seules fois où j'ai demandé si on pouvait me faire un truc, je m'étais fait lynché... http://img1.xooimage.com/files/a/e/d/ack-2853f.gif
 
Après, si tu veux m'aider malgré mes non-connaissances, ça serait avec joie. ;)

Reply

Marsh Posté le 09-08-2008 à 15:12:00    

Balance :o
si tu te fais lyncher alors que tu demandes de l'aide pour ta CSS c'est pas normal
On ne fais pas le boulot des autres, ça c'est sur, mais on peut aider les gens à comprendre leurs erreurs

Reply

Marsh Posté le 09-08-2008 à 16:06:50    

Voilà mon CSS. Oui, il est pas net, oui, c'est en vrac, mais oui, c'est fait à la "Je fais ce que je peux". :spamafote:
D'ailleurs, il y a sans doute des trucs qui servent à rien...
 
Edit: J'ai supprimé, c'était un peu long et ça servait plus je crois. Si jamais ça servait, je le reposterai avec plaisir ^^'

Message cité 1 fois
Message édité par Raito33 le 09-08-2008 à 17:00:12
Reply

Marsh Posté le 09-08-2008 à 16:19:17    

Raito33 a écrit :

Voilà mon CSS. Oui, il est pas net, oui, c'est en vrac, mais oui, c'est fait à la "Je fais ce que je peux". :spamafote:
D'ailleurs, il y a sans doute des trucs qui servent à rien...
 

Code :
  1. plein de code a revoir



Ca t'embeterai pas de me filer l'url de ton site [:petrus75] sur lequel cette CSS est appliquée.
 
Fais moi confiance, je te ferai des miracles :D

Reply

Marsh Posté le 09-08-2008 à 16:21:07    

accessoirement, à la lecture de la CSS, il n' y a qu'un seul endroit ou une largeur ferai chier, c'est sur #content
donc ce que je crains (donc le pire :D) c'est que ton code HTML soit aussi foireux derrière et que c'est pas en changeant une CSS que tu feras grand chose, mais en changeant aussi le HTML,  
 
je t'en dirai plus, en regardant ton site

Reply

Marsh Posté le 09-08-2008 à 16:22:23    

Tu pourras trouver ça ici.
 
Après, les tests pour les changements de CSS, je les faisais là.
 
Merci pour ton aide ;)

Reply

Marsh Posté le 09-08-2008 à 16:30:35    

personnellement il faudra revoir ton site pour du 980px de largeur
il y aurait moyen que tu repondes (du verbe pondre) juste la crea enn 980
 
et il faudra juste refaire les images de fond (qui sont full largeur)
 
ou sinon je peux te proposer de faire en sorte que ton site se redimensionne rien qu'avec une seule largeur

Reply

Marsh Posté le 09-08-2008 à 16:34:23    

Il est déjà fait pour du 1024*768 si tu veux. ;)
 
Je peux l'uploader. Enfin, il restait quelques modifs je crois mais le plus gros était fait.
 
Par contre, la dernière proposition, si je l'ai bien comprise, c'est ce que je cherche. [:aelenia]
 
Enfin, dans les deux cas, si c'est mieux que ce que je comptais faire, c'est parfait. ^^'
 
Merci en tout cas!


Message édité par Raito33 le 09-08-2008 à 16:35:12
Reply

Marsh Posté le 09-08-2008 à 16:39:23    

autre petite remarque, c'est pas normal qu'il y ait des paquets de styles inlines dans la page, notament sur le menu de gauche et le menu horizontal. Met les dans la CSS, ca mange pas de pain

Reply

Marsh Posté le 09-08-2008 à 16:58:28    

Ok, j'essaie de changer tout ça.
 
Edit : Voilà, il n'y a plus de trace de "style" pour les menus. :)

Reply

Marsh Posté le 09-08-2008 à 17:19:34    

ouais mais pas dans la version en ligne  

Code :
  1. <dl style="color: rgb(157, 157, 157);" class="gallery"> 
  2.  
  3. <dt style="height: 26px;" onmouseover="montre('smenu1')" onmouseout="montre()">

Reply

Marsh Posté le 09-08-2008 à 17:42:27    

J'up les modifiés de ce pas !  
 
Normalement, ça devrait être bon. :)
 
Edit: J'ai modifié que la page "index" pour le moment. Pour le reste, je ferai un copié/collé des menus une fois que je serai sur que c'est bon. ;)


Message édité par Raito33 le 09-08-2008 à 17:44:26
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed