Forum : Redimension selon la résolution de l'écran

Bonjour, je débute dans le codage. Je suis entrain de créer un site seulement quand je passe d'un écran à un autre (avec une résolution différente) les éléments dans mon site se déforme, superpose ou pour d'autres sorte juste du "champ de vision".

<head>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>O'La Piscines</title>
        <body>
            <header>
                <nav>
                    <img src="img\colorednotxt.png" alt="O'la piscine l1" width="200" height="200" style="vertical-align:middle"> 
                    <font face="gophermedium" size="10px"><a href="index.html"><b>O'La Piscines</b></a></font>
                        <font face="gophermedium" size="5px"><a href="#pservice">NOS SERVICES</a></font>
                        <font face="gophermedium" size="5px"><a href="projets.html">NOS PROJETS</a></font>
                        <font face="gophermedium" size="5px"><a href="apropos.html">À PROPOS</a></font>
                        <font face="gophermedium" size="5px" color="#07306e" style="margin-left:1200px">TÉL : +33 6 35 40 20 56</font>
                        <a href='contact.html'><button class="btncontact">NOUS CONTACTER</button></a>
                </nav>
            </header>
                <font face="gophermedium" size="10px" color="white" class="txtcenter">Votre piscines, votre projets</font>
                <font face="gophermedium" size="10px" color="white" class="txtcenter2">notre expertise</font>

                <font face="arial_mt_stdlight" size="10px" color="white" class="txtcenter3">
                Nous nous occupons de tous afin que <br>
                vous appréciez au mieux votre piscine <br>
                </font>

                <a href='contact.html'><button class="btncontact2">NOUS CONTACTER</button></a>

                <!-- PAGE2 -->

                <font face="gophermedium" size="10px" class="titre1">
                UN PROCESSUS <br>
                SIMPLE ET COMPLET <br>
                </font>

                <div class="process1">
                    <img src="img/plancrayon.jpg"
                    alt="plancrayon">

                    <div class="psquare"></div>

                    <p>
                    ESTIMATION, REPÉRAGE, <br>
                    RÉALISATION DU DEVIS <br>
                    </p>

                    <font face="gophermedium" size="10px">
                    01.
                    </font>
                </div>

                <div class="process2">
                    <img src="img/chantierpelteuse.png"
                    alt="plancrayon">

                    <div class="psquare2"></div>

                    <p>
                    CONSTRUCTION DE LA PISCINE
                    </p>

                    <font face="gophermedium" size="10px">
                    02.
                    </font>
                </div>

                <div class="process3">
                    <img src="img/terassagep.jpg"
                    alt="terassage">

                    <div class="psquare3"></div>

                    <p>
                    DÉBUT DU CHANTIER
                    </p>

                    <font face="gophermedium" size="10px">
                    03.
                    </font>
                </div>

                <font class="prosdetail">
                Prise de rendez-vous chez le client, <br>
                discutions du projet piscines en <br>
                fonction des attentes du client et <br>
                des contraintes du terrain <br>
                </font>

                <font class="prosdetail2">
                Mise en relation avec les diérents <br>
                corps de métiers et suivi du <br>
                chantier par le pisciniste. <br>
                </font>

                <font class="prosdetail3">
                Terrassement, maçonnerie de la <br>
                structure, intervention technique <br>
                du pisciniste au fur et à mesure de <br>
                l’avancement du gros des œuvres <br>
                et aménagement extérieur <br>
                </font>

                <!-- PAGE3 -->

            <div class="main" id="pservice"></div>
                <font face="gophermedium" size="10px" class="titre2">NOS SERVICES</font>

                <div class="service1">
                    <img src="img/piscinefermer1.jpg"
                    alt="piscinefermer">

                    <div class="sesquare1"></div>

                    <font face="gophermedium" size="10px">
                    PISCINES NEUVES OU RÉNOVATION
                    </font>
                </div>

                <div class="service2">
                    <img src="img/planalamain.jpg"
                    alt="plans">

                    <div class="sesquare2"></div>

                    <font face="gophermedium" size="10px" class="servd1-1">ETUDES TECHNIQUES</font>
                    <font face="gophermedium" size="10px" class="servd2-1">ET HYDRAULIQUES</font>
                </div>

                <div class="service3">
                    <img src="img/tuyauterieentere.jpg"
                    alt="tuyauterie">

                    <div class="sesquare3"></div>

                    <font face="gophermedium" size="10px" class="servd1-2">TUYAUTERIE ENTERRÉE /</font>
                    <font face="gophermedium" size="10px" class="servd2-2">LOCAUX TECHNIQUES</font>
                </div>

                <div class="service4">
                    <img src="img/pvcarme.jpg"
                    alt="etanche">

                    <div class="sesquare4"></div>

                    <font face="gophermedium" size="10px">
                    ÉTANCHÉITÉ PVC ARMÉ OU LINER
                    </font> 
                </div>

                <div class="service5">
                    <img src="img/equipementpiscine.jpg"
                    alt="pompe">

                    <div class="sesquare5"></div>

                    <font face="gophermedium" size="10px" class="servd1-3">INSTALLATION ÉQUIPEMENTS PISCINES</font>
                    <font face="gophermedium" size="10px" class="servd2-3">( VOLET, POMPE À CHALEUR, ROBOT )</font>
                </div>

                <div class="sesquarei"></div>
                <font face="gophermedium" size="10px" class="tsesquarei">NOUS CONTACTER</font>
                <font face="gophermedium" size="10px" class="tsesquarei2">TÉL : +33 6 35 40 20 56</font>
            </div>

            <!-- PAGE4 -->

            <font face="gophermedium" size="10px" class="titre3">NOS PROJETS</font>
            <a href="projets.html" class="ltprojets">Voir tous nos projets></a>

            <div id="slideshow">
                <div id="slideshow-container">
                    <div id="slider">
                        <figure>
                             <img src="img/piscinevolethors.jpg" alt="" width="2140" height="1120">
                             <font>PISCINE VOLET<br>HORS-SOL BLANC<br></font>
                             <a href='pages/projets/projets#1.html'><button>VOIR LE PROJET</button></a>
                        </figure>

                        <figure>
                                <img src="img/piscinevolethors.jpg" alt="" width="2140" height="1120">
                                <font>PISCINE OUVERTE<br>HORS-SOL BLANC<br></font>
                                <a href='pages/projets/projets#2.html'><button>VOIR LE PROJET</button></a>
                        </figure>

                        <figure>
                                <img src="img/piscinevolethors.jpg" alt="" width="2140" height="1120">
                                <font>PISCINE FERMER<br>HORS-SOL BLANC<br></font>
                                <a href='pages/projets/projets#3.html'><button>VOIR LE PROJET</button></a>
                        </figure>

                        <figure>
                                <img src="img/piscinevolethors.jpg" alt="" width="2140" height="1120">
                                <font>PISCINE SEMI<br>HORS-SOL BLANC<br></font>
                                <a href='pages/projets/projets#4.html'><button>VOIR LE PROJET</button></a>
                        </figure>
                    </div>
                </div>
            </div>

            <!-- PAGE5 -->

            <font face="gophermedium" size="10px" class="titre4">NOS CLIENTS</font>

            <div class="slideshow-container">       
                <div class="mySlides">
                    <img src="img/piscinefermer1.jpg" alt="">
                    <font>
                    "Une superbe expérience ! <br>
                    Il n'y avais rien à faire, <br>
                    car Tristan s'occupe de tous sans <br>
                    aucun souci" <br>
                    </font>
                    <p class="author">Adam J.</p>
                </div>  

                <div class="mySlides">
                    <img src="img/pisicnebaininterne.jpg" alt="">
                    <font>
                    "Super efficace, en plus tout est fonctionnel !"
                    </font>
                    <p class="author">Victor S.</p>
                </div>  

                </div>
                <a class="prev" onclick="plusSlides(-1)">←</a>
                <a class="next" onclick="plusSlides(1)">→</a>

                    <script>
                        var slideIndex = 1;
                        showSlides(slideIndex);

                        function plusSlides(n) {
                          showSlides(slideIndex += n);
                        }

                        function currentSlide(n) {
                          showSlides(slideIndex = n);
                        }

                        function showSlides(n) {
                          var i;
                          var slides = document.getElementsByClassName("mySlides");
                          var dots = document.getElementsByClassName("dot");
                          if (n > slides.length) {slideIndex = 1}
                            if (n < 1) {slideIndex = slides.length}
                            for (i = 0; i < slides.length; i++) {
                              slides[i].style.display = "none";
                            }
                            for (i = 0; i < dots.length; i++) {
                            }
                          slides[slideIndex-1].style.display = "block";
                        }
                    </script>

            <div class="fbsquare"></div>
            <div class="fbsquare2"></div>
                <div class="banderolfin">
                    <font>
                    Vous voulez la piscine de vos rêves <br>
                    nous sommes là pour ça. <br>
                    </font>

                    <img src="img/nocolortxt.png" alt="">

                    <a href="apropos.html" style="top: 572%; left: 32%;">À propos</a>
                    <a href="#pservice" style="top: 572%; left: 25%;">Nos services</a>
                    <a href="contact.html" style="top: 576.5%; left: 32%;">Nous contacter</a>
                    <a href="projets.html" style="top: 576.5%; left: 25%;">Nos projets</a>
                    <mentions>Mentions légal - O'La Piscines</mentions>
                    <inptitre style="top: 576%; left: 68%;">Par téléphone :</inptitre>
                    <inptitre style="top: 576%; left: 80%;">Mail :</inptitre>
                    <a href='contact.html'><button>NOUS CONTACTER</button></a>
                    <p style="top: 548%; left: 68%;">tél : +33 06 35 40 20 56</p>
                    <p style="top: 576.5%; left: 68%;">+33 06 35 40 20 56</p>
                    <p style="top: 576.5%; left: 80%;">olapiscines@gmail.com</p>
                    <p style="top: 570%; left: 68%;">Nous contacter</p>
                    <p style="top: 570%; left: 50%;">Suivez-nous sur :</p>

                    <div class="icon">
                        <a href="https://www.instagram.com/" style="top: 575.5%; left: 50%;"><image src="img/iconinsta.png" alt="instagram" /></a>
                        <a href="https://www.facebook.com/olapiscines/" style="top: 575.5%; left: 51.5%;"><image src="img/iconfacebook.png" alt="facebook" /></a>
                        <a href="https://fr.linkedin.com/" style="top: 575.5%; left: 53%;"><image src="img/iconlikedin.png" alt="linkedin" /></a>
                    </div>
                </div>
            </body>
    </head>

