-
[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>
Tags : tete, cadre, div, 2px, dessus
-
Commentaires
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
Rien de plus simple, tu remplaces la valeur dans:
width: 200px;
par celle de ton choix. Par exemple
width: 150px;
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 !
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)
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.
MerciAlors 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.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
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 ?
D'abord, le code CSS:
.ulmodules
{
border:2px solid blue;
padding:20px 20px;
height: 800px;
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é
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 ...
Non tous les messages de la page sont dans le cadre. Pour t'en convaicre, va sur l'accueil de mon site.
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)
14Maximum 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 là ( 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)
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.
Tu peux tout simplement mettre dans le code CSS:
.module_contenu
{
border:2px solid blue;
padding:20px 20px;
height: 300px;
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
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
9Jessica.VVendredi 30 Décembre 2011 à 15:21Hello 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??
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>
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 !
6Jessica.VJeudi 6 Octobre 2011 à 20:07
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.
4Jessica.VJeudi 6 Octobre 2011 à 18:38Bonjour 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!
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
1ckjazz
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
Créer mon blog 
<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>