• [CSS] Modifier la taille d'un élément

    Salut tout le monde. Je vais ici vous faire un petit baratin dont le but n'est pas d'être lu mais simplement de faire un petit remplissage afin d'illustrer le tuto. Je commence donc par vous parler de la pluie et du beau temps, du cours du lait et de l'artisanat mongol du début du XXII ème siècle. J'enchaîne sur la baisse du pouvoir d'achat, la déforestation en amazonie et sur ma tête (non, je plaisante) pour enfin en arriver au terme de cet article sans intérêt mais qui a rempli son office, c'est à dire un texte trop long pour pouvoir être affiché dans la <div>

    Comme vous le constatez, tout le texte n'apparaît pas dans le cadre ci-dessus. Vous aurez par contre remarqué l'ascenseur sur la droite du cadre ainsi que la poignée de redimensionnement dans le coin inférieur droit.

    Vous pouvez donc soit faire défiler le texte à l'aide de l'ascenseur ou agrandir le cadre à l'aide de la poignée.

    Code CSS correspondant à l'exemple ci-dessus

    #retailler
    {
    border:2px solid blue;
    padding:20px 20px;
    width:200px;
    height: 150px;
    resize:vertical;/*options : none, vertical, horizontal ou both */
    overflow:auto;/*options : visible, hidden, scroll, auto, inherit */
    }

     

    Il ne vous reste plus qu'à placer votre texte dans votre article comme ci-dessous

    <div id="retailler">Votre texte ici....</div>

    « [CSS] Mettre des colonnes dans ses articles[HTML] La balise <IFrame> »

    Tags Tags : , , , ,
  • Commentaires

    30
    Lundi 22 Juin 2015 à 17:09
    Avec amour. GloriaV

    <div id="retailler">Texto</div><style type="text/css"><!--#retailler{ background-image:url('https://lh3.googleusercontent.com/-iagbw7IYhX4/VNyRm0igvMI/AAAAAAABb90/gWCWL4jMoD4/w149-h150-no/6.gif');border:1px dotted #a6a7a9; border-radius: 1em ;padding:20px 20px; width:200px;height: 150px;resize:vertical;/*options : none, vertical, horizontal ou both */overflow:auto;/*options : visible, hidden, scroll, auto, inherit */}--></style>

    <style type="text/css"></style> <style type="text/css"></style> <style type="text/css"></style>
    29
    Mardi 9 Septembre 2014 à 14:20

    Bonjour j'aurais aimé savoir comment faire pour que le cadre soit aligné au milieu dans un article .J'ai pu changer  la couleur du cadre en rouge au lieu d'en bleu mais c'est surtout savoir comment l'aligné au centre dans un article qui m'intéresserait , je suis novice et bon j'apprends comme je peux et je trouve vôtre blog très intéressant , ayant plusieurs blogs sur Eklablog j'ai fait un essai sur ce blog ci-dessous pour éviter de faire trop de bêtises sur les autres .

    Je ne sais non plus comment faire pour dire d'insérer un lien dans le cadre du menu déroulant , en voulu le faire celui-ci apparait en dehors mais bon votre aide est précieuse malgré tout si vous pouvez me renseigner 

    MON BLOG ICI

    28
    Dimanche 16 Mars 2014 à 16:32

    Merci,j'ai essayé et sa marche !!!

    27
    Dimanche 10 Mars 2013 à 08:24

    merci beaucoup

    26
    Mercredi 20 Juin 2012 à 15:38

    Rien de plus simple, tu remplaces la valeur dans:

    width: 200px;

    par celle de ton choix. Par exemple

    width: 150px;

    25
    Mercredi 20 Juin 2012 à 14:42

    bonjour, j'aimerai exactement la même chose mais dans un cadre plus petit, car il est un peu trop large pour moi...

    merci de me dire on fait pour changer les dimension ...

    Kilari !

    24
    Jeudi 5 Janvier 2012 à 18:50
    Je vais voir de mon coté si je peux faire un petit code pour ça (mais pas demain ^^ ça risque de me prendre un peu de temps)
    23
    Jeudi 5 Janvier 2012 à 18:09
    Merci Papasti,
    c'est pas grave, j'avais déjà eu pas mal de difficultés à "faire' la barre qui est sur l'autre blog !
    c'est dommage que je ne puisse pas l'intégrer tel quel dans le blog sur Ekla mais je vais réflechir à une autre solution pour faire défiler les photos dans un cadre.
    Merci
    22
    Jeudi 5 Janvier 2012 à 17:45
    Alors j'ai un peu cherché sur le net. Pour ce qui est de la position de la barre de scroll, il n'y a malheureusement pas de solution pour l'écarter du bord (padding-right a juste pour effet de laisser un espace entre le bord droit et le contenu de ton article.)
    Pour personnaliser la barre, il existe des solutions mais assez complexes à mettre en oeuvre. Par contre il est plus simple de modifier les couleurs par exemple.
    21
    Jeudi 5 Janvier 2012 à 17:39
    Bonsoir Papasti,
    je suis arrivé à afficher un cadre fixe largeur, hauteur) pour mes rubriques d'articles et à y mettre un scroll sur le bord mais je n'arrive pas à 'écarter' la barre du bord droit du cadre
    (je vais paraitre un peu nul mais...: j'ai essayé margin left et padding left, ça fait rien !!)
    Après, mon autre question est: est ce que tu penses sans espoir de réussite le fait de personnaliser cette barre ??
    Merci
    20
    Mercredi 4 Janvier 2012 à 11:46

    Ok merci Papasti

    Je vais essayer, cet aprèm,  sans border (border: 0px) car je voudrais garder les bordures actuelles paramétrées sur Blogy ( gris, relief et angles arrondis) et avec height 700

    A plus

    Édit: j'ai essayé et bien évidemment, la barre se met en limite de colonne de message et non dans le cadre présent dans la colonne message.. Tu crois que c'est une histoire de padding ou de margin à mettre sur la droite pour décaler la barre dans le cadre ?

    19
    Mercredi 4 Janvier 2012 à 11:40

    D'abord, le code CSS:

    .ulmodules
    {
    border:2px solid blue;
    padding:20px 20px
    height800px;
    resize:vertical;/*options : none, vertical, horizontal ou both */
    overflow:auto;/*options : visible, hidden, scroll, auto, inherit */
    }  

    Ensuite je regarde ton histoire de flèche mais il me semble que ça risque d'être compliqué

    18
    Mercredi 4 Janvier 2012 à 11:30

    Ok Oui, c'est ça !

    (j'allais éditer mon précédent message car j'avais vu mon erreur d'appréciation...)

    j'ai vu que ton cadre est en 800px de hauteur...je ne sais pas pourquoi chez moi, il parait beaucoup plus grand..

    Mais là n'est pas le problème..

    Faut-il que je définisse le cadre CSS pour  " module  "?

    et après, je ne sais pas comment retrouver le style de ma flèche bleue ( faire le tri dans toutes les lignes de CSS scroll de mon ancien blog..

    j'avais fait un JS flexscroll, mis une id myscroll et une class flexscroll et du CSS myscroll ...

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    17
    Mercredi 4 Janvier 2012 à 11:21

    Non tous les messages de la page sont dans le cadre. Pour t'en convaicre, va sur l'accueil de mon site.

    16
    Mercredi 4 Janvier 2012 à 11:18

    Oui ça mais non pas ça !!

    car avec le cadre-longueur de la barre verticale limité à 700 et non de la longueur réelle de toute la colonne  et dans ton cas, il y a toujours qu'un seul message dans le cadre si je comprends bien.

    Je serais à peu près limité la hauteur du cadre à 700 en mettant un height mais je ne sais comment faire pour que dans ce cadre délimité, vienne s'afficher toute une rubrique d'artciles

    ( de plus, je ne sais plus ce qui correspond au CSS à reprendre dans l'ancien blog (ya peut-être aussi du javascript..j'avais ajouté de nombreuses lignes de code JS et CSS pour avoir ce rendu) pour avoir une scroll perso flèche bleue uniquement et non barre verticale classique)

    15
    Mercredi 4 Janvier 2012 à 10:59

    ça alors ?

    14
    Maximum 34 Profil de Maximum 34
    Mercredi 4 Janvier 2012 à 10:53

    Oui papasti mais dans le cadre, au lieu de faire défiler un seul article, que le cadre avec le scroll contienne une rubrique d'articles.

    es-tu allé voir  le rendu    ( les pages messages sont limitées en hauteur, 700px, je crois et un scroll persoCSS permet de faire défiler les articles dans le cadre  de la colonne message)

     

     

    13
    Mercredi 4 Janvier 2012 à 10:37

    Comme je viens de le faire sur cet article ?

    12
    Mercredi 4 Janvier 2012 à 08:51

    Bonjour Papasti,

    merci pour ta réponse mais c'est tout le contenu d'une rubrique que je veux pouvoir scroller et non un message.

    exemple dans le blog mis en site web:

    En gros un cadre fixe avec une flèche haut/bas pour voir les photos une par une.

    11
    Mercredi 4 Janvier 2012 à 08:39

    Tu peux tout simplement  mettre dans le code CSS:

    .module_contenu
    {
    border:2px solid blue;
    padding:20px 20px
    height300px;
    resize:vertical;/*options : none, vertical, horizontal ou both */
    overflow:auto;/*options : visible, hidden, scroll, auto, inherit */

    Cela fixera tous tes articles à une hauteur de 300px avec une scrollbar

    10
    Mardi 3 Janvier 2012 à 19:18

    Bonsoir,

    je rebondis sur la question de Jessica

    car sur une autre plateforme, j'avais installé un scroll ( barre de défilement verticale) personnalisé avec image flèche dans mon "cadre" de messages (  des photos) Ainsi les pages du nlog étaient de dimension fixe ( dans la moyenne des visiteurs pour que la barre navigateur ne se mette pas en place ) et on scollait dans le cadre pour faire défiler les photos...

    Est-ce possible sur Ekla ?

    j'ai le CSS de ce "scroll". Si je l'ajoute à mon blog ekla et que je fais mes messages photos dans une

    div id="monscroll", ça marcherait ??? !!    !!

     

    Édit: en fait , dans le cadre avec scroll, je voudrais que défile, non pas un message mais une page de messages, une rubrique, plusieurs messages..

    Merci si vous avez une idée du truc

    9
    Jessica.V
    Vendredi 30 Décembre 2011 à 15:21

    Hello j'ai déjà posé une question sur cet article et j'en ai encore une! Est-ce qu'il y a possibilité de changer ou de personnaliser la barre??

    8
    Mardi 27 Décembre 2011 à 07:47

    Oui tu peux utiliser les propriétés CSS suivantes:

    text-align:right;   (droite)
    text-align:left;      (gauche)
    text-align:center; (centre) 

    Tu peux les mettre en place comme ceci:

    <div id="moncadre" style="text-align:right;">ton texte</div>

    7
    Lundi 26 Décembre 2011 à 22:23

    Bonjour :) Merci pour ce tutoriel (et pour tous les autres aussi, d'ailleurs), tout est très intéressant !

    Par contre, comme je ne suis pas très (pas du tout,..) calée sur ce sujet, j'ai une petite question, est-il possible d'écrire un texte à droite (ou à gauche, peu importe, en fait) du cadre ? Et si oui, comment ? Merci d'avance !

    6
    Jessica.V
    Jeudi 6 Octobre 2011 à 20:07

    merci beaucoup!

    5
    Jeudi 6 Octobre 2011 à 19:11

    Oui, il te suffit d'ajouter une ligne au code CSS comme ci-dessous. A la place de Lien vers ton image, tu mets le vrai lien du type http://monimage.png

     

    #retailler
    {
    background-image:
    url('Lien vers ton image');
    border:2px solid blue;
    padding:20px 20px;
    width:200px;
    height: 150px;
    resize:vertical;/*options : none, vertical, horizontal ou both */
    overflow:auto;/*options : visible, hidden, scroll, auto, inherit */
    }


    Remarque:

    D'ici 2 ou 3 jours, je vais poster un formulaire qui permettra de générer automatiquement le code CSS d'une balise avec les couleurs, les epaisseurs, les ombrages, les images de fond etc.

    4
    Jessica.V
    Jeudi 6 Octobre 2011 à 18:38

    Bonjour et merci pour ce tutoriel, je voulais savoir si il était possible de personnalisé ce cadre avec une image derrière, et vu que je n'y connais rien, comment faire?
    Merci d'avance!

     

    3
    Mardi 27 Septembre 2011 à 10:54

    Je vais essayer ceci, ça donne bien :)

    2
    Vendredi 16 Septembre 2011 à 08:41

    Oui c'est tout à fait celà, les commentaires en vert donnent les options possibles ainsi on pourrait écrire:

    resize: both; ce qui permettrait de redimensionner le cadre horizontalement et verticalement.

    Pour le menu horizontal déroulant, je ne sais pas si c'est possible mais je vais me renseigner

    1
    ckjazz Profil de ckjazz
    Jeudi 15 Septembre 2011 à 19:24

    Bonjour ,

    très intéressant. Je vais essayer ça dans un article de mon blog pour voir le résultat.

    dans le code CSS  vous avez écrit en vert,si je comprends bien ce sont des options qu'il faut indiquer selon son ou ses propres choix.

    Je pensais que l'on ne pouvais pas inscrire des codes CSS aussi facilement.

    Je souhaiterais auss placer des rubriques horizontalement sous le bandeau de tête avec liste déroulante.

    rubriques horizontalement, est-ce possible avec ekla blog ?

    Merci pour votre compétence

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter