Empiler les éléments les uns sous les autres !
TheFlameflo Le 23 avril 2016 à 00:10 (Édité le 25 janvier 2019 à 17:50)
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>
@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%;
}
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.
TheFlameflo Le 23 avril 2016 à 13:31 (Édité le 23 avril 2016 à 14:47)
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 ! 😀
Aendawan Le 24 avril 2016 à 11:32
TheFlameflo Le 24 avril 2016 à 13:05
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 ! 😀
