Quantité de Divs en fonction de la largeur
Résolu/Fermé
HoneyDawn
Messages postés
14
Date d'inscription
jeudi 16 mai 2013
Statut
Membre
Dernière intervention
22 novembre 2016
-
Modifié par HoneyDawn le 6/11/2016 à 06:52
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 - 7 nov. 2016 à 07:23
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 - 7 nov. 2016 à 07:23
A voir également:
- Quantité de Divs en fonction de la largeur
- Fonction si et - Guide
- Rolland souhaite calculer le montant total des ventes de son magasin. le fichier contient, pour chaque produit, la quantité vendue et le prix unitaire. calculez le montant total des ventes. ✓ - Forum Excel
- Dimension tv 43 pouces longueur et largeur ✓ - Forum Ecran
- Durée de fonctionnement processeur ✓ - Forum Windows 10
- Excel renvoyer la valeur d'une cellule en fonction d'une autre - Forum Logiciels
3 réponses
codeurh24
Messages postés
761
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
123
6 nov. 2016 à 08:10
6 nov. 2016 à 08:10
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>
elgazar
Messages postés
5841
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 322
Modifié par elgazar le 6/11/2016 à 08:13
Modifié par elgazar le 6/11/2016 à 08:13
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.
HoneyDawn
Messages postés
14
Date d'inscription
jeudi 16 mai 2013
Statut
Membre
Dernière intervention
22 novembre 2016
7 nov. 2016 à 01:52
7 nov. 2016 à 01:52
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 !
elgazar
Messages postés
5841
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 322
>
HoneyDawn
Messages postés
14
Date d'inscription
jeudi 16 mai 2013
Statut
Membre
Dernière intervention
22 novembre 2016
Modifié par elgazar le 7/11/2016 à 07:24
Modifié par elgazar le 7/11/2016 à 07:24
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
codeurh24
Messages postés
761
Date d'inscription
samedi 29 mars 2014
Statut
Membre
Dernière intervention
8 septembre 2018
123
Modifié par codeurh24 le 6/11/2016 à 08:28
Modifié par codeurh24 le 6/11/2016 à 08:28
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>
HoneyDawn
Messages postés
14
Date d'inscription
jeudi 16 mai 2013
Statut
Membre
Dernière intervention
22 novembre 2016
7 nov. 2016 à 01:53
7 nov. 2016 à 01:53
Merci à toi, pareil que pour la réponse d'avant je crois que c'est ce que je cherchais.
7 nov. 2016 à 01:42
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.