• Cadre en DIV

    qu'est-ce que c'est ?

     MIKURU  
    S'occupe de(s)... 
    • Animes
    • Design
     
    Ah, j'arrive à lire sur vos yeux que cet exemple ne vous est pas étrangé. Et oui, c'est bien le même style de cadre qui se trouve sur la page d'accueil d'Animées Online. Aujourd'hui je vais vous expliquer comment créer cet assemblage de codes. C'est assez fastidieux comme procédure car c'est entièrement fait en HTML et qu'il faut à chaque fois trouver la bonne ligne de code. Mais une fois qu'on l'a fait, on est content ! Et je vous souhaite d'y arriver à la finalisation de ce tutoriel !

    Votre Mikuru bien aimée.

     

    comment faire ?

    "Comment qu'on fait ces trucs là ?" vous demandez-vous ? Eh ben on crée un nouvel article d'abord.

    Ensuite, vous tapez un texte quelconque, supposons :
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices aliquet tempor. Fusce sollicitudin bibendum lectus sit amet eleifend. Quisque nec laoreet purus. Duis nec orci ac lorem vehicula adipiscing eget ut diam. Donec purus orci, ornare vel facilisis semper, ultricies nec metus. Quisque mollis tincidunt odio eget dapibus. Donec massa nulla, gravida vitae malesuada volutpat, viverra a dui. Ut nec rutrum enim. Etiam vehicula velit vitae erat aliquet id aliquet lacus commodo.

    Puis vous cliquez sur le bouton HTML de l'interface et vous examinez le code.
    Tout d'abord, retirez moi le <p> du début et le </p> de la fin. Ensuite, coller ce code au tout début :

    <div style="width: 250px; min-height: 150px; margin: 10px; background-color: #f5dda6;
    border: 6px solid #4a2c2c; padding: 5px; text-align: left;">

    Comme à mon habitude : les explications !
    Alors width c'est la largeur de votre cadre et min-height sa hauteur minimale, à vous de remplacer les valeurs en px de ceux-ci par celles qui vous conviennent le mieux. Le margin c'est la marge extérieure de votre cadre, c'est l'espace qu'il y aura entre lui et un autre, ici elle est de 10px, à vous de la modifier selon votre envie. background-color correspond à ce qui est en beige dans l'exemple, remplacez #f5dda6 par le code héxadécimal de la couleur de votre choix. border c'est la bordure en marron dans l'exemple, elle mesure 6px dans l'exemple, pour changer sa couleur modifiez #4a2c2c. padding, contrairement à margin représente la marge intérieure, il permet que votre texte ne soit pas complétement collé aux bords de votre cadre, évidemment, vous pouvez remplacer le 5px. Enfin, text-align correspond à l'alignement du texte, ici c'est left donc il sera à gauche, si vous le souhaitez à droite vous remplacez par right ou tout simplement au centre, ce sera center.

    Et attention, n'oubliez surtout pas de rajouter un </div> tout à la fin de votre code, c'est une étape primordiale pour que votre code fonctionne correctement.

    C'est bon. Vous venez d'apprendre les bases qui permettent de créer un cadre en DIV.
    Oui, je n'ai pas précisé les manoeuvres à faire quant au placement de l'image, pour les curieux qui veulent approfondir leurs connaissances, je vous invite à suivre la deuxième partie de ce tutoriel.

    Donc, pour le moment vous devriez avoir ça.
    Cadre en DIV

    Et dans quelques minutes on va avoir ça.


    Interéssant, non ? Allez, go.
    Identifez la ligne

    <div style="width: 250px; min-height: 150px; margin: 10px; background-color: #f5dda6;
    border: 6px solid #4a2c2c; padding: 5px; text-align: left;">

    Et collez ceci tout de suite après

    <span style= "display: block; float: left; width: 100px; height: 100px;
    -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #4a2c2c;
    background: url('urldel'image.png') no-repeat;">
    &nbsp;</span>

    display specifie la manière dont un element est affiché, ici, block specifie un bloc.
    float c'est l'emplacement de l'image, dans l'exemple c'est left, donc à gauche, si vous remplacez par right ce sera à droite. width c'est la largeur de l'image, height c'est sa hauteur.

    Ah, une nouveautée :
    -moz-border-radius: 100px 100px 100px 100px;
    Ouais, c'est quoi ça ? C'est ce qui permet de former un cercle autour de l'icon, normalement c'est juste border-radius mais comme j'utilise Mozilla firefox je rajoute -moz- devant. Passons !
    border c'est le bord marron qui forme le cercle en question, pour changer sa couleur vous modifez #4a2c2c. Enfin, remplacez urldel'image.png par l'url de votre icon.

    Il ne vous reste plus qu'à enregistrer tout ça !
    Alors heureux ?

    Pour toute demande d'approfondissement ou questions en rapport avec ce tutoriel, n'oubliez pas de poster un commentaire. Je vous y repondrais du mieux que je pourrais dès que je le verrais !


    Tags Tags : , , , ,
  • Commentaires

    78
    Samedi 26 Août 2017 à 23:36

    Merci énormément pour ce code, il est top ! ^^

    77
    Jeudi 31 Décembre 2015 à 09:54

    Merci pour le code :)

    76
    Samedi 7 Novembre 2015 à 04:47

    Merci pour ce code très utile !

    75
    Vendredi 15 Août 2014 à 14:39

    Merci pour le code ! :D 

    74
    Samedi 12 Juillet 2014 à 17:18

    J'ai utilisé ton code merci beaucoup :)

    73
    Lundi 7 Juillet 2014 à 09:46

    j'ai Utilisé Le code !!! ♥

    Je trouve que c'est Super !! ça fait Longtemps que je cherchais cet HTML

    72
    Vendredi 9 Mai 2014 à 10:47

    C'est tip top merci beaucoup!

    71
    Mardi 29 Octobre 2013 à 16:53

    Merci beaucoup!!

    70
    Jeudi 11 Juillet 2013 à 18:20

    J'adore mais je sents que sa va etre trop compliquer pour moi!

    69
    Mardi 25 Juin 2013 à 23:34

    Merci pour le codage, c'est magnifique *////*

    68
    Dimanche 19 Mai 2013 à 17:28

    C'est beaucoup mieux merci !

    67
    Dimanche 19 Mai 2013 à 17:25

    Je vais essayer, merci.

    66
    Dimanche 19 Mai 2013 à 17:20

    J'ai essayé de trouver un moyen d'arranger ça, je pense qu'avec ce code-là, ça devrait être bon. J'ai récupérer le code HTML source de ton article et ce qui est en rouge, c'est ce qui devrait permettre à ton texte de se placer à droite de l'image :

    <div style="width: 500px; height: 395px; margin: 10px; background-color: #ffffff; border: 10px solid #f399a0; padding: 5px; text-align: left;"><a href="http://ekladata.com/IYluCr8ImVda_QtnHj3uYyZRRvI.jpg"><img style="margin-right: 5px; float: left;" src="http://ekladata.com/IYluCr8ImVda_QtnHj3uYyZRRvI@250x395.jpg" alt="No Longer Heroine" /></a>Toutes les filles r&ecirc;vent un jour de rencontrer l'amour... Et <span style="color: #f1696e;">Hatori</span> ne d&eacute;roge pas &agrave; cette r&egrave;gle. Elle est d'ailleurs parfaitement persuad&eacute;e que <span style="color: #f1696e;">Rita</span>, son ami d'enfance mais v&eacute;ritable coureur de jupons, finira par tomber l&eacute;gitimement amoureux d'elle. Mais quand ce dernier commence &agrave; sortir avec <span style="color: #f1696e;">Adachi</span>, l'intello de la classe... Rien ne va plus ! Et si <span style="color: #f1696e;">Hatori</span> &eacute;tait en train de se faire voler la vedette de son propre manga ?!&nbsp; Si vous en avez marre de la perfection de toutes les h&eacute;ro&iuml;nes de fiction, <strong><span style="color: #f1696e;">No longer Heroine</span></strong> est fait pour vous ! Enfin un <span style="color: #000000;">sh&ocirc;jo</span> manga qui d&eacute;crit votre quotidien et vos sentiments avec r&eacute;alisme... et humour !!&nbsp;</div>

    65
    Dimanche 19 Mai 2013 à 16:13

    Je n'arrive pas le mettre correctement ;/

    64
    Dimanche 19 Mai 2013 à 16:07

    Oh, tu t'en es plutôt bien sortie ! C'est vrai que c'est un petit peu dommage pour l'image, le texte ne se colle pas à droite. Mais peut-être que c'est voulu. ^^

    63
    Dimanche 19 Mai 2013 à 15:35

    Merci pour le code et les explications ! (Résultat)

    62
    Dimanche 19 Mai 2013 à 15:32

    Contente que tu ais pu résoudre ton problème alors. ^^

    61
    Dimanche 19 Mai 2013 à 15:29

    Ce n'est pas grave je me suis débrouillée merci.

    60
    Dimanche 19 Mai 2013 à 15:27

    Autre chose qu'une espace ? Je n'ai pas très bien compris

    59
    Dimanche 19 Mai 2013 à 15:14

    Et comment est ce qu'on fait pour mettre autre chose qu'un espace par exemple stp ?

    Petit exemple :

    BlablablablalaBlablablablalaBlablablablala

    Et patatitataEt patatitataEt patatitata

    Car moi ça me colle le texte. :/

     

    58
    Dimanche 19 Mai 2013 à 15:07

    Ah d'accord merci, je pensais qu'on pouvait le faire directement.

    57
    Dimanche 19 Mai 2013 à 14:30

    Tu peux redimensionner ton image à l'aide d'un logiciel de graphisme s'il y en a un sur ton bureau ou alors utiliser les modules en ligne comme http://www.picresize.com, c'est très intuitif !

    56
    Dimanche 19 Mai 2013 à 14:10

    Petite question, comment on remesure l'image ? La mienne est trop grande, merci d'avance !

    55
    Kirumi Profil de Kirumi
    Vendredi 17 Mai 2013 à 12:20

    ben non, sa change pas ^^'

    54
    Jeudi 16 Mai 2013 à 19:51

    Oui, en fait c'est parce que ton texte est écrit en gras, il ne trouve pas la place de rentrer en haut à droite. Je pense que si tu enlève le caractère gras à ton texte, cela devrait se positionner comme dans l'exemple ! :)

    53
    Kirumi Profil de Kirumi
    Mercredi 15 Mai 2013 à 21:21

    oui, tu c'est comment le mettre normalement ?

    52
    Mercredi 15 Mai 2013 à 17:43

    Oui, je suis allée voir, quel est le problème ? Le texte ne commence pas à droite de l'image, c'est ça ? ^^

    51
    Kirumi Profil de Kirumi
    Mercredi 15 Mai 2013 à 14:47

    j'ai un petit problème avec mon code, tu peux allé voir sur mon blog dans la rubrique :"Mes mangas préférés" ^^

    50
    Mardi 7 Mai 2013 à 12:07

    je ne connait pas la taille de mon image mais se n'est pas grave je vais mettre autre chose. merci pour l'info. ^^

    49
    Lundi 6 Mai 2013 à 20:18

    Tout dépend de la taille de ton image ! Ce tutoriel est précisé pour les images 100*100, il peut être adapté mais sans la taille de ton image je ne peux pas te dire. Quelle est la taille de ton image ? :)

    48
    Lundi 6 Mai 2013 à 18:48

    J'ai un petit problème, mon image (photo de profil) est trop grosse pour le cadre près du texte, comment on fait pour ratrécir l'image ou agrandir le cadre ? ^^

    47
    alice-of-dead
    Mardi 21 Août 2012 à 20:30

    >w< merci j'ai reussit

    mais petit question ... comment tu fait le contoure de l'icon carré et non ovale

    46
    Shawty Profil de Shawty
    Jeudi 14 Juin 2012 à 20:35

    Ah, désolée dans ce cas...Et merci.

    45
    Jeudi 14 Juin 2012 à 17:59

    J'avais répondu à cette question un peu plus bas déjà.
    « Pour centrer ton cadre, met le dans une celulle de tableau en t'aidant de ce tutoriel là. »

    44
    Shawty Profil de Shawty
    Mercredi 13 Juin 2012 à 22:26

    Coucou :)

    Je te remercie tout d'abord pour ces codes; et je voudrai savoir, comment fais-on pour placer ce Cadre en DIV, au milieu de notre article ?!

    Merci d'avance 8)

    43
    Samedi 26 Mai 2012 à 16:14

    C'est possible de mettre le cadre au centre de la page ? Car moi, sur les cadres que j'ai mit sur mon blog, ça reste à gauche, et ça fait bizarre par rapport au reste du texte en dessous qui est centré...

    EDIT : en fait c'est bon, j'ai trouvé comment faire ;)

     

    42
    Mercredi 2 Mai 2012 à 20:54

    Oh merci ! :D

    41
    Mardi 10 Avril 2012 à 20:06

    Aah, merci ! J'aime beaucoup  <3

    40
    Kristen_Stewart Profil de Kristen_Stewart
    Dimanche 26 Février 2012 à 17:00

    Le cercle apparait en dehort de l'image :s

     

    39
    Acchan ♥
    Samedi 18 Février 2012 à 19:22

    En dessous.

    38
    Samedi 18 Février 2012 à 19:17

    C'est-à dire, où est-ce que tu veux mettre la deuxième image ? A droite de la première, en dessous ? Je ne vois pas très bien

    37
    Acchan ♥
    Samedi 18 Février 2012 à 19:08

    Bonjour !

    J'aimerais savoir comment fait-on  pour mettre une deuxième image, car quand j'essaye de mettre une deuxième fois le code, l'image se met au dessus de la première.

    Merci d'avance !

    36
    Mercredi 8 Février 2012 à 15:55

    Je te remercie encore une fois Mikuru ! J'ai encore utilisé ce HTLM ! >w< J'avoue que c'est assez long mais aprés quand je vois le résultat je suis trop contente ! :) 

    35
    Sydo Profil de Sydo
    Mardi 1er Novembre 2011 à 19:41

    YOOOOSH ! o/
    J'ai réussi à le faire !

    34
    Mardi 1er Novembre 2011 à 19:26

    Cela aurait été plus pratique d'insérer du texte en fait.
    Normalement, avec du texte cela devrait marcher, voilà le code final.

    <div style="width: 250px; min-height: 150px; margin: 10px; background-color: #f5dda6; border: 6px solid #4a2c2c; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #4a2c2c; background: url('http://data0.ek.la/xanxusnear/mod_article22903629_1.png?2973') no-repeat;">&nbsp;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate velit a orci posuere sit amet mollis augue pulvinar. Nam non turpis sit amet tellus tincidunt placerat at nec augue. Duis sodales nulla vitae sem cursus quis scelerisque mi adipiscing. Phasellus convallis luctus dui, et tempus nulla fringilla eget. Duis eu mi ut justo sollicitudin euismod. Proin a velit lectus. Curabitur non nibh eu mi egestas sodales. Suspendisse nec metus libero, at aliquam est. Sed venenatis sagittis est vitae blandit. Vestibulum quis neque massa, a imperdiet velit.</div>

    33
    Mardi 1er Novembre 2011 à 19:15
    <div style="width: 250px; min-height: 150px; margin: 10px; background-color: #f5dda6;
    border: 6px solid #4a2c2c; padding: 5px; text-align: left;">
    <span style= "display: block; float: left; width: 100px; height: 100px;
    -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #4a2c2c;
    background: url('http://data0.ek.la/xanxusnear/mod_article22903629_1.png?2973') no-repeat;">
    &nbsp;</span>
    32
    Mardi 1er Novembre 2011 à 19:13

    En dessus ? Au dessus ?
    C'est étrange, puis-je avoir ton HTML ?

    31
    Mardi 1er Novembre 2011 à 19:10

    je suis toute les étapes mais apres l'image est en dessus du cadre :/

    30
    Samedi 22 Octobre 2011 à 14:56

    Oui c'est possible, mais ça dépend de la taille de l'image.

    29
    Samedi 22 Octobre 2011 à 14:00

    Mais j'ai une question ! Est-ce que c'est possible de modifieer la taille de l'image ou du cercle ??

    28
    Samedi 22 Octobre 2011 à 13:57

    Mici !

     

    27
    Mardi 18 Octobre 2011 à 19:48

    Merci sa marche a marveille ♥ 

    PS: Si tu avais la réponse a ma deuxiéme question sa serait cool.

    26
    Mardi 18 Octobre 2011 à 19:31

    Si tu as Google Chrome alors à la place de ce code là (le dernier) :
    <span style= "display: block; float: left; width: 100px; height: 100px;
    -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #4a2c2c;
    background: url('urldel'image.png') no-repeat;">&nbsp;</span>

    Met celui-ci :
    <span style= "display: block; float: left; width: 100px; height: 100px;
    -webkit-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #4a2c2c;
    background: url('urldel'image.png') no-repeat;">&nbsp;</span>

    J'ai changé le -moz- (Pour le naviguateur Mozilla) en -webkit- pour Google Chrome, je pense que ça devrait marcher.

    Pour centrer ton cadre, met le dans une celulle de tableau en t'aidant de ce tutoriel là.

    25
    Mardi 18 Octobre 2011 à 15:04

    Et pour mettre le cadre au milieu et pas a gauche?

    24
    Lundi 17 Octobre 2011 à 21:28

    Google Chrome 

    23
    Lundi 17 Octobre 2011 à 20:09

    Je suis allée voir sur ton blog et chez moi le cadre est circulaire, c'est ton naviguateur qui ne le voit pas. Quel est ton naviguateur ?

     

    22
    Lundi 17 Octobre 2011 à 19:55

    Dit comment on met l'icone en rond ? (moi sa me fait carré)

    21
    Dimanche 16 Octobre 2011 à 15:52

    C'est bon en fait. Merci *W*

    20
    Dimanche 16 Octobre 2011 à 15:49

    Qu'est-ce que ça donne ?

    19
    Dimanche 16 Octobre 2011 à 15:42

    Sa fonctionne mais cette fois-ci, c'est [Diamond.Tears] qui beuge ;o;

    18
    Dimanche 16 Octobre 2011 à 14:56

    Essaie ce code là pour voir :

    <table border="0">
    <tbody>
    <tr>
    <td>
    <div style="width: 250px; min-height: 200px; margin: 10px; background-color: #c3bfc4; border: 6px solid #500a19; padding: 5px; text-align: left; color: #979696;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #4a2c2c; background: url('http://data0.id.st/diamond_dust/mod_html231767_1.png?6690') no-repeat;">&nbsp;</span><span style="text-decoration: underline; color: #800000;"><span style="font-family: impact,chicago; font-size: xx-large;">LOU</span></span> <br /><strong>ADMINISTRATRICE</strong><br /><br /><strong><span style="color: #000000; font-family: book antiqua,palatino;">Bonjour, bonsoir. Je suis Xx-Lou-xX, soit Lou pour faire plus court.&nbsp; Je tiens &agrave; pr&eacute;ciser que ce n'est pas mon vrai nom 8'D [sa pourrait mais sa ne l'est pas dans mon cas.]</span></strong></div>
    <div style="width: 250px; min-height: 200px; margin: 10px; background-color: #c3bfc4; border: 6px solid #500a19; padding: 5px; text-align: left; color: #979696;">&nbsp;</div>
    </td>
    <td>
    <div style="width: 250px; min-height: 200px; margin: 10px; background-color: #c3bfc4; border: 6px solid #500a19; padding: 5px; text-align: left; color: #979696;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #4a2c2c; background: url('http://data0.cd.st/so_what/perso/2968415381_0_3_zit7jggg.png') no-repeat;">&nbsp;</span><br /><br /><br /><br /><br /><br /><br /><strong><span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: large;">[Diamond.Tears]</span></strong></div>
    </td>
    </tr>
    </tbody>
    </table>

    17
    Dimanche 16 Octobre 2011 à 14:40

    le voilà :

    <table border="0">

    <tbody>

    <tr>

    <td>

    <div style="color: #979696; width: 250px; min-height: 200px; background-color: #c3bfc4; text-align: left; border-width: 6px; border-color: #500a19; border-style: solid; padding: 5px; margin: 10px;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #4a2c2c; background: url('http://data0.id.st/diamond_dust/mod_html231767_1.png?6690') no-repeat;">&nbsp;</span><span style="font-family: impact, chicago; font-size: xx-large;"><span style="text-decoration: underline;"><span style="color: #800000; text-decoration: underline;">LOU</span></span>&nbsp;<span style="font-size: small; font-family: 'book antiqua', palatino;"><strong>ADMINISTRATRICE&nbsp;<br /><span style="color: #000000;"><br />Bonjour, bonsoir. Je suis Xx-Lou-xX, soit Lou pour faire plus court. &nbsp;Je tiens &agrave; pr&eacute;ciser que ce n'est pas mon vrai nom 8'D [sa pourrait mais sa ne l'est pas dans mon cas.]</span></strong></span></span></div>

    <div style="color: #979696; width: 250px; min-height: 150px; background-color: #c3bfc4; text-align: center; border-width: 6px; border-color: #500a19; border-style: solid; padding: 5px; margin: 10px;"><span style="font-family: impact, chicago; font-size: xx-large;"><span style="font-size: small; font-family: 'book antiqua', palatino;"><strong><br /></strong></span></span></div>

    </td>

    <td>

    <div style="color: #b1d4e2; width: 250px; min-height: 350px; margin: 10px; background-color: #c3bfc4; border: 6px solid #500a19; padding: 5px; text-align: left;"><span style="display: block; float: left; width: 100px; height: 100px; -moz-border-radius: 100px 100px 100px 100px; margin-right: 10px; border: 3px solid #4a2c2c; background: url('http://data0.cd.st/so_what/perso/2968415381_0_3_zit7jggg.png') no-repeat;">&nbsp;</span><strong><span style="color: #b1d4e2;">&nbsp;&nbsp;</span></strong><span style="color: #800000; font-size: large; font-family: arial, helvetica, sans-serif;"><strong>[Diamond.Tears]</strong><br /><br />&nbsp;</span></div>

    </td>

    </tr>

    </tbody>

    </table>

    16
    Dimanche 16 Octobre 2011 à 12:23

    Ah oui je vois le problème, j'aurais besoin de ton HTML pour voir tout ça si tu veux bien. :O

    15
    Samedi 15 Octobre 2011 à 21:14

    J'ai un p'tit problème Kururu'..
    Sa fait un moment que je galère à trouver la soluc' et j'ai abandonné. J'aurai besoin de ton aide !

    En fait vois-tu :  http://nsa22.casimages.com/img/2011/10/15/111015091928456539.jpg

    Ceci est la capture de quand je tape mon texte et tout, dans l'édition de l'article..
    Et là : http://nsa22.casimages.com/img/2011/10/15/111015092059272626.jpg

    C'est lorsque j'ai validé.., ce qui apparaît sur ma page. Pourquoi sa rend quelque chose different de lorsque j'édite l'article ? [img1] Et comment dois-je faire pour que quand j'édite et lorsque je valide soit pareil ?! ;o;

    Je ne sais pas si tu as compris ..

    TTWTT 

    14
    Dimanche 25 Septembre 2011 à 13:11

    Merci beaucoup pour tout tes tutoriels, ils sont vraiment superbes ^^ !!

    13
    Dimanche 18 Septembre 2011 à 06:24

    Merci pour ce tuto Mikuru! :D C'est super bien expliqué. ;)

    12
    Samedi 17 Septembre 2011 à 19:43

    J'ai fait un tutoriel complémentaire pour répondre à votre question, j'espère que c'est ce que vous demandez. :)
    Pour y accéder c'est à cette adresse.

    11
    Samedi 17 Septembre 2011 à 12:15

    Question:

    J'ai réussi à tout faire, mais si on veux mettre en exemple un scrollbar à coté, comment on fait? Ou encore un autre de ce type?

    10
    Samedi 17 Septembre 2011 à 11:27

    Merci mais comment on fait pour mettre 2 cadres à coté ?

    9
    Mardi 13 Septembre 2011 à 18:35

    Merci !! ^^ et désolé !

    8
    Mardi 13 Septembre 2011 à 18:30

    Ah oui je viens de comprendre. N'hesite surtout pas à prendre une capture d'image pour que je comprenne tout de suite ce que tu veux, hein ! :) Donc, pour mettre une scroll en fait faut remplacer :

    <div style="width: 250px; min-height: 150px; margin: 10px; background-color: #f5dda6;
    border: 6px solid #4a2c2c; padding: 5px; text-align: left;">

    (Cette ligne est la première ligne de code du tutoriel)
    Donc, comme dit plus haut, faut la remplacer par ceci :

    <div style="width: 250px; height: 150px; margin: 10px; background-color: #f5dda6;
    border: 6px solid #4a2c2c; padding: 5px; text-align: left; overflow: auto;">

    J'ai juste changé le min-height en height et rajouté un overflow a la fin.
    La scrollbar apparaitra seulement lorsque ton texte depassera la hauteur que tu aura précisée dans le height.

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    7
    Mardi 13 Septembre 2011 à 18:07

    Je parle que comme pour sur Animée-Online, sur vos modérateurs le texte et comme le Scrollbar

    (désolé je m'explique mal !)

    6
    Mardi 13 Septembre 2011 à 18:05

    "Question, comment on fait pour mettre le texte en Scrollbar comme pour mon accueil ? car mon texte es long !"
    Essaie de voir ICI, je pense que ça doit t'expliquer ce que tu cherches.

    A moins que si tu ne veuilles autre chose, je ne vois pas de quoi tu parles. :O

    5
    Mardi 13 Septembre 2011 à 16:20

    A okiii j'ai comprit !! Merci ^^"

    Question, comment on fait pour mettre le texte en Scrollbar comme pour mon accueil ? car mon texte es long !

    4
    Lundi 12 Septembre 2011 à 19:44

    Identifier ça veut dire retrouver, cette ligne c'est la première que tu as inséré normalement, elle est deja dans ton code si tu as reussis à faire le cadre avec son texte à l'intérieur.

    3
    Dimanche 11 Septembre 2011 à 21:27

    Euhh ... après identiter la ligne le code CSS faut le mettre ou ? capiche pas car j'arrive pas à mettre l'avatar dedan !

    2
    Dimanche 11 Septembre 2011 à 21:03

    Merci !!

    1
    Dimanche 11 Septembre 2011 à 17:17

    OUAIIIIS MERCIIII

    Vous devez être connecté pour commenter