Bonjour, je suis débutant en codage et je veux faire une page responsive qui présente des éléments visuels avec du texte en dessous. Ces éléments visuels doivent être aligné les uns a coté des autres avec leurs texte en dessous ce qui donnera l'impression d'avoir une ligne d'éléments visuel et une ligne de bloc texte.
Raison pour laquelle je ne peut pas mettre tout simplement une ligne d'éléments visuels et une ligne de blocs texte ?
Parce qu’en responsive les blocs texte n’apparaîtraient pas sous leurs élément visuels respectif.
J'ai commencé par utiliser le fonctionnement de grille boostrap en mettant tout dans des div.
Prenons par exemple 4 éléments visuels.
De manière a avoir 4 élément sur une ligne sur pc de bureau écran 16/9eme, 2 éléments sur une ligne sur tablette, un élément par ligne sur smartphone,
Maintenant comment faire pour rajouter des blocs texte [ titre H2/sous-titre H3/texte paragraphe ] centrés sous chaque élément ? (et donc a l'intérieur de chaque div)
Les éléments sont des vignettes produit, la page de développement est une page statique sous prestashop utilisé en tant que catégorie de produit, les textes sont les descriptifs des produits.
Les connaissance a avoir peuvent être basique mais je n'ai que des notions de developpement industriel en C et C++ et n'ai aucune connaissance en html et assez peu en CSS.
Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Bonjour et merci pour ces infos ça a l'air puissant le "card". Au passage je me demande est ce que les vignettes produits de prestashop sont des "card" boostrap ?
Au sujet des textes sous vignette si je demande tout ça en faite c'est pour la mise en forme du code qui contiendra les textes. j'ai bien rempli du texte a l’intérieur des div mais a la vue de l'inspection du navigateur ça me parait louche.
Il faut mettre des balises <p> autour et définir une classe c'est ça ? y a t il un type de balise conseillé ? Quelle est la conformité de base ?
Est ce que vous auriez des bons tuyaux pour faire un truc efficace svp ?
Au sujet des textes sous vignette si je demande tout ça en faite c'est pour la mise en forme du code qui contiendra les textes. j'ai bien rempli du texte a l’intérieur des div mais a la vue de l'inspection du navigateur ça me parait louche.
Il faut mettre des balises <p> autour et définir une classe c'est ça ? y a t il un type de balise conseillé ? Quelle est la conformité de base ?
*
Sur ce sujet tout dépend de quoi tu parle si c'est de mon exemple basic du haut, tu as les h1 h2 p et enfin span qui est la soeur de div pour le contenu phrasé.
Si tu parle de cards sous bootstrap tu a des outil pour ton texte que tu peut utiliser :
je sais pas encore si je vais englober le tout dans une "card" car les vignette produit on déjà leur propre emballage codé, je les introduit dans mon script en les appelant avec du "shortcode", ma question portait sur le code a créer pour englober le texte:
A priori je crée une div dans la div j y met mon texte et je le style, et c'est tout ce qu'il faut faire ?
Edit: Je suis aller voir pour la balise span apparemment c'est une balise plus légère que la div et ça sert a priori plutôt pour la mise en forme du texte. Du coup il vaut mieux utilisé du span nativement dans le code source de la page cms ou il vaut mieux utiliser du css en surcharge pour stylé les textes ? Qu'est ce qui est préférable du point de vue du serveur et des moteurs de recherche ?
Bonjour, pour ce qui est de centrer le texte avec Bootstrap tu as la class "text-center", que tu peux rajouter et cela va te centrer ton texte, je t'ai fais un pen :
A quelle source apprend on l'expression "text-center bord" ? Parce que j'imagine qu'il doit y avoir des éléments similaire aligné a gauche ou a droite, autant que j'en prenne connaissance et puis j'aimerais bien apprendre.
Désormais je rencontre un problème de boostrap, lorsque j'ouvre la console cela réduit la largeur de l'écran et les 4 éléments visuels restent sur la même ligne, se superposent et débordent sur les bords de la page, et ce, jusqu'a min-width 992px
Quand on descend d'un pixel, à 991px , là ça devient comme il faut avec 2 items par ligne.
Ce qui fait que sur tablette hd c'est tout pas beau.
Pourtant j'ai mis "col-md-6 col-lg-3" car j'ai pu lire sur internet que
col-xs <768px / col-sm >=768px / col-md >=992px / col-lg >=1200px (j'avais lu ça chez supinfo)
j'en ai déduis que col-md est l'attribut pour les largeurs comprises entre 992px et 1200px, donc à 1024px de large un élément visuel devrait occuper 6/12 de la largeur et non 3/12. Comment cela se fait il que ça ne marche pas svp ? Comment passer à 3 élément visuel par ligne pour une largeur de 1024px en conservant 4 par ligne sur écran large ?
Tu trouvera tout ton bonheur sur la Documentation Boostrap, et pour ce qui est desBreakPoints cherche du coté des media queries et le grid system de bootstrap ;)
- Edité par EnzoUstariz2 11 octobre 2018 à 6:16:15
Mais pourquoi est ce qu'à 992px la grille boostrap affiche 3/12 au lieu de 6/12 ???
J'ai mis col-md-6
md > ou = a 992 px
Je comprend pas ?? je respecte les règles bootstrap mais ça ne fait pas ce qui est dit..
Edit: Je viens de trouver les media queries de Bootstrap (xs-sm-md-lg):
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Comment les change t on svp?
Edit: Mais en faite non je ne comprend toujours pas, "md" est égal à min-width:992px, ce qui signifie que les largeurs d'affichage étant au minimum a 992px doivent afficher deux élément par ligne si je met dans mon code source col-md-6 !
Donc pourquoi est ce que ça ne marche pas ?? (ma ligne affiche 4 éléments sur un écran de 992px de large avec un col-md-6 dans la div)
Si ce serait MAX-width a la place de min-width tout s'expliquerais, mais là...
Svp est ce qu'une bonne âme pourrait me le dire ?
Comment remplacer les xs sm md lg par des valeur en px ?
Comment remplacer col-md-6 par du ccode CSS ?
@media (min-width: 992px) {.classe #id { ???? }}
Est ce que c'est possible de mettre col-lg à 1152px et ajouter un col-xl à 1200px ?
- Edité par AbcDef39 11 octobre 2018 à 21:58:15
[Bootstrap] [HTML] [CSS] Tableau responsive
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Compos sui.
Compos sui.
https://www.youtube.com/channel/UCMFbNXUkjSUJ6WC20tGTzJg
Pas d'aide concernant le code par MP, le forum est là pour ça :)
https://www.youtube.com/channel/UCMFbNXUkjSUJ6WC20tGTzJg