Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: Alfiory
Auteur Sujet: Adapter le contenue à la dimension de la fenêtre

DylanLFT

Messages: 1

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 Clin d'oeil 
Publicité

codesonline

Messages: 15

tu dois utiliser les medias queries dans ton css Clin d'oeil

Clouder

Messages: 82

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

Alfiory

Messages: 15

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. ^^

[email protected] 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,
Alfiory;

TheOldNoob

Messages: 593

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


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 !

Alfiory

Messages: 15

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 Clin d'oeil

Cordialement Alfiory;

TheFlameflo

Messages: 303

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 ! Sourire

TheOldNoob

Messages: 593

J'avais pas regardre ton image Sourire
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.


Veuillez vous connecter ou créer un compte pour poster une réponse