AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -17%
(Black Friday) Apple watch Apple SE GPS + Cellular ...
Voir le deal
249 €

    Un tableau en CSS

    Lone wanderer
    Lone wanderer
    MasculinAge : 32Messages : 176

    Sam 13 Fév 2016 - 23:07

    Ma demande



       Bonjour à vous tous ! J'aurai voulu que quelqu'un me crée une division dans le CSS de mon forum pour me permettre de créer des tableaux tout fait en inséarant une simple ligne de code style au lieu de toute une architecture en bbcode. Ce serait pour faire des fiches d'objets (armes, nourritures, médicament, armures...) pour la partie "intendance" de mon forum. Merci d'avance !

       Schéma(s) et Eléments
       Schémas : Un tableau en CSS 1455400821-suggestion-de-presentation
       Tailles des éléments : j'aurai voulu que la division fasse 300px de large sur 400 de haut.
       Effets voulus : Le background serait celui-ci : https://nsa21.casimages.com/img/2012/04/23/120423043544645425.png. Et aussi comme vous pouvez le voir, j'aimerais un border radius, autant pour l'image à l'intérieur que pour la fiche elle même. Il me faut une partie aussi séparée de la description en bas pour entrer le prix.
       Version de votre forum : PHPBB2

       Ressources
       Background : https://nsa21.casimages.com/img/2012/04/23/120423043544645425.png. a part ça rien à insérer

       Autres précisions ?
       Merci d'avance ! ^^
       


    Dernière édition par Lone wanderer le Mar 16 Fév 2016 - 11:22, édité 1 fois
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Lun 15 Fév 2016 - 13:43

    Hello, j'ai fait très rapidement quelque chose, dis-moi si ça te convient. Vu que tu n'as rien précisé pour les textes, je n'ai pas vraiment travaillé ça.

           
       
       

    Nom de l'objet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Prix de l'objet


    EDIT : Pour le titre de la fiche, c'est le H1 du forum qui intervient dessus... Voilà ce que ça donne sans les styles de N-U :
    Un tableau en CSS 1455540394-capture-d-ecran-2016-02-15-a-13-45-34
    • Revenir en haut
    Lone wanderer
    Lone wanderer
    MasculinAge : 32Messages : 176

    Lun 15 Fév 2016 - 21:29

    super! merci ! =D
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 16 Fév 2016 - 9:27

    Cool !
    Voilà le code ! :3

    Le HTML :
    Code:
    <body><div class="cadrefiche"> <h1>Nom de l'objet</h1> <div class="cadre_image"></div> <div class="desc"> <div class="desc_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> <div class="prix">Prix de l'objet</div></div>

    Le CSS, à intégrer dans ta feuille de styles :
    Code:

    .cadre {
                    height: 400px;
                    width: 300px;
                    background-image: url('http://nsa21.casimages.com/img/2012/04/23/120423043544645425.png');
                    border-radius: 10px;
                    border: 5px solid #a8a288;
                    position: relative;
                }
                .cadre h1 {
                    color: #a8a288;
                    margin: 5px auto;
                    text-align: center;
                }
                .cadre_image {
                    background-color: #fff;
                    height: 130px;
                    width: 250px;
                    margin: auto;
                    border-radius: 10px;
                    border: 5px solid #a8a288;
                }
                .desc {
                    color: #a8a288;
                    width: 250px;
                    height: 140px;
                    margin: 20px auto auto auto;
                    font: 12px/14px tahoma, sans-serif;
                    overflow: auto;
                }
                .prix {
                    text-align: center;
                    color: #a8a288;
                    border-top: 4px solid rgba(255,255,255, 0.2);
                    padding-top: 5px;
                    position: absolute;
                    bottom: 5px;
                    width: 100%;
                }
    • Revenir en haut
    Lone wanderer
    Lone wanderer
    MasculinAge : 32Messages : 176

    Mar 16 Fév 2016 - 10:19

    heu... Ça ne marche pas malheureusement ^^"
    Je te laisse voir le truc ici : http://holocaustejdr.fra.co/t79-les-armes-des-terres-desolees#317

    Je crois, arrête-moi si je me trompe, que c'est parce que .prix ou .desc renvoie à des templates non existantes. non ?

    Par contre, je dois préciser, si le but serait d'intégrer le tableau dans la STRUCTURE de la page, on y est pas du tout ^^" car je cherche un tableau qui puisse être copié/collé et édité =D

    Merci d'avance de ton aide Wink
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 16 Fév 2016 - 10:31

    Ah zut c'est au niveau du CSS, je t'ai donné le code que j'avais avant de l'éditer :

    Code:

    .cadrefiche {
                    height: 400px;
                    width: 300px;
                    background-image: url('http://nsa21.casimages.com/img/2012/04/23/120423043544645425.png');
                    border-radius: 10px;
                    border: 5px solid #a8a288;
                    position: relative;
                }
                .cadrefiche h1 {
                    color: #a8a288;
                    margin: 5px auto;
                    text-align: center;
                }
                .cadre_image {
                    background-color: #fff;
                    height: 130px;
                    width: 250px;
                    margin: auto;
                    border-radius: 10px;
                    border: 5px solid #a8a288;
                }
                .desc {
                    color: #a8a288;
                    width: 250px;
                    height: 140px;
                    margin: 20px auto auto auto;
                    font: 12px/14px tahoma, sans-serif;
                    overflow: auto;
                }
                .prix {
                    text-align: center;
                    color: #a8a288;
                    border-top: 4px solid rgba(255,255,255, 0.2);
                    padding-top: 5px;
                    position: absolute;
                    bottom: 5px;
                    width: 100%;
                }

    Essaye avec celui-là, ça devrait fonctionner.
    Je ne comprends pas ce que tu veux dire sinon ? o.o Tu peux copier et coller le code HTML comme tu veux...

    Cela dit, étant donné que tu ne m'as pas donné d'image, il peut y avoir des soucis au niveau de l'intégration de l'image. J'ai donné une largeur et une hauteur à ma div image, alors pour une intégration idéale, tes images devront toutes avoir la même taille :3 (tu pourras toujours changer la taille dans le CSS)
    • Revenir en haut
    Lone wanderer
    Lone wanderer
    MasculinAge : 32Messages : 176

    Mar 16 Fév 2016 - 10:49

    Nan laisse tomber pour ce que je demandais sur les templates ^^ C'était parce que je pensais que tu devais créer des catégories dans les templates pour référer au CSS pour référer au HTML dans le message ^^

    Par contre même s'il y a un mieux, ça ne marche toujours pas :/ En fait ce qui bugue c'est la division "prix" qui ne s'affiche pas et le contour+background qui ne s'affiche pas non plus.
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 16 Fév 2016 - 10:59

    Est-ce qu'il n'y a pas d'erreur dans ton CSS ? Je ne vois pas le "cadrefiche" apparaître, ce qui n'est pas normal... o:
    • Revenir en haut
    Lone wanderer
    Lone wanderer
    MasculinAge : 32Messages : 176

    Mar 16 Fév 2016 - 11:02

    oui je confirme, il apparait pas ^^ Mais pourtant j'ai bien ctrl+c ctrl+v ton post :
    https://2img.net/image.noelshack.com/fichiers/2016/07/1455616928-capture-ecran.jpg
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 16 Fév 2016 - 11:09

    Bon, bah tu sais quoi ? On efface tout et on recommence xD
    J'ai testé sur mon forum, ça devrait fonctionner :

    Code:
    <div class="cadrefiche"> <h1>Nom de l'objet</h1> <div class="cadre_image"></div> <div class="desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="prix">Prix de l'objet</div> </div>

    Code:
    .cadrefiche {
                    height: 400px;
                    width: 300px;
                    background-image: url('http://nsa21.casimages.com/img/2012/04/23/120423043544645425.png');
                    border-radius: 10px;
                    border: 5px solid #a8a288;
                    position: relative;
                }
                .cadrefiche h1 {
                    color: #a8a288;
                    margin: 5px auto;
                    text-align: center;
                }
                .cadre_image {
                    background-color: #fff;
                    height: 130px;
                    width: 250px;
                    margin: auto;
                    border-radius: 10px;
                    border: 5px solid #a8a288;
                }
                .desc {
                    color: #a8a288;
                    width: 250px;
                    height: 140px;
                    margin: 20px auto auto auto;
                    text-align: justify;
                    font: 12px/14px tahoma, sans-serif;
                    overflow: auto;
                }
                .prix {
                    text-align: center;
                    color: #a8a288;
                    border-top: 4px solid rgba(255,255,255, 0.2);
                    padding-top: 5px;
                    position: absolute;
                    bottom: 5px;
                    width: 100%;
                }
    • Revenir en haut
    Lone wanderer
    Lone wanderer
    MasculinAge : 32Messages : 176

    Mar 16 Fév 2016 - 11:14

    OK ! Alors j'ai une bonne et une mauvaise nouvelle.
    La bonne nouvelle c'est que ton code est impeccable, je l'ai essayé sur un de mes autres forums et ça marche sans aucun problème !
    Et donc la mauvaise nouvelle, c'est que ça doit venir de mon forum et j'ai aucune idée de ce qui peut faire ça... --"
    • Revenir en haut
    Lone wanderer
    Lone wanderer
    MasculinAge : 32Messages : 176

    Mar 16 Fév 2016 - 11:19

    C'est bon ! Ca marche ! J'ai réussi à le faire fonctionner. C'était bien à cause d'une erreur de CSS entièrement de ma faute... --" Une erreur tellement c**** que j'arrive même pas à comprendre COMMENT ça pouvait être considéré une erreur : j'avais mis un //*code du tableau*// au dessus mais le CSS aimait pas et le considérait comme partie intégrante du code malgré une couleur brune... Stupid... --"

    En tout cas c'est bon ! =D Merci beaucoup, et surtout pour ta patience ^^
    • Revenir en haut
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Mar 16 Fév 2016 - 11:20

    ah, ça ne fait rien, les erreurs de code toutes bêtes ça arrive souvent xD
    De rien, si jamais t'as un souci, hésite pas à me contacter !
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 21:37