Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: Personne...
Ce topic a été résolu
Auteur Sujet: Empiler les éléments les uns sous les autres !

TheFlameflo

Messages: 304

Bonjour !
Je commence à créer lentement mais sûrement le design de mon site. 
Cependant, j'ai créé une grille qui fonctionne plutôt bien.
Par contre, ma grille fait quelque chose de bizarrre.
Le premier "row" se positionne à côté de la sidebar et le reste (les autres row) se mettent tout en dessous.
Voici mon premier problème.
Le deuxième problème est un peu plus bizarre.
En effet, je fait une grille de 12 qui font en tout (width + margin) environ 78%.
Le row mesure 78% de width.
Mais, l'intérieur du row, même rempli avec 2 demies ne prend pas toute la place.
Bref, je sais que c'est un peu bizarre, mais vous verrez avec le lien jsfiddle !

Voici mon code HTML :
<!DOCTYPE html>
<html>
<head>
   <title><?= $title ?></title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
   <div id="header-bar">
   </div>
   <div id="sidebar">
        <div class="nav-item">
           <a class="nav-link" href="#">ACCUEIL</a>
      </div>
   </div>
<div class="row">
   <div class="col_6">
      <p>
      Comment ça va ?
      </p>
   </div>
   <div class="col_6">
      <p>
      Salut
      </p>
   </div>
</div>
<div class="row">
   <div class="col_3">
      <p>
      Comment ça va ?
      </p>
   </div>
   <div class="col_3">
      <p>
      Salut
      </p>
   </div>
   <div class="col_3">
      <p>
      Comment ça va ?
      </p>
   </div>
   <div class="col_3">
      <p>
      Salut
      </p>
   </div>
</div>
<div class="row">
   <div class="col_1">
      <p>
      Comment ça va ?
      </p>
   </div>
   <div class="col_1">
      <p>
      Salut
      </p>
   </div>
   <div class="col_1">
      <p>
      Comment ça va ?
      </p>
   </div>
   <div class="col_1">
      <p>
      Salut
      </p>
   </div>
   <div class="col_1">
      <p>
      Comment ça va ?
      </p>
   </div>
   <div class="col_1">
      <p>
      Salut
      </p>
   </div>
   <div class="col_1">
      <p>
      Comment ça va ?
      </p>
   </div>
   <div class="col_1">
      <p>
      Salut
      </p>
   </div>
   <div class="col_1">
      <p>
      Comment ça va ?
      </p>
   </div>
   <div class="col_1">
      <p>
      Salut
      </p>
   </div>
   <div class="col_1">
      <p>
      Comment ça va ?
      </p>
   </div>
   <div class="col_1">
      <p>
      Salut
      </p>
   </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
Et le code CSS :
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
*{
   font-family: "Source Sans Pro", Arial, sans-serif;
}
body
{
   margin: 0;
   padding: 0;
}
#header-bar {
    background-color: #7edea8;
    padding-top: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
    height: 50px;
}
#sidebar {
    width: 20%;
    height: 100vh;
    background-color: #7edea8;
    display: inline-block;
}
    
.nav-link{    
    height: 55px;
    line-height: 55px;
    display: block;
    text-align: center;
    color: black;
    font-size: 32px;
    font-variant: small-caps;
    border-bottom: black solid 1px;
    border-top: black solid 1px;
}
.row{
    display: inline-block;
    width: 78%;
    margin-right: auto;
    margin-left: auto;
}
.row::after{
}
@media all and (max-width: 980px)
{
    p
    {
        color: red;
    }
    
    .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;
    }
    #sidebar
    {
        width: 100%!important;
        height: auto!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
{
    display: inline-block;
}
.col_1
{
    margin-left: 1%;
    margin-right: 1%;
    width: 4.5%;
}
.col_2
{
    margin-left: 1%;
    margin-right: 1%;
    width: 11%;
}
.col_3
{
    margin-left: 1%;
    margin-right: 1%;
    width: 17.5%;
}
.col_4
{
    margin-left: 1%;
    margin-right: 1%;
    width: 24%;
}
.col_5
{
    margin-left: 1%;
    margin-right: 1%;
    width: 30.5%;
}
.col_6
{
    margin-left: 1%;
    margin-right: 1%;
    width: 37%;
}
.col_7
{
    margin-left: 1%;
    margin-right: 1%;
    width: 43.5%;
}
.col_8
{
    margin-left: 1%;
    margin-right: 1%;
    width: 50%;
}
.col_9
{
    margin-left: 1%;
    margin-right: 1%;
    width: 56.5%;
}
.col_10
{
    margin-left: 1%;
    margin-right: 1%;
    width: 63%;
}
.col_11
{
    margin-left: 1%;
    margin-right: 1%;
    width: 69.5%;
}
.col_12
{
    margin-left: 1%;
    margin-right: 1%;
    width: 76%;
}

Je n'ai pas mis de screen, mais un petit lien qui vous permet de tester le site :
https://jsfiddle.net/f30o7ecv/
Merci d'avance !

PS : Pour jsfiddle, pensez à agrandir la petite fenêtre sur la page pour ne pas avoir la version responsive.
Publicité

Florian

Messages: 73

Humm pourquoi tu t'embête alors qu'il y a boostrap pour ça :x ?

TheFlameflo

Messages: 304

Salut !

En fait, je n'ai pas trop les frameworks et les templates, j'aime mieux créer mon propre code, comme ça, je peux bien le comprendre, etc.

Merci quand même ! :/

EDIT : J'ai réussi à régler mon problème ! Sourire 

Aendawan

Messages: 67

Le soucis vient du fait que tu utilises des pourcentages (pour le soucis que ça ne prends pas toute la largeur). Pour le soucis de positionnement, essaye de voir avec un <br clear="both"/>

TheFlameflo

Messages: 304

Salut !
Comme je l'ai dis dans mon POST édité, j'ai réussi à régler le problème.
Pour le premier, j'ai juste mis tout ça dans un container en inline-block.
Pour le deuxième, j'ai révisé les largeurs (j'avais oublié que les % c'est par rapport aux parents) et tout marche très bien.
Aussi, j'ai eu un autre mini problème qui faisait tout buggé, je ne devais pas avoir d'espace entre les divs dans le code HTML (c'est plutôt bizarre), mais ça marche !
Merci quand même pour ta solution, je vais sûrement l'utiliser un jour ! Sourire

Aendawan

Messages: 67

De rien, c'est un plaisir Sourire


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