Problème d'adaptation d'écran

Salut ! je suis entrain de faire un site car je m'ennuyais et je voulais un peu me tester en faisant un site 100% moi même mais j'ai récemment rencontré un problème que je ne sais pas comment régler :/

Mon problème c'est quand on zoom ou dézoom sur le site tout part un peu dans tout les sens et c'est la qu'est le problème normalement le site devrais ressembler a ca :
http://image.prntscr.com/image/bc3d3889adfc4f45a0fe4eb365c19213.png

mais quand je zoom voila a quoi il ressemble :

http://image.prntscr.com/image/6354314c118a4c81b8fbbd54bb8de6dc.png

l'endroit ou il y a les informations du live avec les réseaux sociaux déscende et je ne sais pas commetn réglé ca :/
j'ai utiliser ca comme CSS

aside
{
    position: relative;
    float: right;
    width: 378px;
    background-color: #383837;
    padding: 10px;
    padding-bottom: 1px;
    color: white;
    font-size: 0.9em;
}

Merci d'avance 😀

C'est cool, Enfin un qui explique bien !
Tu veux que ton menu rétrécisse lorsque l'on dé-zoome ou tu préfère que ton menu aille directe au dessous de l'article ?
Menu qui se dirige au dessous de l'article : http://prnt.sc/dzf2sc
Menu qui rétréci :http://prnt.sc/dzf4ek
PS : Ton problème peut se gérer avec les Media Queries

Hello,

Je pense qu'il faut que tu poste ton code HTML pour qu'on puisse analyser tout cela. Je t'informe que moi aussi j'étudie le Responsive Design en ce moment sur ce topic. Si il avait été résolu, peut-être que tu aurais pu obtenir des informations pour t'aider mais comme personne ne répond... 😦
Déjà dans la partie du code concernant "body" tu mets :

body
{
   width: 100% ;
}

Ce qui permet à ton site d'être adapter à n'importe quel écran. Après il te faut une version mobile de ton site, la première ligne de commande à mettre au début de ton code :

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0"/>

Ce qui adaptera ton site pour les mobiles et les utilisateurs ne pourront pas zoomer et dé-zoomer, la lecture sera donc agréable 😀
Mais pour ton problème c'est surement les media queries qu'il faut utiliser 😀

Quelques liens :

http://www.commentcamarche.net/faq/4613-webmaster-adapter-un-site-a-toutes-les-resolutions
http://www.alsacreations.com/article/lire/930-css3-media-queries.html
https://www.grafikart.fr/tutoriels/html-css/menu-hamburger-responsive-512

Salut l'ami,

Alors, c'est loin d'être aussi simple que ce qu'a expliquer Jerem (mais en générale Jerem et moi ne somme pas souvent d'accord, donc c'est normal 😉 ).

Si tu met juste un width 100% ton site ne sera pas adapté a tout les écrans, il prendra juste la largeur de l'écran.
Pour que ton site soit adapté a tout les écrans, il faut utilisé le RWD.

La balise Meta viewport va te permettre de réglé la taille des pixels CSS en fonction de se dont tu a besoin, c'est assez long a expliquer là comme ça, donc je t'invite a utilisé la doc officiel sur MDN. 
Mais la plupart du temps, on utilise ce réglage pour aller au plus simple :

<meta name="viewport" content="width=device-width, user-scalable=no">

là pour ton problème, c'est juste une question d'unité et de calcule mental 😀

Je t'explique :

Pour ton aside, tu a défini un width de 378px plus, un padding de 10px. ce qui veux dire que ton aside va faire  398px (378 du aside et 10 de padding de chaque coté) de large au total.

Au vue de ta capture d'écran, je vais partir du principe que tu a un écran qui fait 1600px de large(widht), soit au moins un 19"

Donc, on fait un calcule simple 1600 - 378 - 10 - 10 = 1202.

A partir de la, je pense que ton contenu principale tu lui a défini environs 1200px(on va dire qu'il n'y a dessus aucun padding ni margin pour simplifié).

Donc, la avec mon calcule, il y a 2px de trop pour que ton contenu entre l'un a coté de l'autre. Si tu passe ton asside a 376, ça va entré !

Voilà voilà... Mais, si tu utilise des largeurs fixe, tu va avoir du mal a faire un site qui adaptable au différents formats d'écrans. 
Le mieux, c'est de travailler avec des % car c'est relative a la taille de leur div parent.

Maintenant, il y a 2 école pour faire du RWD, les float et les flex.

Pour infos, les float son utilisé par bootstrap (que tu retrouve sur twitter car c'est eux qui l'ont créer, mais sur une grosse majorité de site actuel ) ou tu utilise un trucs plus récent, les flex (que tu peu retrouver sur le bon coin, libération et qui est fabriquer par alsacréation qui a ma préférence car bien plus léger, surtout que le temps de chargement des pages va devenir une nécessité cette année car grosse prise en compte par le robot google).


Pour finir, je te propose un reset CSS que j'utilise souvent afin de bien démarré mon css 😀