Ce que je veux

Donc ce que je voudrais c'est que mon site ce réajuste automatiquement quand je passe d'une résolution à une autre (Comme tous les sites qu'ont peut visiter chaque jour en général).

7 réponses

franktronics

Réponse acceptée

En css tu as plusieurs façons de gérer les redimensionnements. Voici quelques méthodes :

1) Utilisation de "Media Queries"


@media (max-width : 200px) {
 /*changements à appliquer lorsque l'écran la taille est < 200px*/
}

Par exemple pour une div>img

<div class="img-container">
  <img src="" alt=""/>
</div>

Tu as par exemple le code css

.img-container{
  width : 300px ; 
}

Maintenant tu souhaites que sur de plus petits écrans l'image prenne non plus 300px mais la largeur totale de l'écran.

@media (max-width : 300px){
  /*ce code s'applique uniquement lorsque la taille est <= 300px*/
  .img-container{
    width : 100 %; 
  }
}

2) Utilisation de "vh" et "vw"

vh et vw signifient respectivement à "viewport height" er "viewport width" et correspondent à la hauteur et largeur de l'écran. Cela veut dire que tu peux définir des élements qui ont à tout moment une hauteur ou une largeur proportionnelle à celle de l'écran. Par exemple

.img-container{
  width : 80vw ; 
}

