-
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.
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;"> </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 : 10px, border, code, cadre, text
-
Commentaires
j'ai Utilisé Le code !!! ♥
Je trouve que c'est Super !! ça fait Longtemps que je cherchais cet HTML
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êvent un jour de rencontrer l'amour... Et <span style="color: #f1696e;">Hatori</span> ne déroge pas à cette règle. Elle est d'ailleurs parfaitement persuadée que <span style="color: #f1696e;">Rita</span>, son ami d'enfance mais véritable coureur de jupons, finira par tomber légitimement amoureux d'elle. Mais quand ce dernier commence à 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> était en train de se faire voler la vedette de son propre manga ?! Si vous en avez marre de la perfection de toutes les héroïnes de fiction, <strong><span style="color: #f1696e;">No longer Heroine</span></strong> est fait pour vous ! Enfin un <span style="color: #000000;">shôjo</span> manga qui décrit votre quotidien et vos sentiments avec réalisme... et humour !! </div>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. ^^
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. :/
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 !
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 ! :)
Oui, je suis allée voir, quel est le problème ? Le texte ne commence pas à droite de l'image, c'est ça ? ^^
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" ^^
je ne connait pas la taille de mon image mais se n'est pas grave je vais mettre autre chose. merci pour l'info. ^^
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 ? :)
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 ? ^^
47alice-of-deadMardi 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
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à. »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)
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 ;)
39Acchan ♥Samedi 18 Février 2012 à 19:22C'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
37Acchan ♥Samedi 18 Février 2012 à 19:08Bonjour !
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 !
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 ! :)
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;"> </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><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;"> </span>Mais j'ai une question ! Est-ce que c'est possible de modifieer la taille de l'image ou du cercle ??
Merci sa marche a marveille ♥
PS: Si tu avais la réponse a ma deuxiéme question sa serait cool.
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;"> </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;"> </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à.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 ?
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;"> </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. Je tiens à pré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;"> </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;"> </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>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;"> </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> <span style="font-size: small; font-family: 'book antiqua', palatino;"><strong>ADMINISTRATRICE <br /><span style="color: #000000;"><br />Bonjour, bonsoir. Je suis Xx-Lou-xX, soit Lou pour faire plus court. Je tiens à pré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;"> </span><strong><span style="color: #b1d4e2;"> </span></strong><span style="color: #800000; font-size: large; font-family: arial, helvetica, sans-serif;"><strong>[Diamond.Tears]</strong><br /><br /> </span></div>
</td>
</tr>
</tbody>
</table>
Ah oui je vois le problème, j'aurais besoin de ton HTML pour voir tout ça si tu veux bien. :O
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.jpgC'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
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.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?
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.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 !)
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 !
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.
Euhh ... après identiter la ligne le code CSS faut le mettre ou ? capiche pas car j'arrive pas à mettre l'avatar dedan !
Vous devez être connecté pour commenter
Merci énormément pour ce code, il est top ! ^^