Adapter le contenue à la dimension de la fenêtre

DylanLFT Le 4 avril 2016 à 13:44 (Édité le 25 janvier 2019 à 17:50)

Bonjour,

J'essaye depuis des heures à faire en sorte que peux importe la taille de la fenêtre du navigateur internet, le contenue s'adapte automatiquement.. Cependant je n'y arrive absolument pas.. Quelqu'un aurait - il la possibilité de m'aider s’il vous plaît ?

J'aimerais aussi, intégrer dans mon rectangle à gauche le formulaire d'inscription.
Voici l'exemple PHOTOSHOP réalisé.

En ce moment je suis comme ça sur ma Page Internet

Voici mon code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Featy'S - Ensemble on se soutien </title>
    <link rel="stylesheet" href="style.css">
</head>
    
    <body>
      
        <header>
            <div class="banner"></div>
        </header>
        
        
        
            <nav>
                
                <div class="img_left">
                    <div class="img_left2">
                        <img src="logo2.png" />
                    </div>
                </div>
                
                <div class="ins1">
                    <div class="ins"></div>
                </div>
                
            </nav>
        
        
        <footer>
        
        </footer>
        
        
    
    </body>
</html>

body{
    margin: 0px;
    padding: 0px;
}
*{box-sizing: border-box;}
/* BANNIERE  */
.banner{
    display: block;
    background-color: #34495e;
    height: 100px;
    width: 100%;
}
/* BANNIERE  */
/* INSCRIPTION BLOC */
.ins{
    display: block;
    background-color: #34495e;
    height: 700px;
    width: 600px;
}
.ins1{
    margin-top: 65px;
    padding-right: 50px;
    float: right;
}
/* INSCRIPTION BLOC */
/* IMAGE GAUCHE  */
img{ 
    display: block;
    float: left;
    width: 900px;
    padding-top: 9px;
    position: absolute;
    margin-left: 100px;
}
.img_left{
    width: 2000px;
    margin: 0 auto; 
    
}
.img_left2{
    width: 35%;
    float: left;
}
/* IMAGE GAUCHE  */
@media only screen and (max-width: 1000px){
    .img_left{
        width: auto;
        float: none;
    }
    img{
        margin-left: auto;
        width: 450px;
        position: relative;
    }
}

Merci d'avance ! Je suis débutant 😉

codesonline Le 4 avril 2016 à 23:13

tu dois utiliser les medias queries dans ton css 😉

Clouder Le 7 avril 2016 à 14:45

Soit tu utilises les @media dans ton css pour redimensionner tes fenêtres sinon utilise des pourcentages 😀

Profil introuvable Le 28 avril 2016 à 10:48

Salut Dylan comme l'ont très bien dit "codesonline" et "Clouder" tu vas devoir utiliser des medias queries. Je vais te donner un exemple, mais tu peux aussi utiliser un framework css responsive qui t'évite de coder ce truc plus ou moins chiant ^^ il y en a des tonnes et des tonnes plus ou moins connu, comme bootstrap mais lui est assez lourd et propose aussi du design, mais si tu veux que le responsive tu en trouveras, je vais t'en passer un. ^^

 @media only screen and (max-width: 767px) { //Donc si l'écran est moins grand que 767px
    .maDiv { //maDiv fera
        height: 200px; //200px de haut
        width: 150px;  //Et 150px de largeur
     }
}

Sinon si tu ne veux pas t'emmerder ^^ : http://www.responsivegridsystem.com/ (je l'ai jamais testé, mais il a l'air pas mal ^^ )

Voilà, Voilà...

Cordialement

TheOldNoob Le 28 avril 2016 à 11:56

Alors, effectivement c'est du responsive. que tu cherche a faire, et c'est bien 😉

de mémoire tu fait une <div class="wrapper"> dans ton <body> :

<body>
   <div class="wrapper>
      Ton contenu
   </div>
<body>

Dans ton style.css tu fait :

.wrapper {
    width: 100%; // qui prendra 100% de ta page
    max-width: 1400px; // avec un maximum de 1400pixel
    margin: auto; 
    text-align: center; 
}

Si je dis de la merde, n'hésitez pas !

Profil introuvable Le 28 avril 2016 à 12:07

Non tu ne dis pas de la merde mais je crois que le pourcentage n'est pas superbe je pense qu'il vaut mieux utiliser des medias queries 😉

Cordialement

TheFlameflo Le 28 avril 2016 à 13:04

Salut !
J'ai, il y a quelques jours, développé une petite grille bien sympa en pourcentages :

.row{
    display: block;
    width: 100%;
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
}
.container{
    display: inline-block;
    width: 78%;
    margin-top: 10px;
    margin-left: 1%;
    margin-right: 1%;
    float: right;
    background-color: white;
}
.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11,
.col_12
{
    display: inline-block;
    min-height: 10px;
    padding: 10px;
}
.col_1
{
    margin-left: 1%;
    margin-right: 1%;
    width: 6.33%;
}
.col_2
{
    margin-left: 1%;
    margin-right: 1%;
    width: 14.66%;
}
.col_3{
    width: 23%;
    margin-left: 1%;
    margin-right: 1%;
}
.col_4
{
    margin-left: 1%;
    margin-right: 1%;
    width: 31.33%;
}
.col_5
{
    margin-left: 1%;
    margin-right: 1%;
    width: 39.66%;
}
.col_6
{
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
}
.col_7 {
    margin-left: 1%;
    margin-right: 1%;
    width: 56.33%;
}
.col_8
{
    margin-left: 1%;
    margin-right: 1%;
    width: 64.66%;
}
.col_9
{
    margin-left: 1%;
    margin-right: 1%;
    width: 73%;
}
.col_10
{
    margin-left: 1%;
    margin-right: 1%;
    width: 81.33%;
}
.col_11
{
    margin-left: 1%;
    margin-right: 1%;
    width: 89.66%;
}
.col_12
{
    margin-left: 1%;
    margin-right: 1%;
    width: 98%;
}
.input
{
    padding: 5px;
    width: 100%;
    margin-bottom: 10px;
}
/* Responsive design */
@media all and (max-width: 980px)
{
    .container{
        width: 100%!important;
        margin: 0!important;
    }
    
    .col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11,
    .col_12
    {
        width: 100%!important;
        display: block!important;
        margin: 0!important;
    }
}

Pour faire simple, il faut que tu aies un container de la width que tu veux, une div row pour chaque morceau de grille sur une ligne et les éléments qui s'adaptent si tu rétrécis l'écran.
J'ai aussi utilisé les media queries pour adapter quand c'est trop petit !
Voici le code HTML :

<div class="container">
   <div class="row">
      <div class="col_4"></div><!--
      --><div class="col_8"></div>
   </div>
</div>

Une autre chose importante, c'est qu'il faut mettre des commentaires après la fin d'une div jusqu'au début de l'autre, sinon, ça ne marche pas (décalage).
Il faut aussi que si tu additionnes les deux cols (4 et 8, ici), ça donne 12 ou moins.

J'espère t'avoir aidé !
Bonne chance ! 😀

TheOldNoob Le 28 avril 2016 à 14:58

J'avais pas regardre ton image 😀
Pour faire hyper simple, je te conseil d'utiliser bootstrap, qui te permettra d'avoir une barre de navigation déjà faites dans laquel tu n'aura qu'a changer un peu le CSS pour adapter a ton style.

En plus de ça, bootstrap permet aussi la création de colonne responsive très simplement.

Échange

Articles / Vidéos

Ressources