Cela signifie qu'a tout moment .img-container aura 80 % de la largeur de l'écran : il s'adapte donc parfaitement au changement de tailles d'écrans.
Après tu peux aussi mélanger les deux approches du genre

.img-container{
  width : 80vw ; 
}
@media (max-width : 300px){
  .img-container{
    width : 90 vw; 
  }

3) Utilisation des flex-box

Tu peux utiliser les flex-box pour gérer le positionnement des éléments et faire en sorte que ceux-ci s'adaptent lors du redimensionnement par exemple avec les propriétés flex-wrap ou encore justify-content
Tu peux trouver un tuto ici
Flex-box

Bonus : comment simuler les écrans plus petits😜

-->Sur pratiquement tous les navigateurs tu peux utiliser la console pour réduire la taille de l'écran. Pour cela :
-Clique droit dans la page
-Cilquer sur console
-Cliquer sur l'icône de smartphone en haut de la console
-Vous pouvez maintenant choisir les tailles d'écrans où même un périphérique particulier.

-->Simuler sur un vrai périphérique
Si tu utilises live server ou tout autre "lanceur" tu peux envoyer le résultat de ton code(la page web) directement sur un périphérique réel comme un smartphone ou une tablette ou même un autre ordinateur.

La première étape consiste à lancer ton serveur normalement par exemple en ouvrant live server sur vscode
Puis tu crées un point d'accès entre ta machine et le/les périphériques en question( ton ordi peux être l'émetteur ou le récepteur 😜)
Sur Windows si tu veux le créer à partir de ton ordi tu peux ouvrir l'invite de commande en mode admin et faire
```
netsh wlan set hostednetwork mode=allow ssid=nom_du_wifi key=password

netsh wlan start hostednetwork
```
tu connectes maintenant le périphérique au wifi que tu viens de créer.

-Toujours dans le terminal tu tape ipconfig et tu récupères l'adresse IPV4 de ta machine
tu entre cette adresse dans le navigateur du périphérique en question en ajoutant : port port ici est le numéro du port sur lequel ton projet tourne. Avec live server de vscode le port est très souvent 5500
On aura donc par exemple http://192.168.43.1:5500
Maintenant tu peux tester ton "responsive" sur tous les ecrans que tu veux 😎

Il y a des jours où j'aime vraiment écrire 😅

Gusparo

