PHP

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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Choix automatique de CSS en fonction de la résolution du visiteur

Raito33

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 :

<script type="text/javascript">
function res()
{
x = screen.width;
y = screen.height;
location.href="action.php?x="+x+"&y="+y;
}
</script>

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

Code :

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

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:

Publicité

Sebastien

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 ?

Raito33

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

Code :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>Index Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Description" content="Test" />
<meta name="Keywords" content="Test" />
<meta name="Copyright" content="Test" />
<script type="text/javascript">
function res()
{
x = screen.width;
y = screen.height;
location.href="index.php?x="+x+"&y="+y;
}
</script>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<?php
if(isset($_GET['x'])){
if($_GET['x'] > '1279'){ //Si la largeur est supérieure ou égale à 1280, on met le CSS1
echo '<link href="lesite.css" rel="stylesheet" title="CSS1" type="text/css" media="screen" />';
}
else{ //Sinon, on met le CSS2
echo '<link href="lesite2.css" rel="stylesheet" title="CSS2" type="text/css" media="screen" />';
}
}
?>
<link rel="shortcut icon" type="image/png" href="sm/penta.png" />
</head>

Sebastien

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

Raito33

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:

Sebastien

if(isset($_GET['x'])){

=> ca veut dire si la variable x est passé en paramètre dans l'url

Raito33

*Toum*

Ah ok, je savais pas.

Comment faire pour passer la variable x dans l'url ? Tu pourrais m'éclairer ? :$

esox_ch

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

Raito33

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 :

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.

Raito33

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

Publicité

gatsu35

Blablaté par Harko

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é

Raito33

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.

Message cité 1 fois

gatsu35

Blablaté par Harko

Raito33 a écrit :

Ben tape sur la CSS [:dawak]
on est là pour t'aider pour la CSS aussi
donc au choix, tu balances la CSS ou l'url du site et c'est réglé (cat html/Css/javascript)

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

Raito33

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é...

Après, si tu veux m'aider malgré mes non-connaissances, ça serait avec joie.

gatsu35

Blablaté par Harko

Balance
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

Raito33

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

gatsu35

Blablaté par Harko

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 :

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

gatsu35

Blablaté par Harko

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 ) 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

Raito33

Tu pourras trouver ça ici.

Après, les tests pour les changements de CSS, je les faisais là.

Merci pour ton aide

gatsu35

Blablaté par Harko

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

Raito33

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

gatsu35

Blablaté par Harko

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

Raito33

Ok, j'essaie de changer tout ça.

Edit : Voilà, il n'y a plus de trace de "style" pour les menus.

gatsu35

Blablaté par Harko

ouais mais pas dans la version en ligne

Code :

<dl style="color: rgb(157, 157, 157);" class="gallery">

<dt style="height: 26px;" onmouseover="montre('smenu1')" onmouseout="montre()">

Raito33

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

Publicité

FORUM HardWare.fr

Programmation

PHP

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

Sujets relatifs
Choix du lien (relatif ou absolu) où l'utilisateur sera dirigé	Chargement d'une animation flash en fonction de l'heure
Script Réponse automatique	[RESOLU]fonction mail qui ouvre messagerie
Soucis CSS IE/Mozilla	[JavaScript] Faire retourner une fonction qui utilise XmlHttpRequest
Menu CSS	[RESOLU] Centrage background css
Probleme avec la fonction unlink	[RESOLU] VBA variable differente en fonction du bouton clicke
Plus de sujets relatifs à : Choix automatique de CSS en fonction de la résolution du visiteur

Page générée en 0.090 secondes