Problème de résolution

Résolu/Fermé

Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022 - Modifié le 26 avril 2021 à 19:12
Grandul - 28 avril 2021 à 15:59

Bonjour,

Je suis débutant et je n'arrive pas à faire en sorte que mon site s'adapte automatiquement à la résolution d'écran de la personne qui le visite.

Pourriez-vous m'aider svp ?

Merci d'avance.

Voilà ce que cela devrait donner sur n'importe quel écran :

Voici mon code CSS si besoin plus bas vous trouverez le code de ma page index.php comme exemple :

/* On travaille sur la balise body, donc sur TOUTE la page */
body
{
 /* Fixe l'image en haut à gauche de la page */
 background-image:url(../images/background.png);
 background-repeat: no-repeat;
 position: fixed; 
 top: 0; 
 left: 0;
 bottom: 0;
 /* Préserve le ratio de l'image */
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
}
.heure
{
 width:82px; 
 height:24px; 
 position:absolute; 
 left:1120px; 
 top:311px; 
 z-index:1;
}
.horloge
{
 width:68px;
 height:23px;
 position:absolute;
 left:1201px;
 top:311px;
 z-index:1;
 font-weight: bold;
 color:white;
}
.logo
{
 width:41px;
 height:41px;
 position:absolute;
 left:820px;
 top:296px;
 z-index:1;
}
.home
{
 width:83px;
 height:53px;
 position:absolute;
 left:263px;
 top:321px;
 z-index:1;
}
.appels
{
 width:74px;
 height:49px;
 position:absolute;
 left:268px;
 top:417px;
 z-index:1;
}
.mails
{
 width:74px;
 height:49px;
 position:absolute;
 left:264px;
 top:510px;
 z-index:1;
}
.socdocs
{
 width:72px;
 height:50px;
 position:absolute;
 left:259px;
 top:596px;
 z-index:1;
}
.sicknessff
{
 width:77px;
 height:70px;
 position:absolute;
 left:258px;
 top:673px;
 z-index:1;
}
.contenu
{
 width:927px;
 height:387px;
 position:absolute;
 left:367px;
 top:350px;
 z-index:1;
}
p
{
    font-size: 22px; /* Paragraphes de 22 pixels */
 text-align: left;
}

Voici le code de ma page index.php comme exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Cockpit Start People Mid-Office 1st-line</title>
<meta charset="UTF-8">
<link rel="icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript">
function horloge(){
                var div = document.getElementById("horloge");
                var heure = new Date();
                var hours = (heure.getHours()<10)?"0"+heure.getHours():heure.getHours();
                var minutes = (heure.getMinutes()<10)?"0"+heure.getMinutes():heure.getMinutes();
                var seconds = (heure.getSeconds()<10)?"0"+heure.getSeconds():heure.getSeconds();
                div.firstChild.nodeValue = hours+":"+minutes+":"+seconds;
                window.setTimeout("horloge()",1000);
}

horloge();
</script>
</head>
<?php
header('Content-type: text/html; charset=utf-8');
$current_time=date('d/m/Y');
?>
<body>

<div id="heure" class="heure">
<font color="white"><b><?php echo $current_time;?></b></font></div>
<div id="horloge" class="horloge">
<font color="white"><b><script type="text/javascript" color="white">horloge();</script></font>
</div>

<div id="logo" class="logo">
<img src="images/logo.png" width="39" height="37" border="0">
</div>

<div id="home" class="home">
<a href="index.php"><img src="images/home-green.png" width="77" height="49" border="0" alt="Home"></a>
</div>

<div id="appels" class="appels">
<a href="appels.php"><img src="images/appels-white.png" width="72" height="46" border="0" alt="Appels"></a>
</div>

<div id="mails" class="mails">
<a href="mails.php"><img src="images/mails-white.png" width="72" height="46" border="0" alt="Mails"></a>
</div>

<div id="socdocs" class="socdocs">
<a href="socdocs.php"><img src="images/socdocs-white.png" width="72" height="46" border="0" alt="Socdocs"></a>
</div>

<div id="sicknessff" class="sicknessff">
    <p><a href="sickness.php"><img src="images/sickness-white.png" width="77" height="51" border="0" alt="Sickness" align="absmiddle"></a>
</p>
</div>
<div id="contenu" class="contenu">
<font color="#35fb35">Couleur icone active.</font><br><font color="white">Couleur icone inactive.</font></div>
</body>

</html>

Configuration: Windows Entreprise 10 / Chrome 90.0.4430.85

A voir également:

Problème de résolution
Résolution de signal actif - Forum Carte graphique
Impossible de charger l'image haute résolution messenger ✓ - Forum Mobile
Problème résolution écran 1920x1080 ✓ - Forum Windows
Messenger : erreur de chargement du média - Forum Facebook Messenger
Cette resolution n'est pas prise en charge par cette tv modifiez la ✓ - Forum Format et connectique vidéo

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38306 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2024 4 705
26 avril 2021 à 21:12

Bonjour,

Premier souci, tu as utilisé des dimensions en Pixelles ... donc fixes ...
Il faut que tu fasses du "proportionnel" ( pourcentage, em ... )
et, dans l'idéal, que tu te tournes vers les queries pour être en mesure de gérer ton affichage en fonction du materiel/résolution utilisée.

Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022
26 avril 2021 à 21:26

Le problème c’est que j’ai jamais utilisé de proportionnel, ni de queries, j’ai essayé plusieurs choses, je suis très amateur et si j’arrive pas à régler ce soucis cela me bloque dans le reste de mon projet et j’ai encore beaucoup à faire.

Je vais chercher de ce côté ce que je peux trouver...

Merci

Grandul > Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022
28 avril 2021 à 15:59

Salut,
du proportionnel pourtant vous en utilisez dans vos premières règles CSS:

 min-height: 100%;

100% c'est bien proportionnel à la page!

Par contre pas compris votre commentaire sur la ligne d'avant:

/* Préserve le ratio de l'image */

Quelle image? La règle étant sur la balise body c'est sur celle ci qu'elle s'applique et non sur une image.

Bref c'est simple , vos valeurs sont "fixées" et correspondent à un écran spécifique(le vôtre?)

 width:72px;
 height:50px;

Hors 72 pixels(et non pixelles) c'est plus ou moins d'espace selon la taille de l'écran et sa résolution.
Donc ça peut pas être juste pour tout les écrans.

Par contre

width:3%;

C'est 3% de la largeur du container de l'élément qui a le style, donc c'est 3% de n'importe quelle dimension.
Bien sûr j'ai mis 3% au hasard, c'est à vous d'indiquer la bonne valeur(et les autres bien sûr en proportions).

Il y aussi les media queries qui permettent d'indiquer plusieurs mises en page selon les échelles de dimensions que l'on veut. Parois ce sont les 2 méthodes qu'il faut employer parce que c'est difficile de tenir compte des rapports largeur*hauteur des résolutions possibles(notamment sur mobile mais aussi si l'utilisateur redimensionne sa fenêtre).

Explication en détails des media queries:

https://www.w3schools.com/Css/css3_mediaqueries_ex.asp

Discussions similaires

Impossible de télécharger photos messenger

Erreur temporaire de résolution de « deb.debian.org ».

Je ne peux pas mettre mon écran en 1920x1080

Qu'est ce que la résolution native

impossible recevoir photo avec messenger