Salut, je ne suis pas très calé dans ce domaine mais je peut quand même essayé de t'orienter.

En css il y a les "Media queries" qui te permettent d'appliquer du style en fonction d'une certaine résolution:

@media (max-width: 1250px){
    ...
}

Donc avec ça tu peut déjà essayé de manipuler ton code css comme par exemple changer la taille (width) d'un container en le rendant plus petit si la résolution descend en dessous des 700px par exemple:

@media (max-width: 700px){
    .container {
        width: 80%
    }
}

(Tu as aussi la propriété overflow qui peut être utile dans certains cas pour éviter le débordement d'un texte par exemple)

franktronics

Ton problème est-il résolu ??

SoImKiyo

Auteur

Merci pour les réponses je fais essayer sa pour l'instant j'ai passer toutes mes valeurs en vw et vh et à pars 2 ou 3 endroits ou sa "bug" un peu, sa marche à merveille (Enfin les zoom ne zoom pas et quand on rétrécis les pages le texte et au bout d'un moment illisible comme trop petit mais je pensse qu'avec les media queries je peut régler sa)

NdekoCode

Pour les responsive c'est vrai qu'on utilise dans les "Media Queries" pour rendre un site un Site Web responsive ie pour qu'il s'adapte à toutes les largeurs d'ecran comme l'a dit Gusparo et franktronics.
Pour commencer:

Arrange ton code HTML:
Tu utilise certaines Balise HTML qui ne sont plus autorisé dans les standards du web comme la balise <font>, pour stylisé la les texte on le fait en CSS et non avec des balises HTML.
Donc il faut
- mieux structurer ton code HTML en Block et mettre les classes pour bien les viser en HTML
  -Utilise les classe au lieu des Identifiant(ID) Pour eviter trop de profondeur et la specifité des selecteurs cela rendra ton code HTML et CSS facile pour la maintenance.
Pour la stylisation des tailles des texte:
Pour la stylisation du texte utilise les unité rem et em ou vmin et vmax
Utilise les padding pour bien center le texte par rapport a son contenant
Et pour plus d'informations et aller plus loin regarde cette video de Grafikart sur les medias queries ou Suis la totalité de sa formation ICI sur Le CSS car elle est vraiment complete

SoImKiyo

Auteur

Merci pour ta réponse NdekoCode. Bon déjà j'ai remplacer tous les <font> par des <span>, et ensuite je rencontre une problématique. Pour la faire courte, je doit faire un "design" complètement différent pour une version téléphone donc un Media Queries ne pourra pas faire ce que je veux, si j'ai bien compris. Donc la solution serait de faire un peu comme à fait twitch avec "m.twitch.tv", donc de faire un sous-domaine et insérer un autre code html et css plus adapter pour la version téléphone.

Sauf que je ne sais pas si c'est vraiment une bonne idée, même si sa m'a l'air plus adapter pour ce que j'ai besoin de faire donc je voudrais avoir votre avis.
Et à pars sa je ne sais pas pourquoi mais quand je rétrécis ma page, il y a 3, 4 problèmes qui resorte, déjà le premier :

J'ai donc fait à la fin un sorte de footer sauf que le coter gauche de celui-ci et un peu "manger" ce qui laisse un blanc sauf que j'ai bien utiliser vw et vh donc je ne comprend pas.
Second problème toujours avec le footer j'ai 3 icon d'application cliquable et 1 bouton "nous contacter" présent dessus, sauf que quand je rétrécit la page au bout d'un moment il commence à se décaler toujours pour une raison inconnue.
Ensuite j'ai créer un "système" ou on peut faire défiler des commentaires de clients avec des flèches avant et arrière sauf que toujours en rétrécisant trop la page le vide entre les lignes s'espacent et empiète sur les flèches.
Et enfin, j'ai créer d'autres pages et y est insérer le même footer que l'index, sauf que j'ai du les remonter comme la page ne fesait pas la même longueur et cette fois quand on rétrécit la page, c'est comme-ci un élément était rester en bas (ce qui n'est pas le cas) ce qui crée un grand espace de vide

(voici des captures pour mieux comprendre : https://imgur.com/a/LoOQj9Y)

NdekoCode

SoImKiyo je comprends , mais si tu debute regarde d'abord les deux videos dans les liens que j'ai poster dans mon message precedent, ces deux videos de Grafikart explique bien ton probleme et permet de resoudre ton probleme au mieux et avec une meilleur performance,
Ces deux videos sont :
Celui-ci et pour sa formation complete en CSS c'est ICI

Redimension selon la résolution de l'écran

7 réponses

1) Utilisation de "Media Queries"

2) Utilisation de "vh" et "vw"

3) Utilisation des flex-box

Bonus : comment simuler les écrans plus petits😜

Il y a des jours où j'aime vraiment écrire 😅