* { /* Réinitialisation navigateur*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font: 62.5% arial, sans-serif; /* pour normalisé la taille de mes font */
    font-family: 'Titillium Web', sans-serif;
   /* les deux valeurs si dessous aide a soulager un peu les yeux lors du développement */
    color: #323232; /* pas complètement noir */
    background: #ddd; /* pas complètement blanc */
}
img {
    max-width: 100%; /* pour que mes images soit de la taille de leur bloc parents*/
}
h1, h2, h3 {
    color: #fff;
}
h1 {
    font-size: 3.2rem;
}
h2 {
    font-size: 2.5rem;
}
h3 {
    font-size: 1.3rem;
}

body {
    font-size: 1.2rem;
    max-width: 1200px; /* En fonction du besoin, mais j'utilise de plus en plus souvent le 1400px */
    width: 100%;
    margin: auto;
}

Rebonjour, merci d'avoir répondu 😄
Enfaite j'ai un peu essayé ce que vous m'avez dit et pas grand chose ont changé j'ai peut être mal fait cela je ne sais pas trop :/ je n'ai jamais fait ca ^^

pour ceux qui voulait voir mon code html le voila ca pourra peut-être aider à trouver mon problème

<!DOCTYPE html>
<html>
<head>
   <title>Site de test - Sixefyle</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, user-scalable=no">
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
   <header>
      <div id="menu">
         <ul>
            <li><a href="#" class="text-menu">Accueil</a></li>
            <li><a href="#" class="text-menu">Contact</a></li>
         </ul>
      </div>
   </header>
   <body>
      <div id="welcome">
         <img src="<?= $banner ?>" class="banner">
<!--         <h1 class="text-color-4 text-banner">Bienvenue <span class="color-5 padding-l">%pseudo%</span> !</h1>
         <p class="text-color-4 text-banner"></p> -->
      </div>
      <article>
      <div id="live">
         <h2 class="titre"><?php if ($live != null) { echo $titre; } else { echo "<span class='text-color-5'>Stream hors ligne !</span>"; } ?></h2>
         <div id="player">
             <iframe 
                 src="http://player.twitch.tv/?channel={<?= $stream_name ?>}"
                 height="600"
                 width="1070"
                 frameborder="0"
                 scrolling="no"
                 autoplay="false"
                 allowfullscreen="true">
             </iframe>
          </div>
          <div id="chat">
            <iframe class="Chat"
               src="http://www.twitch.tv/<?= $stream_name ?>/chat?popout=" 
               frameborder="0" 
               scrolling="no" 
               height="600" 
               width="335">
            </iframe>
         </div>
      </div>
      </article>
      <aside>
         <div id="profil">
         <?php if($live == null)
         { ?>
            <li class="center profil text-h"><?= $name ?></a></li>
            <li class="text-h center text-color-5">Déconnecté</a></li>
            <li><a href="<?= $url ?>" class="profil text-m">Lien twitch</a></li>
            <p class="no-margin">©2017 FisherTeam - Tout droit réservé </p>
   <?php      } else { ?>
            <li class="center profil text-h"><?= $name ?></li>
            <li class="text-m">Jeux : <?= $jeux ?></li>
            <li class="text-m"><?= $viewers ?> Viewers</li>
            <li class="text-m"><?= $follow ?> Followers</li>
            <li><a href="<?= $url ?>" class="profil text-m">Lien twitch</a></li>
            <p class="no-margin">©2017 FisherTeam - Tout droit réservé </p>
     <?php } ?>
         </div>
         <h2 class="center">Suivez nous !</h2>
         <div id="twitter">
            <a href=""><img class="social" src="image/twitter.png"><span class="text-social">  @FisherTeam</span></a>
         </div>
         <div id="facebook">
            <a href=""><img class="social" src="image/facebook.png"><span class="text-social">  @FisherTeam</span></a>
         </div>
         <div id="youtube">
            <a href=""><img class="social" src="image/youtube.png"><span class="text-social">  @FisherTeam</span></a>
         </div>
      </aside>
   </body>
   <footer>
      
   </footer>
</body>
</html>

et on ne sait jamais mais voila mon code CSS

