Bonjour, j'ai un soucis avec un tableau que j'ai fait.
J'ai créé un tableau avec des div (un tableau de 5 colonnes).
Mais il ne s'adapte pas automatiquement aux divers écrans.
Je recherche un code css qui pourrait me permettre de faire ceci, auriez-vous un code css qui me permettrait de faire ceci. Merci par avance.
Christian
J'ai créé un tableau avec des div (un tableau de 5 colonnes).
Mais il ne s'adapte pas automatiquement aux divers écrans.
Je recherche un code css qui pourrait me permettre de faire ceci, auriez-vous un code css qui me permettrait de faire ceci. Merci par avance.
Christian
Bonjour,
Pourrait-on avoir un lien vers le site ?
Pourrait-on avoir un lien vers le site ?
Bonjour, c'est un site en production, je n'ai pas autorisation de communiquer le lien du site pour l'instant.
Je peux vous fournir le code css :
/* Blocs-easyblog - 5 blocs DIV sous forme d'un tableau*/
.blocs-easyblog {
font-size:1.8em;
text-align: center;
width:20%;
float:left;
padding:15px;
}
@media screen and (max-width: 380px) {
.blocs-easyblog {
width:100%;
font-size:1em;
}
}
@media screen and (max-width: 680px) {
.blocs-easyblog {
width:100%;
font-size:1em;
}
}
Je peux vous fournir le code css :
/* Blocs-easyblog - 5 blocs DIV sous forme d'un tableau*/
.blocs-easyblog {
font-size:1.8em;
text-align: center;
width:20%;
float:left;
padding:15px;
}
@media screen and (max-width: 380px) {
.blocs-easyblog {
width:100%;
font-size:1em;
}
}
@media screen and (max-width: 680px) {
.blocs-easyblog {
width:100%;
font-size:1em;
}
}
Difficile de pouvoir répondra sans avoir un lien vers le site, mais je comprends que cela doive rester privé.
Pouvez-vous, s'il vous plait déposer votre code sur : https://codepen.io/ ?
Merci !
Pouvez-vous, s'il vous plait déposer votre code sur : https://codepen.io/ ?
Merci !
Bonjour,
cela sert à ce que nous puissions interpreter votre code (HTML et CSS) sans avoir accès à votre site web
Il suffit d'importer le CSS et le HTML généré par votre page.
cela sert à ce que nous puissions interpreter votre code (HTML et CSS) sans avoir accès à votre site web
Il suffit d'importer le CSS et le HTML généré par votre page.
Bonjour,
En bas à droite de l'écran il y a un bouton Share qui permet de copier le lien. Il faut simplement coller ce lien ici afin que nous puissions regarder.
En bas à droite de l'écran il y a un bouton Share qui permet de copier le lien. Il faut simplement coller ce lien ici afin que nous puissions regarder.
Bonjour,
pour moi le seul problème de votre code en format desktop est que le modèle de boite compte le padding dans le calcul de la taille de chaque div.
Du coup, 20% de la place disponible plus 15px de padding à gauche et 15 px de padding à droite font 20% + 30px.
Du coup, cela oblige la dernière boite a passer à la ligne !
Pour contourner cela, deux solutions.
- Soit calculer la taille des boites :
- Soit changer le modèle de boite CSS avec le code suivant :
pour moi le seul problème de votre code en format desktop est que le modèle de boite compte le padding dans le calcul de la taille de chaque div.
Du coup, 20% de la place disponible plus 15px de padding à gauche et 15 px de padding à droite font 20% + 30px.
Du coup, cela oblige la dernière boite a passer à la ligne !
Pour contourner cela, deux solutions.
- Soit calculer la taille des boites :
.blocs-easyblog {
font-size:1.8em;
text-align: center;
width:calc(20% - 30px);
float:left;
padding:15px;
}
- Soit changer le modèle de boite CSS avec le code suivant :
.blocs-easyblog {
font-size:1.8em;
text-align: center;
width:20%;
float:left;
padding:15px;
box-sizing: border-box;
}
Bonjour, désolé pour le délai, j'avais pris quelques jours de congés.
J'ai utilisé votre deuxième code, mais il y a un soucis sur le dernier bloc (les catégories), le bloc n'est pas comme les autres, comment faire pour que le dernier bloc soit identique aux autres ?
Je vous joins le lien avec votre code.
Merci par avance de votre aide. Christian
https://codepen.io/kinouplay/pen/XWgOxdX
J'ai utilisé votre deuxième code, mais il y a un soucis sur le dernier bloc (les catégories), le bloc n'est pas comme les autres, comment faire pour que le dernier bloc soit identique aux autres ?
Je vous joins le lien avec votre code.
Merci par avance de votre aide. Christian
https://codepen.io/kinouplay/pen/XWgOxdX
Bonjour,
je ne comprends pas bien quand vous dites "le bloc n'est pas comme les autres".
Votre liste est responsive, donc la taille varie en fonction de l'écran, êtes vous en vue desktop, mobile ou tablette...
N'hésitez à être très précis dans vos questions, à mettre des captures d'écran pour que je puisse vous aider efficacement.
je ne comprends pas bien quand vous dites "le bloc n'est pas comme les autres".
Votre liste est responsive, donc la taille varie en fonction de l'écran, êtes vous en vue desktop, mobile ou tablette...
N'hésitez à être très précis dans vos questions, à mettre des captures d'écran pour que je puisse vous aider efficacement.
Oui c'est normal, le texte est plus court que dans les autres blocs, donc ça ne reviens pas a la ligne. Les lois de la physique 😀.
En mettant une min-height sur les blocs vous aurez la même hauteur. Mais le texte sera en haut du bloc.
L'autre solution est de passer en modèle flexbox. Mais comme je vois que vous n'êtes pas encore calé en CSS, ça vous obligera à tout refaire...
En mettant une min-height sur les blocs vous aurez la même hauteur. Mais le texte sera en haut du bloc.
L'autre solution est de passer en modèle flexbox. Mais comme je vois que vous n'êtes pas encore calé en CSS, ça vous obligera à tout refaire...
- Page :
- 1
Cette discussion ne contient encore aucune réponse.
Soyez le premier à y répondre !
Soyez le premier à y répondre !
