Discussion :

[Hyuunkel]

1) Bonjour à tous, je travail actuellement sur une page et je suis confronté à un soucis de centrage à l'intérieur d'un bloc.

Tout le site et mes blocs se cadrent et s'ajustent bien comme je le désire, je souhaiterai juste switcher un padding en fonction de la résolution client sans rien changer d'autre.

Par exemple par défaut dans mon css j'ai mis pour une résolution de 1024*768, un padding à 3% pour ce bloc, je souhaiterai le passé automatiquement à 5% si je passe ma résolution en 1280*1024 par exemple...

Je pense que cela est faisable en javascript (c'est pourquoi je poste ici) mais je n'ai pas trouvé mon bonheur

L'un d'entre vous aurait'il un petit script sous la main susceptible de m'aider SVP ?

2) Une autre des pistes que j'ai tenté d'explorer étais de gérer ce padding en fonction du ratio (un pour le 4/3, un pour le 16/9 par exemple) mais je n'ai pas trouvé non plus comment gérer le ratio...

Cordialement

[SpaceFrog]

Tu peux charger un css en fonction de la résolution détectée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert('Votre resolution est '+screen.width+'x'+screen.height);

[Hyuunkel]

Bonjour SpaceFrog, merci de ta réponse rapide qui me confirme dans un 1er temps que c'est faisable .

Je connais effectivement la fonction alert qui permet d'afficher un message (en l’occurrence : la résolution) mais je ne sais pas comment codé le switch.

J'ai fait un css du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<style type="text/css">
<!--
#picture1024 {
	padding: 5%;
	width: 500px;
	float: left;
 
#picture1280 {
	padding: 10%;
	width: 500px;
	float: left;
 
// ect...
-->
</style>

Le script que je cherche à faire pour mètre dans mon body serai en quelque sorte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<script type="text/javascript">
if "+screen.width+" == "1024" (<div id="picture1024">)
else if "+screen.width+" == "1280" (<div id="picture1280">)
else ect...
</script>

Mais je ne sais pas comment codé un équivalent en javascript...

[SpaceFrog]

non tu n'y es pas du tout ...

regarde plutôt du coté des feuilles de styles externes.
Un feuille par résolution
et du coup tu fais pointer la balise de style vers le fichier en fonction de la resolution

[Hyuunkel]

ok, j'ai donc essayé sans succès :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
if (screen.width>=1024){
    <link href='styles1024.css' rel='stylesheet' type='text/css'>
}
else{
    <link href='styles1280.css' rel='stylesheet' type='text/css'>
}
</script>

Avant de trouver un script que j'ai adapté et qui fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<link id="reso" href="scripts/styles.css" rel='stylesheet' type='text/css'>
<script type="text/javascript">
var O_Style = document.getElementById('reso');
if( O_Style){
  if( screen.width == 1024)
    O_Style.href = "scripts/styles1024.css";
  else
  if( screen.width == 1280)
    O_Style.href = "scripts/styles1280.css";
	else O_Style.href = "scripts/styles.css";
}
</script>

Merci de m'avoir orienté SpaceFrog , grâce à cela je peux continuer d'écrire ce dont j'ai besoin, Bonne soirée à tous

[SpaceFrog]

L'erreur de ton premier code est de mélanger html et js ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if (screen.width>=1024){
    <link href='styles1024.css' rel='stylesheet' type='text/css'>
}

On ne peut pas "rediger" du code html au milieu d'un script js de la sorte
(éventuellement un document.write, mais a utiliser avec parcimonie dans un contexte limité)

Ce que tu as parfaitement rectifié dans le second code en passant par le DOM

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var O_Style = document.getElementById('reso');

pour récupérer l'element link
et lui attribuer conditionnellement le href :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

O_Style.href =