.color-0 { background: #0c1013; }
.text-color-0 { color: #0c1013;}
.color-1 { background: #485864; }
.text-color-1 { color: #485864; }
.color-2 { background: #929fa6; }
.text-color-2 { color: #929fa6; }
.color-3 { background: #e4dadf; }
.text-color-3 { color: #e4dadf; }
.color-4 { background: white; }
.text-color-4 { color: white; }
.color-5 { background: #bb0a01; }
.text-color-5 { color: #bb0a01; }
.padding-l { padding: 5px; }
.padding-m { padding: 10px; }
.padding-h { padding: 15px; }
.no-padding { padding: 0; }
.no-margin { margin: 0; }
.text-l { font-size: 12px; }
.text-m { font-size: 18px; }
.text-h { font-size: 24px; }
.center { text-align: center; } 
* { /* Réinitialisation navigateur*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font: 62.5% arial, sans-serif; /* pour normalisé la taille de mes font */
    font-family: 'Titillium Web', sans-serif;
   /* les deux valeurs si dessous aide a soulager un peu les yeux lors du développement */
    color: #fff; /* pas complètement noir */
   background: #262626;
}
img {
    max-width: 100%; /* pour que mes images soit de la taille de leur bloc parents*/
}
h1, h2, h3 {
    color: #fff;
}
h1 {
    font-size: 3.2rem;
}
h2 {
    font-size: 2.5rem;
}
h3 {
    font-size: 1.3rem;
}
body {
    font-size: 1.2rem;
    width: 100%;
}
ul li
{
   display : inline-block;
} 
header li a 
{
   text-decoration: none;
   color: white;
}
article
{
   padding: 10px 0 10px 0;
   width: 1500px;
}
article, aside
{
   display: inline-block;
   vertical-align: top;
}
aside
{
    position: relative;
    float: right;
    width: 378.1px;
    background-color: #383837;
    padding: 10px;
    padding-bottom: 1px;
    color: white;
    font-size: 0.9em;
}
aside a
{
   text-decoration: none;
   color: white;
}
aside li
{
   list-style-type: none;
   padding-bottom: 20px; 
}
aside .center
{
   text-align: center;
}
.text-menu
{
   padding: 26px;
   margin-right: 20px;
   transition: 0.2s;
}
.text-menu:hover
{
   background: #bb0a01;
}
.text-menu:active
{
   transition: 0.1s;
   color: #e4dadf;
}
.profil:hover
{
   text-decoration: underline;
}
.social
{
   max-width: 50px;
   vertical-align: -100%;
}
.text-social
{
   font-size: 24px;
}
.titre
{
   color: white;
   min-width: 1400px;
   position: absolute;
   top: 607px;
   padding: 3px;
   background: #323232;
}
.banner
{
   width: 100%;
   position: relative; 
   min-height: 550px;
   margin-top: -50px;
   margin-bottom: -53px;
}
.text-banner
{
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}
#player
{
}
#chat
{
   margin-left: -3px;
}
#player, #chat
{
   display: inline-block;
}
#live
{
   background: #262626;
   border-top: 3px solid #2B2B2B;
   margin: -10px;
   padding-top: 45px;
   padding-left: 80px;
}
#menu
{
   background: #0c1013;
   margin: 0;
   padding: 10px 0 10px 0;
}
#welcome
{
   padding: 50px 0 50px 0;
   text-align: center;
   overflow: hidden;
   height: 443px;
}
#profil
{
   background-image: url("../image/profil.jpg");
   background-repeat: no-repeat;
    background-attachment: fixed; 
   border-bottom: 1px solid #2B2B2B;
   margin: -10px -10px 0 -10px;
   padding: 10px;
}
#twitter
{
   background: #55ACEE;
   border-bottom: 2px solid #2B2B2B;
   border-top: 2px solid #2B2B2B;
   margin: -10px -10px 5px -10px;
   padding: 50px;
   transition: .25s;
}
#twitter:hover
{
   background: #5598E5;
}
#youtube
{
   background: #E02F2F;
   border-bottom: 2px solid #2B2B2B;
   border-top: 2px solid #2B2B2B;
   margin: -10px -10px 5px -10px;
   padding: 50px;
   transition: .25s;
}
#youtube:hover
{
   background: #BF2F2F;
}
#facebook
{
   background: #3B5998;
   border-bottom: 2px solid #2B2B2B;
   border-top: 2px solid #2B2B2B;
   margin: -10px -10px 5px -10px;
   padding: 50px;
   transition: .25s;
}
#facebook:hover
{
   background: #3B4A98;
}

Merci d'avance 😀 en espérant que vous trouviez la solution à mon problème 😋 

Salut !

Ce que tu peux faire, c'est instaurer un système de grid en CSS.

Le principe est simple :
Tu as un container, ce qui contiendra tous les éléments de ta page.
Celui-ci est divisé en "row", des barres de 100% de width.
Les rows sont divisés en "col", c'est largeur prédifinies en %. Les rows ont une largeur (généralement) de 12 cols.

Exemple simple :

<div class="container">
   <div class="row">
      <div class="col-4"></div>
      <div class="col-5"></div>
      <div class="col-3"></div>
   </div>
</div>

On a les trois sortes de div dont j'ai parlé.
Si on additionne les trois "cols", on obtient bien 12 (4+5+3).

Pour le CSS,, petit formule simple pour calculer la largeur d'un col :

(100 / 12) * numCo

Bref, ça te permet d'adapter tes éléments à la taille de l'écran.

Par la suite, tu peux décider de la disposition des éléments avec les média-queries.
Tu peux, par exemple, en dessous de 400px, tous les cols mesurent 100%, comme ça, ils sont "empilés", etc.

Je t'invite à lire cet article pour mieux comprendre : [url=http://www.w3schools.com/css/css_rwd_grid.asp]Css Grille
[/url]
J'espère t'avoir aidé ! 😀

D'accord merci le problème est résolu grace à ca 😄
Merci !

Sinon, y'a le width des iframe qui est en fixe, du coup tu perd tout le coté responsive de l'élément.

Oui je le sais mais j'ai réglé ca aussi 😋 mon site fonctionne bien maintenant merci à vous :)