Bonjour,
j'expérimente la grille CSS responsive sur 12 colonnes avec un width de départ de 960px. Au niveau affichage "ça fonctionne", tant que je ne mets pas de couleur de fond !
Car dès que j'ai mis une couleur de fond (fond de feuille) mais aussi couleur de fond de colonne, je m'aperçois que si une colonne contient plus de texte que l'autre, et bien la colonne d'à côté ne va pas jusqu'en bas, pour "s'aligner" sur la colonne d'à côté..il faudrait des colonnes égales en hauteur, même si celle d'à côté contient moins de texte...je présume qu'il faut un height quelque part ?
houuuuu ! compliqué à expliquer..alors svp, jetez un oeil ici vous allez tout comprendre [(http://essai.lescheminsverscompostelle.com/]
merci pour votre aide !
Gérard
voici mon code CSS
/* grille CSS responsive */
*{ box-sizing:border-box;}
#conteneur-menu { /* ne sert pas pour l'instant */
background: gray;
height:40px;
position: relative;
}
body {
background-color: #d8d9a6; /* fond de page vert clair */
}
/* règles CSS pour les grands écrans ici */
.row {
display: block;
width: 960 px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.row > div {
display: block;
float: left;
padding-left: 2%; /*marge à l'intérieur de la colonne, pour que le texte ne touche pas le bord */
padding-right: 2%; /*marge à l'intérieur de la colonne, pour que le texte ne touche pas le bord */
/*margin: 5px auto;*/
background-color: aqua;
border: 1px solid black;
}
.col-1{ width : 80px; }
.col-2{ width : 160px; }
.col-3{ width : 240px; }
.col-4{ width : 320px; }
.col-5{ width : 400px; }
.col-6{ width : 480px; }
.col-7{ width : 560px; }
.col-8{ width : 640px; }
.col-9{ width : 720px; }
.col-10{ width : 800px; }
.col-11{ width : 880px; }
.col-12{ width : 960px; }
/* règles CSS pour les tablettes ici */
@media only screen and (min-width:500px) and (max-width:980px)
{
.row {
width : 100%;
}
.row > div {
/*margin: 0 0.5%; */
background-color: #e3e4c1;
border: 1px solid black;
}
.col-1 { width : 8.33%; }
.col-2 { width : 16.67%; }
.col-3 { width : 25%; }
.col-4 { width : 33.3%; }
.col-5 { width : 41.67%; }
.col-6 { width : 50%; }
.col-7 { width : 58.33%; }
.col-8 { width : 66.67%; }
.col-9 { width : 75%; }
.col-10 { width : 83.3%; }
.col-11 { width : 91.67%; }
.col-12 { width : 100%; }
}
/* règles CSS pour les mobiles ici */
@media only screen and (max-width:500px)
{
.row {
width: 100%;
background-color: green;
div {
}
.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 : 98%;
background-color: green;
float : none;
}
et le code HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre page</title>
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="site-container">
<div class="row" >
<div class="col-12">
menu ici*****************************************************************
</div>
<div class="col-6">6 colonnes</div>
<div class="col-6">6 colonnes</div>
<div class="col-4">Col4-1</div>
<div class="col-4">Col4-2</div>
<div class="col-4">Col4-3</div>
<div class="col-4">
4 colonnes<h2>Quel sac à dos ? </h2>
<p><strong>Notre avis :</strong><br />
Un Deuter 32 litres est largement suffisant (si vous ne prenez pas de tente).
Attention à ne pas choisir un sac destiné aux seules activités d'alpinisme...
même si l'on peut utiliser ce type de sac, autant choisir un sac pensé aussi pour la randonnée... </p>
Vous le constaterez au fils des pages de ce site, le poids est un peu l'obsession du randonneur.
Si vous n'en prenez pas conscience dès à présent, alors vous en prendrez forcément conscience sur le Chemin,
car sur de telles distances, 500 g de trop c'est déjà énorme...</p>
</div>
<div class="col-8" >8 colonnes xxxxxxx
<p> xxxxxxx essai texte xxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
10 réponses
Salut,
Si tu mets un height: 100% sur tes colonnes et que tu utilises des rows, ça devrait donner le resultat que tu attends.
Je te conseille d'utiliser le système de grille bootstrap. Et de rajouter ton propre css dessus.
Un exemple de grille de base bootstrap :
<div class="container">
<div class="row"><!--la classe row indique une nouvelle ligne horizontale -->
<div class="col-md-12"><!--on utilise "md" pour dire que c'est sur un ecran moyen-->
Menu
</div>
</div>
<div class="row">
<div class="col-md-6">
diviser en deux
</div>
<div class="col-md-6">
diviser en deux
</div>
</div>
</div>Salut, ben je ne sais pas si j'ai bien compris ce que tu préconises ? j'ai ajouté ça, voir ci-dessous (c'est à dire height : 100% à chaque ligne du CSS, ça ne change rien. J'ai essayé une valeur fixe genre height : 100px, donc là, elles sont bien toutes de hauteur égale, mais le texte qui se trouve dans la première colonne dépasse vers le bas puisqu'il fait plus de 100 px. Dois-je mettre une autre instruction quelque part ? dois-je mettre une instruction particulière dans le fichier HTML ? genre l'instruction table ? puisque au final, je voudrai des cases dans lesquelles il y a du texte (et /ou images) et que "canevas genre tableau soit responsive. Je crosi que mélange un peu tout LOL
Concernant la réponse de "Le futuriste", ça ressemble au code que j'ai fait. reste à savoir les propriétés qui sont dans "container" ?
merci
/* Vos règles CSS pour les grands écrans ici */
.row {
display: block;
width: 960 px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.row > div {
display: block;
float: left;
padding-left: 2%; /*marge à l'intérieur de la colonne, pour que le texte ne touche pas le bord */
padding-right: 2%; /*marge à l'intérieur de la colonne, pour que le texte ne touche pas le bord */
/*margin: 5px auto;*/
background-color: aqua;
border: 1px solid black;
}
.col-1{ width : 80px; height : 100%;}
.col-2{ width : 160px; height : 100%;}
.col-3{ width : 240px; height : 100%;}
.col-4{ width : 320px; height : 100%;}
.col-5{ width : 400px; height : 100%;}
.col-6{ width : 480px; height : 100%;}
.col-7{ width : 560px; height : 100%;}
.col-8{ width : 640px; height : 100%;}
.col-9{ width : 720px; height : 100%;}
.col-10{ width : 800px; height : 100%;}
.col-11{ width : 880px; height : 100%;}
.col-12{ width : 960px; height : 100%;}Si tu souhaites utiliser ta propre grille, inspire toi des css des frameworks tels que Bootstrap ou Foundation :)
@Le_Futuriste importer bootstrap juste pour la grille ? Très mauvaise idée.
Utiliser foundation et importer que la grille avec leur scss oui, mais tout importer le css de bootstrap non...
@Emix bah moi perso c'est ça que je fait car j'utilise bootstrap avec un theme différant dessus que je créer pour chaque site
bonjour et merci pour votre implication. Mais l'on s'éloigne de la question...bon, bien sûr. Au final, je suis passé par Boostrap, j'ai utilisé leur grille, et ça fonctionne. Les lignes ont bien la même hauteur, quelque soit le contenu. En fait, chaque ligne prend la hauteur du texte le plus grand qui se trouve dans telle ou telle colonne. Donc ça fonctionne, mais je n'ai donc pas compris pourquoi...le CSS bootstrap est bien trop complet pour que je puisse déterminer avec précision quelle est l'instruction (ou les instructions) qui ont fait que la hauteur de ligne a la même valeur quelque soit la colonne.
J'aurai aimé y arriver avec mon propre code CSS...
merci quand même.
Gérard
Ce que tu peux faire Lavenir, tu peux ecraser les styles bootstrap en créant un fichier bootstrap-theme.css. C'est l'avenir !
@Le_Futuriste je ne vois pas à quoi ça sert, mis à part surcharger ses styles pour rien.
@Lavenir si tu souhaites avoir beaucoup plus le contrôle sur ce qui se passe sans avoir à réinventer la roue, je te propose d'utiliser foundation SI tu utilises SCSS, il y a un tutoriel disponible sur le site pour te faire une idée ;)