Quantité de Divs en fonction de la largeur
Résolu
HoneyDawn
Messages postés
14
Date d'inscription
Statut
Membre
Dernière intervention
-
elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention -
elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Quantité de Divs en fonction de la largeur
- Fonction si et - Guide
- Fonction miroir - Guide
- Fonction moyenne excel - Guide
- Excel remplir automatiquement une cellule en fonction d'une autre ✓ - Forum Excel
- Notice de fonctionnement - Guide
3 réponses
Bonjour.
Dans une résolution 1400x1000
le width c'est toujours width x height
ce qui fait que width 1400 pixel (px)
qui correspond a x en partant du coin en haut a gauche.
Pour le reste je ne suis pas sûr d'avoir compris.
Es ce que ce code correspond a ce que tu demande ?
Dans une résolution 1400x1000
le width c'est toujours width x height
ce qui fait que width 1400 pixel (px)
qui correspond a x en partant du coin en haut a gauche.
Pour le reste je ne suis pas sûr d'avoir compris.
Es ce que ce code correspond a ce que tu demande ?
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
background-color: #CCC;
}
.cell {
display: table-cell;
border: 1px solid #000;
padding:5px;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">div 1</div>
<div class="cell">div 2</div>
<div class="cell">div 3</div>
<div class="cell">div 4</div>
<div class="cell">div 5</div>
</div>
</div>
</body>
</html>
Bonjour
c'est effectivement possible avec les media queries
en gros, il faut simplement créer une règle css supplémentaire qui dit que si l'écran est égal ou inférieur a xxx pixels, visibility:hidden sera appliqué aux deux dernières div. par exemple dans le code suivant , si l'écran a une largeur égal ou inférieur a 1024 px, la div 4 sera cachée
cela dit, si tu caches tes div pour les petites résolutions, c'est que leur contenu n'est pas très important donc du coup est ce bien utile de les mettre ?
Avec un ordinateur, on peut faire plus rapidement des choses qu’on n’aurait pas eu besoin de faire sans ordinateur.
c'est effectivement possible avec les media queries
en gros, il faut simplement créer une règle css supplémentaire qui dit que si l'écran est égal ou inférieur a xxx pixels, visibility:hidden sera appliqué aux deux dernières div. par exemple dans le code suivant , si l'écran a une largeur égal ou inférieur a 1024 px, la div 4 sera cachée
@media screen and (max-width: 1024 px) {
#div4 {
visibility:hidden;
}
}
cela dit, si tu caches tes div pour les petites résolutions, c'est que leur contenu n'est pas très important donc du coup est ce bien utile de les mettre ?
Avec un ordinateur, on peut faire plus rapidement des choses qu’on n’aurait pas eu besoin de faire sans ordinateur.
En effet, ça me semble tout à fait correcte !
Je vais tester ça plus amplement.
En fait, n'ayant pas touché à tout ça depuis longtemps, je crois que j'ai laissé passer les media querries. J'étais même pas au courant que ça existait.
C'est la solution propre et concise que je cherchais. Merci à toi !
Quand a ce que je veux faire me des mes DIVs c'est une autres histoire, si je demande à les cacher si besoin, c'est que j'ai de bonnes raisons qui n'induisent pas forcément leur suppression. Sinon je les aurai supprimé tout bêtement non.
(C'est l'aspect "pourquoi tu fais ça ?" de CCM qui m'embête toujours je dois dire. Alors que je demande une solution, et pas, si je dois le faire ou non.)
Cela dit merci bien, je pense que c'est ok.
Je fermerai si c'est bien valide !
Je vais tester ça plus amplement.
En fait, n'ayant pas touché à tout ça depuis longtemps, je crois que j'ai laissé passer les media querries. J'étais même pas au courant que ça existait.
C'est la solution propre et concise que je cherchais. Merci à toi !
Quand a ce que je veux faire me des mes DIVs c'est une autres histoire, si je demande à les cacher si besoin, c'est que j'ai de bonnes raisons qui n'induisent pas forcément leur suppression. Sinon je les aurai supprimé tout bêtement non.
(C'est l'aspect "pourquoi tu fais ça ?" de CCM qui m'embête toujours je dois dire. Alors que je demande une solution, et pas, si je dois le faire ou non.)
Cela dit merci bien, je pense que c'est ok.
Je fermerai si c'est bien valide !
si je posais la question de savoir " pourquoi tu fais ca", ce n'est pas pour critiquer .mais pour être certain de bien comprendre le problème. car parfois les débutants ont du mal a poser correctement leur question quand ils ignorent toutes les possibilités.
par exemple avec ton problème, il est possible avec les queries de transformer les colonnes en lignes (ce qui évite de cacher les deux dernières), de les glisser deux colonnes sous les trois autres ou de faire un mix (3 colonnes et deux lignes) mais un débutant ne demandera pas cela pour la simple raison qu'il ignore ces possibilités
maintenant si le fait que j'essaye de te donner le meilleur conseil possible en extrapolant ta question te gêne tant que cela, j'éviterais de répondre à tes autres questions
par exemple avec ton problème, il est possible avec les queries de transformer les colonnes en lignes (ce qui évite de cacher les deux dernières), de les glisser deux colonnes sous les trois autres ou de faire un mix (3 colonnes et deux lignes) mais un débutant ne demandera pas cela pour la simple raison qu'il ignore ces possibilités
maintenant si le fait que j'essaye de te donner le meilleur conseil possible en extrapolant ta question te gêne tant que cela, j'éviterais de répondre à tes autres questions
On peux aussi rajouter du media query comme dit elgazar.
Par exemple pour cacher les div sur les cotés a une certaine résolution mais dans ce que là il existe déjà un framework css qui est très connu, s'est bootstrap https://getbootstrap.com/
Par exemple pour cacher les div sur les cotés a une certaine résolution mais dans ce que là il existe déjà un framework css qui est très connu, s'est bootstrap https://getbootstrap.com/
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
background-color: #CCC;
}
.cell {
display: table-cell;
border: 1px solid #000;
padding:5px;
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.hidden {
display:none;
clear:both;
}
}
@media screen and (min-width: 1200px) and (max-width: 1920px) {
.hidden {
display: table-cell;
}
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell hidden">div 1</div>
<div class="cell">div 2</div>
<div class="cell">div 3</div>
<div class="cell">div 4</div>
<div class="cell hidden">div 5</div>
</div>
</div>
</body>
</html>
Cela dit, oui, je me suis planté, j'ai échangé la largeur et la hauteur dans mon exemple, c'était bien 1400px de width et pas 1000. Ce qui fait rentrer 4 DIVs au lieu de 5 cela dit ça change pas grand chose.