-
Module de mises à jour
qu'est-ce que c'est ?
MAJ DU 26/08 :
• Nouveau tutoriel de Codage HTML
MAJ DU 25/08 :
• Nouveau tutoriel de Codage CSS
MAJ DU 24/08 :
• Nouveau tutoriel de Codage HTML & CSS
• Nouveau tutoriel de Codage HTML & CSS
• Ajout d'un Icon
MAJ DU 23/08 :
• Ajout d'une Signature
• Nouveau tutoriel de Codage HTML & CSS
MAJ DU 21/08 :
• Ajout d'un Render
• Ajout d'une Signature
MAJ DU 20/08 :
• Ajout d'Icons dans le libre serviceOui, c'est ce gros bordel au-dessus. En fait je l'ai fait de la même manière que celui qui est à l'accueil.
A la base d'ailleurs, j'aurais dû faire un tuto sur l'autre mais j'ai décidé d'en faire un exprès pour ce tuto, ce tuto qui est très long d'ailleurs, ne m'en voulez pas trop. Mais, ne vous découragez pas en lisant ça, maintenant que j'ai réussi, je vais partager mon savoir avec vous de la manière la plus simple et la plus rapide qui soit ! :)
comment faire ?Tout d'abord, il nous faut une image de base. Je vous en ai fait une exprès pour le tutoriel, vous vous rendez compte de la chance que vous avez ?! Donc on va travailler sur le deuxième exemple du haut car c'est celui-là que j'ai fait à l'occasion du tutoriel, l'image de base se trouve ici. En premiers lieux nous allons faire du CSS donc je vous invite à ouvrir la feuille de style dans Apparence > Modifier le thème > Ajouter du CSS.
Nous allons créer une class CSS, pour cela, suivez le modèle ci-dessous.nomdevotreclass {
background-image: url(url de l'image de base);
background-repeat: no-repeat;
height: 161px;
width: 503px;
}Je vous explique. Deja, le nom de votre class se trouvera à la place de nomdevotreclass, vous pourrez le nommer comme vous voudrez, moi je le nommerai majbg lors de ce tutoriel, maj pour Mises à jour et bg pour Background.
Pour background-image, vous insérez l'url de l'image de base donnée plus haut entre les parenthèses.
background-repeat gère la répétition de votre fond, ici elle est désactivé car on a écrit no-repeat, pour l'activer il suffit de remplacer par repeat.
height et width correspondent respectivement à la hauteur et la largeur de votre image, ici elle fait 161 pixels de hauteur et 503 pixels de largeur, à vous de modifier ça selon l'image que vous utilisez.
Voila, nous avons fini de créer la première class qui encadre l'image, maintenant il faut créer celle qui encadrera le cadre avec scrollbar car c'est lui qui contiendra votre texte et les édits de vos MAJ.
Sautez une ligne dans votre feuille de style CSS et écrivez.nomdevotreclass2 {
position: relative; top: 18px; left: 4px;
}Comme pour la premiere class, vous remplacerez nomdevotreclass2 par un nom de votre choix différent du précédent.
Pour ce tuto j'utiliserai le nom de scrollbox puisque l'on aura une sorte de boîte avec une scrollbar.
relative derriére position permet de placer votre ensemble correctement par rapport au reste de l'article, c'est à dire que si vous le mettez en haut, il sera en haut et ne passera pas par dessus votre texte en bas, pareillement si vous le mettez en fin d'article.
La valeur qui suit top déterminera la position de votre boîte par rapport au bord supérieur de l'image (A remplacer par bottom si vous souhaitez le faire par rapport au bas) et la valeur qui suit left par rapport au bord de gauche (A remplacer par right si vous souhaitez le faire par rapport au bord de droite). Les valeurs de l'exemple sont approximatives, à vous de jouer en changeant les chiffres pour trouver la bonne combine.
On va s'arrêter là pour le CSS, bien sûr, si certaines valeurs ne conviennent pas, rien ne vous empêchera de les modifier par la suite.
Maintenant, on va faire votre article. En fait, le seul truc que vous devez faire c'est votre cadre avec scrollbar, donc je vous invite à jeter un coup d'oeil au tutoriel à ce sujet. Pour la hauteur vous devrez mettre 132px et pour la largeur 300 car c'est la taille exacte du cadre gris dans lequel seront écrite les nouveautés.
Une fois fait, vous restez sur l'edition du code HTML et vous allez encadrer votre boîte avec scrollbar à l'aide des deux class que l'on a créées au préalable. Pour cela vous rajoutez au tout début de votre code HTML<div class="majbg">
<div class="scrollbox">Donc à la place de majbg (Qui permettra de mettre l'image de base en fond) et scrollbox (Qui encadre votre boîte avec scrollbar) vous metterez les nom de class que vous avez choisit si ce ne sont pas ceux-là.
Et bien évidemment, comme l'on à ouvert deux balises, il faut aussi fermer les deux.
C'est pourquoi vous allez rajouter tout à la fin de votre code HTML</div>
</div>Enregistrez un peu pour voir.. Alors, tout est bon ?
Non ? C'est décalé ? Et bien vous réouvrez votre feuille de style CSS, et vous jouez avec les chiffres afin de trouver l'emplacement idéal.
Si vous avez rencontrez des problèmes lors de ce tutoriel, n'hésitez pas à m'en faire part dans un commentaire, j'y répondrai dès que possible.
-
Commentaires
Bonjour Yûme~ !
Essaie donc de rajouter la propriété margin: 0 auto; dans la règle .majbg, comme dans l'exemple ci-dessous :
.majbg {
background-image: url(url de l'image de base);
height: 161px;
width: 503px;
margin: 0 auto;
}
Bonjour,
je n'ai pas eu de problème avec ce code très utile! Merci pour ce tuto! Mais j'aimerai juste mettre l'image au centre de ma page, et j'ai tout testé et je n'y arrive pas...pourtant, ça doit être tout bête...peux-tu m'aider?
Bonjour miou65,
Ci-dessous les codes corrigés :
HTML
<div class="majbg">
<div class="scrollbox" style="height: 177px; width: 260px; overflow-x: auto; overflow-y: auto;">Bonjours à tous ! Bienvenue dans notre Rpg, les membres du staff est composés de Haruka, Crel, Hina ☻ et Miou65. Si jamais vous avez un problème ou que vous ne comprenez pas n'hésitez pas à venir nous demandez de l'aide.</div>
</div>
CSS
.majbg {
background-image: url('http://ekladata.com/We5-6NAHP9t4OD96RPOcxhQnvwg.png');
background-repeat: no-repeat;
height: 250px;
width: 650px;
}
.scrollbox {
position: relative;
top: 38px;
left: 19px;
}
Je ne comprends pas mais mon texte ne rentre pas dans mon cadre même si j'essaye de changer les px il ne bouge pas... Peut-être que j'ai fait une erreur si tu as le temps tu pourrais regarder mon code ?
Css:
.majbg {
background-image: url(http://ekladata.com/We5-6NAHP9t4OD96RPOcxhQnvwg.png);
background-repeat: no-repeat;
height: 250px;
width: 650px;
}
.scrollbox {
position: relative; top: 18px; left: 4px;
}
Htlm:
<div class="majbg"> </div>
<div class="scrollbox"> </div>
<div style="height: 132px; width: 300px; overflow-x: auto; overflow-y: auto;">
<p>Bonjours à tous !</p>
<p>Bienvenue dans notre Rpg, les membres du staff est composés de Haruka, Crel, Hina ☻ et Miou65. Si jamais vous avez un problème ou que vous ne comprenez pas n'hésitez pas à venir nous demandez de l'aide. </p>
</div>
Oki alors hum prend celui qu'il y a deja parce que j'ai pas trop le temps pour le graph alors je vais le prendre comme il est deja ^^
J'aurais besoin d'une image déjà prête, s'il-te-plaît. Qui ressemble à celle de l'exemple : c'est-à-dire, déjà redimensionnée, travaillée, avec un emplacement pour le cadre de texte. Soit l'image finale. Je veux bien me charger de faire le codage, mais le travail graphique est à ta charge !
tu em diras quand tu pourras le fair et hum si tu ets capable de laisser les motif japonais quil y a sut le truck jadorerais trop ^^
Beuhh je suis que trop nul je n'y arrive pas alors je voudrais te demander un petit service si cela ne te dérenge pas je voudrais que tu puisse me mettre ce menu sur mon blog d'anime ?
Je t'ai arrangé tout ça Kisa !
HTML
<div class="majtest">
<div class="tesssst2" style="height: 132px; width: 300px; overflow-x: auto; overflow-y: auto;">-Nouveaux codes -Rubrique de musique ajoutée -Théme changé -Nouvelle organisation -Fiches de vocaloids éditées/ajoutées Anniversaires : 13 Craspou.Chan</div>
</div>
CSS
.majtest {
background-image: url('http://ekladata.com/jewelnana.ek.la/perso/Sans-titre-74.png');
background-repeat: no-repeat;
height: 161px;
width: 503px;
}
.tesssst2 {
position: relative; top: 18px; left: 218px;
}
ça fonctionne pas chez noi D:
Voici mes codes :
<div style="height: 132px; width: 300px; overflow-x: auto; overflow-y: auto;"> </div>
<div style="height: 132px; width: 300px; overflow-x: auto; overflow-y: auto;">-Nouveaux codes -Rubrique de musique ajoutée -Théme changé -Nouvelle organisation -Fiches de vocaloids éditées/ajoutées Anniversaires : 13 Craspou.Chan</div>
<div class="majtest"> </div>
<div class="tesssst2"> </div>
~
.majtest {
background-image: url(http://ekladata.com/jewelnana.ek.la/perso/Sans-titre-74.png);
background-repeat: no-repeat;
height: 161px;
width: 503px;
}.tesssst2 {
position: relative; top: 18px; left: 4px;
}
Ton texte sera écrit à l'endroit où il est écrit VOTRE TEXTE dans le code utilisé pour le cadre avec scrollbar. Je rappelle qu'il faut également suivre ce tutoriel : http://portfolio.ek.la/cadre-avec-scrollbar-a4925539 lorsqu'il est cité dans le tutoriel ci-dessus afin de pouvoir mener à bien (et à terme!) son panneau de mises à jour ! :)
pour ce qu'il y a dans le cadre avec scrollbar, ca s'affiche tout seul ou c'est nous qui devons ecrire dedans ??
Il faut que tu crées l'image par tes propres moyens, à l'aide d'un logiciel de graphisme par exemple. Tu ne pourras pas trouver d'image toute faite pour ce genre de chose. Aide-toi de l'image d'exemple utilisée pour le tutoriel :o
je voudrais aussi savoir, je crois que mon image n'est pas adaptée pour ce tuto est ceque tu saurais ou trouver des images qui irraient mieux ! ^^'
Coucou, je blocke sur le code CSS tu pourrais m'aidé ?
Voici mon image :
Merci d'avance ! ^^
Merci beaucoup pour la démarche explicite et plutôt claire ~ J'ai eu parfois des problèmes mais c'était à cause de mon inattention ^^'
145Ho-shiie
Dimanche 28 Octobre 2012 à 20:25
Il faut la créer en suivant cet autre tutoriel http://portfolio.ek.la/cadre-avec-scrollbar-a4925539 :)
143Ho-shiie
Dimanche 28 Octobre 2012 à 13:06
Merci pour ceci ! ^^
Mais j'ai un petit problème ! Je n'ai pas le scrollbox ! C'est normal ?
142✝ Follow ✞
Jeudi 11 Octobre 2012 à 15:18
A la place de :
.pres2 {
position: relative; top: 18px; left: 4px;
}
Tu mets :
.pres2 {
position: relative; top: 18px; left: 200px;
}
:)138MiYoi
Vendredi 10 Août 2012 à 13:01136MiYoi
Vendredi 10 Août 2012 à 12:54
<div style="height: 132px; width: 300px; overflow-x: auto; overflow-y: auto;">Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.<br />Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur. </div>
</div>
</div>
Change les nombres en rouges juste pour voir .. 8D
Je l'avait deja fait c'truc ...mais j'me souvient plus comment %'D
133MiYoi
Vendredi 10 Août 2012 à 12:44
.pres2 {
position: relative; top: 18px; left: 4px;
}
tu remplace left par = right
Et tu remplace le nombre des px pour placer la scrollbar au bon endroit *-* ou laisse si c déjà bien placée ! *-*Déso' j'explique mal XD
Ah d'accord ! *O* 'Fallait préciser, je suis juste les instructions sinon je suis nulle en CSS. 8D
Donc mon CSS :
.pres {
background-image: url( http://data0.ek.la/just-do-it/mod_article48520894_50240a8a41fea.jpg?5891 );
background-repeat: no-repeat;
height: 161px;
width: 503px;
}
.pres2 {
position: relative; top: 18px; left: 4px;
}J'dois changer se qui est dans pres2, top et left c'est sa?
131MiYoi
Vendredi 10 Août 2012 à 12:28
J'parlais du code dans le CSS x')
.majclasse1 {
background-image: url(URL DE L'IMAGE);
background-repeat: no-repeat;
height: Xpx;
widht: Xpx;
}
.scrollbox {
position: relative; top: Xpx; right: Xpx;
}
Dans mon HTLM il y a pas de left ou de right ... regarde :
<div class="pres">
<div class="pres2">
<div style="height: 132px; width: 300px; overflow-x: auto; overflow-y: auto;">Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.<br />Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur. </div>
</div>
</div>
129MiYoi
Vendredi 10 Août 2012 à 12:15
J'ai juste un problème..mon truc avec le scrollbar est à gauche par rapport à l'image. Comment faire pour le mettre à droite? (comme dans le tuto quoi. >w<)
127MiYoi
Samedi 9 Juin 2012 à 10:28Ah pardon, tu as déja répondu, je m'éxcuse >_<...
Tu peut supprimer mes commentaires si tu veux.
Ah oui mes codes :
C.S.S :
.majdaccueil {
background-image: url(http://data0.ek.la/test-stock/mod_article46147957_4fa2a94558cf6.png?4949);
background-repeat:no-repeat;
height: 200px;
width: 450px;
}
.scroolbox{
position: relative; top: 50px; left: 5px;
}H.T.M.L :
<div class="majdaccueil">
<div class="scrollbox">
<div style="height: 140px; width: 290px; overflow-x: auto; overflow-y: auto;"><br />Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.</div>
</div>
</div>J'ai juste un problème, j'aimerais que le Scroolbox soit centré de ma "boîte", j'ai beau chéreché je ne vois pas où je peut changer cela...
Merci d'avance :3 !
122Pooca
Lundi 27 Février 2012 à 20:17
Oui j'ai lue le tuto mais j'ai dut mal a comprendre ^^"
Euh sinon dans le <span style="color: #ff0000;">texte</span> je le remplace par
<div style="height: *px; width: **px;
overflow-x: auto; overflow-y: auto;">VOTRE TEXTE</div> ?
C'est normal car tu n'as pas mis de cadre avec scrollbar (http://portfolio.ek.la/cadre-avec-scrollbar-a4925539) mais tu as mis cela à la place : <span style="color: #ff0000;">texte</span>
Tu dois donc enlever ça et le remplacer par le code d'un cadre avec scrollbar en t'aidant du tutoriel. Es-tu sûre de l'avoir lu entièrement ? Je veux bien aider mais si il y a un article d'écrit ce n'est pas pour rien, cela m'épargne des questions. ^^"
J'suis vraiment endormis moi mdrr tien le voilà
<div class="majbg">
<div class="scrollbox"><span style="color: #ff0000;">texte</span></div>
</div>
.majbg {
background-image: url(http://img15.hostingpics.net/pics/761362CopiedeCopiedeSanstitre.png);
background-repeat: no-repeat;
height: 161px;
width: 503px;
}
.scrollbox {
position: relative; top: 161px; left: 503px;
}Voilà mon code x)
Dit euh j'arrive pas a mettre bien le texte dans l'image ;w;
Pourtant, comme je t'ai prit ton image et que j'ai mit une autre tête que Alois, bah j'arrive pas ;w; puis-je avoir les bonnes "px" ? s'il te plaît ! Merci ! :)
@ichigo-kilari :
Je ne peux pas faire de fond avec deux images différentes. Je pense que c'est deja aimable de ma part de faire vos codes donc j'aimerais bien que vous me donniez une seule et unique image de fond, merci. :)
@xCream :
Le CSS est celui-ci :
.majbg {
background-image: url(http://ekladata.com/mJ001cmt-judu5a4jvQVaIuLUOc/maj.png);
background-repeat: no-repeat;
height: 220px;
width: 484px;
}
.scrollbox {
color: #7c6f62;
position: relative; top: 46px; left: 10px;
}
et le HTML celui-là :
<div class="majbg">
<div class="scrollbox">
<div style="height: 140px; width: 290px; overflow-x: auto; overflow-y: auto;">Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.</div>
</div>
</div>
@Mokoru :
Alors il faut que l'adresse de portfolio reste lisible sur la création. :)105Pooca
Mercredi 22 Février 2012 à 19:30Bonjour, j'ai essayé ton tuto et je ne comprends rien du tout, ça ne marche pas. Tu pourrais me donner les codes à insérer avec cette image : http://ekladata.com/mJ001cmt-judu5a4jvQVaIuLUOc/maj.png ?
je n'y arrive pas du tout, est ce que tu pourrais me le faire avec cette image comme fond :
http://data0.lo.gs/utopiachart/mod_article3821712_16.png?7448
et celle là en image sur le côté :
http://data0.lo.gs/utopiachart/mod_article3323786_2.png?5511
merci bcp :)
Bonjour ça ne marche pas voici le code CSS et HTLM
CSS
mabg {background-image: url(http://data0.cd.st/alicelamalice/mod_html278261_8.png);background-repeat: repeat;height: 604px;width: 193px;}
.scrollbox {position: relative; top: 18px; left: 4px;}HTLM
<div class="majbg">
<div class="scrollbox">
</div>
</div>
moi tout fonctioinne et merci beaucoup pour ce code ! mais j'ai juste une question:
peut on mettre le cadre au milieu de l'article?
Ah ben non, y a encore un problème auquel j'avais pas fait attention en fait.
Donc rectification au niveau du CSS, ça donne :
.mabg {
background-image: url(http://data0.ek.la/dream-cute/mod_article17574839_3.png?1291);
background-repeat: repeat;
height: 161px;
width: 503px;
}
.scrollbox {
position: relative; top: 18px; left: 4px;
}
.magbg {
background-image: http://data0.ek.la/dream-cute/mod_article17574839_3.png?1291;
background-repeat: repeat;
height: 161px;
widht: 503px;
}
.magbg {
position: relative; top: 18px; left: 4px;
}<div class="majbg">
<div class="scrollbox">
</div>
</div>
----------------------------------------------------------
Il y a un problème de base déjà puisque tu a mis magbg dans le CSS et majbg dans le HTML. Ensuite, tu as répété DEUX fois magbg dans ton CSS, ce qui n'est pas bon car dans ton HTML tu as scrollbox, il faut donc que tu remplaces .magbg par un .scrollbox et que tu corriges l'orthographe du premier .magbg en le remplacant par un .majbg.
Deuxième soucis, tu n'as pas mis de cadre avec scrollbar dans ton HTML (Décidemment, ce cadre.), il faut que tu en créer un et il devra s'insérer à cet emplacement :
<div class="majbg">
<div class="scrollbox">
A cet emplacement précis, entouré de <div>.
</div>
</div>
Ce qui nous donne un code final comme ceci :
En noir le CSS et en gris l'HTML :
.mabg {
background-image: http://data0.ek.la/dream-cute/mod_article17574839_3.png?1291;
background-repeat: repeat;
height: 161px;
widht: 503px;
}
.scrollbox {
position: relative; top: 18px; left: 4px;
}
<div class="majbg">
<div class="scrollbox">
<div style="height: 100px; width: 265px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis elit ac mauris tincidunt tempor. Aliquam elementum lectus pulvinar ante tempus ac lobortis urna tristique. Vivamus adipiscing pretium elit. Sed porta fringilla massa. Sed a mi erat. Nam vitae diam felis, ut ultrices massa. Integer nulla sem, volutpat ac rutrum eu, mattis a mi. Donec ac elementum eros. Phasellus fringilla, tortor in adipiscing mattis, magna arcu gravida mi, ac euismod lacus tortor in urna. Duis non sem sed sem sollicitudin posuere. Maecenas tincidunt erat nec odio rutrum malesuada.</div>
</div>
</div>Je n'y arrive pas je compprends pas avec CSS et puis HTML (il y a t-il de erreur)
.magbg {
background-image: http://data0.ek.la/dream-cute/mod_article17574839_3.png?1291;
background-repeat: repeat;
height: 161px;
widht: 503px;
}
.magbg {
position: relative; top: 18px; left: 4px;
}<div class="majbg">
<div class="scrollbox">
</div>
</div>
A première vue déjà je vois qu'il n'y a pas de cadre avec scrollbar dans votre HTML.
C'est voulu ou bien vous avez loupez une étape ? :OBonjour, j'ai un petit problème avec mon code.
Il y a un soucis au niveau du texte qui se positionne à l'inverse de mon code, si ça peut vous aider, voici mon code:
.nomdevotreclass {
background-image: url(http://data0.eklablog.fr/kanon-fukuda/perso/theme/picture.png);
background-repeat: no-repeat;
height: 161px;
widht: 503px;
}
.nomdevotreclass2 {
position: relative; top: 8px; right: 56px;
}
<div class="nomdevotreclass">
<div class="nomdevotreclass2>
<div style=">VOTRE TEXTE</div>
</div>
Le problème vient de ton HTML, tu n'as tout bêtement pas mis de cadre avec scrollbar donc c'est tout à fait normal de ne pas pouvoir écrire.
Il y a un soucis dans le CSS également car je vois .nomdevotreclass mais pas .nomdevotreclass2.
Voici les bons codes.
HTML :
<div class="nomdevotreclass">
<div class="nomdevotreclass2">
<div style="height: 181px; width: 337px; overflow-x: hidden; overflow-y: auto; margin-left: 210px; padding-right: 10px; text-align: right;"><strong><strong><strong><strong><strong></strong></strong></strong></strong></strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero sem, ultrices dignissim convallis non, semper id augue. Fusce mauris quam, malesuada a varius at, pharetra quis arcu. Integer malesuada ornare magna id aliquam. Sed ac varius dolor. Maecenas quis velit lacus. Fusce orci turpis, dignissim ac volutpat dignissim, ornare quis lacus. Ut blandit rutrum nulla, id vulputate sem accumsan sed. Mauris hendrerit purus vel sapien iaculis eu molestie lectus interdum. Suspendisse sed lorem arcu. Nullam ut libero nulla, non commodo purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero sem, ultrices dignissim convallis non, semper id augue. Fusce mauris quam, malesuada a varius at, pharetra quis arcu. Integer malesuada ornare magna id aliquam. Sed ac varius dolor. Maecenas quis velit lacus. Fusce orci turpis, dignissim ac volutpat dignissim, ornare quis lacus. Ut blandit rutrum nulla, id vulputate sem accumsan sed. Mauris hendrerit purus vel sapien iaculis eu molestie lectus interdum. Suspendisse sed lorem arcu. Nullam ut libero nulla, non commodo purus.</div>
</div>
</div>
CSS :
.nomdevotreclass {
background-image: url(http://data0.ek.la/cocktail-srips/mod_article20335386_1.png?2303);
background-repeat: no-repeat;
width: 503px;
height: 200px;
}
.nomdevotreclass2 {
position: relative; top: 9px; right: 46px;
}
.nomdevotreclass {
background-image: url(http://data0.ek.la/cocktail-srips/mod_article20335386_1.png?2303);
background-repeat: no-repeat;
height: 200px;
widht: 503px;
}<div class="nomdevotreclass"> </div>
<div class="nomdevotreclass2"> </div>voila !
Je n'arrive pas a écrire pourtant j'ai revue et revue le code c'est le bon TT^TT... je ne suis tout de même pas très doué pour les codes...
C'est super ! Vraiment merci !
Peut-on changer la couleur de la barre ? Car moi avec le bleu ça fait pas beau du tout ....
Merci du tuto' !!
Long à faire mais le résultat est super ~( J'essaye de trouver un bon emplacement sur D.T )
Peut-être que ton texte n'est pas assez long pour que la scrollbar s'affiche, essaie de rajouter du texte.
Repardon , mais quand j'ai terminé d'écrire dedans , et avoir mis des images , ma scrollbox ne s'affiche pas ToT
Resalut !
Ca marche bien chez moi , mais je n'arrive pas à changer la position , j'ai changé les valeurs Left & Top . mais rien ne change ToT
Help me !
Oh ! Merci pour tous te tutos !!! Depuis le temps que je cherchais comment faire , j'éspère que je pourrais comprendre =)
71Kiwako Elodie
Samedi 1er Octobre 2011 à 17:5969Kiwako Elodie
Samedi 1er Octobre 2011 à 17:54
Oui je suis sur ... sa me mes pas le scolabard ( sa secrit pas comme sa ) et sa m'écrit sa a l'interieur : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis elit ac mauris tincidunt tempor. Aliquam elementum lectus pulvinar ante tempus ac lobortis urna tristique. Vivamus adipiscing pretium elit. Sed porta fringilla massa. Sed a mi erat. Nam vitae diam felis, ut ultrices massa. Integer nulla sem, volutpat ac rutrum eu, mattis a mi. Donec ac elementum eros. Phasellus fringilla, tortor in adipiscing mattis, magna arcu gravida mi, ac euismod lacus tortor in urna. Duis non sem sed sem sollicitudin posuere. Maecenas tincidunt erat nec odio rutrum malesuada.
Non ce n'est pas normal. Es-tu sûre de bien avoir copié le code sans enlever aucun élément ?
@ Mistya : En fait, après avoir bien relu ton CSS, j'y ai trouvé quelques erreurs.
Je les ai corrigée en rouge ci dessous..majbg {
background-image: url(http://data0.lo.gs/heavenly/mod_article5895482_1.png?7697);
background-repeat: no-repeat;
height: 164px;
widht: 500px;
}
.scrollbox {
color: #777ee7;
position: relative; top: 44px; right: 20px;
}Donc maintenant tu peux coller ce code dans ton CSS à la place de l'autre.
J'ai rajouté color: #777ee7; dans le CSS de la scrollbox, il permet en fait de préciser la couleur du texte que tu vas écrire dedans, si tu veux la changer et bien tu change le #777ee7 par le code de la couleur que tu veux.
Aussi, il te faut le HTML, le voici :
<div class="majbg">
<div class="scrollbox">
<div style="height: 97px; width: 266px; overflow: auto; margin-left: 210px; padding-right: 10px; text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis elit ac mauris tincidunt tempor. Aliquam elementum lectus pulvinar ante tempus ac lobortis urna tristique. Vivamus adipiscing pretium elit. Sed porta fringilla massa. Sed a mi erat. Nam vitae diam felis, ut ultrices massa. Integer nulla sem, volutpat ac rutrum eu, mattis a mi. Donec ac elementum eros. Phasellus fringilla, tortor in adipiscing mattis, magna arcu gravida mi, ac euismod lacus tortor in urna. Duis non sem sed sem sollicitudin posuere. Maecenas tincidunt erat nec odio rutrum malesuada.</div>
</div>
</div>
Toutes les valeurs en rouge sont modifiables si tu le souhaites.
Le texte est à gauche ? C'est à dire ?
L'alignement du texte est à gauche ou la boîte dans laquelle le texte est tapé est à gauche ?59Kiwako Elodie
Vendredi 30 Septembre 2011 à 21:42
Bonjour Mikuru!J'ai un souci j'ai réussi a le mettre mais (a l'accueil de min blog) le texte et a gauche et non a droite j'ai mis les mêmes format que toi amis le texte est a gauche :S
Hum je ces que ces culoté de ma part .. Mais pourait tu me le faire ... ? ( je suis vraiment géné la .. :/ )
Mmh, comment veux-tu que je t'aide en fait ?
Tout est expliqué dans le tutoriel je ne peux pas faire mieux..
Je ny arrive pas voici mon code css :
majbg {
background-image: url(http://data0.lo.gs/heavenly/mod_article5895482_1.png?7697);
background-repeat: no-repeat;
height: 201px;
widht: 613px;
}
.scrollbox {
position: relative; top: 18px; left: 4px;
}et apres pour le html j'ai pas compris .... :/ J'aimerais que on m'aide car même avec mon ancien compte je n'avais pas reussis et je reve d'avoir sa ! :/
@ Cherry : C'est bon je t'ai fait ton Maj dans ta rubrique Montages, j'espere que je ne me suis pas trompée sur l'image !
@ Maho : Si tu n'as pas de scrollbar c'est que tu as appliqué une hauteur (height) et que ton texte ne la dépasse pas. Comme il ne la dépasse pas il n'y a pas de scrollbar, il faut que tu rajoute du texte ou que tu réduise la taille du height dans le HTML.
@ Nanou12 : D'accord, 20% alors. Tant mieux si ca marche. ^^
@ Cherry Blossom : Je suis dans Créas mais je ne vois pas d'image.
En effet,mais je t'ai mis la perm 3,donc si tu vas dans gérer les rubriques et si tu cliques sur créas,tu devrais voir:)
Je pense que ça peut-être possible en rajoutant la propriété margin-left: 10%; dans le CSS qui concerne l'image de fond (C'est la class qui correspond au majbg dans le tutoriel). Je ne garantie pas que ca va s'afficher de la même manière chez tout le monde par contre donc à tester.
Moi aussi j'ai le même problem que Kurogane, mais bon, c'est une habitude à prendre de faire ce shift+enter ^^
Mais je le fais souvent, j'vais pas oublier je pense.
Je dois dire que tes tutos me servent énormément pour mon nouveau blog Just For U, qui va ouvrir trèèèèès bientôt ^^ (je vais essayer ce soir :))
Encore mershiiii >O<
34Quelqu'unDimanche 11 Septembre 2011 à 19:54Merci beaucoup Mikuru! Désolé de ne pas t'avoir demander si tu pouvais le faire au comm avant...
Merci encore! :D
ARGH j'y arrive pas ;_;
tu peux me le faire Mikuru? Voici l'image:
http://www.hostingpics.net/viewer.php?id=133577Sanstitre8.png
Je te met la permission 3 :)
Ah oui, j'ai compris quel était le problème. En fait c'est juste une faute de frappe, au lieu de taper seulement sur la touche Entrée pour sauter une ligne il faut maintenir MAJ et ensuite appuyer sur la touche Entrée.
Voila, voila, rien de bien dérangeant. :)
En fin de compte j'ai bien un petit problème , quand je tape entrée , ça me donne un très grand espace --" ...
Avant avoir utiliser " entrée " [ cliquez sur l'image pour l'agrandir ] :
Après avoir utiliser " entrée " [ cliquez sur l'image pour l'agrandir ] :
et j'ai utiliser ce CSS :
.fnpbox {
background-image: url(http://data0.shonenblog.com/fairyteam/mod_article3196328_33.png?4573);
background-repeat: no-repeat;
height: 157px;
widht: 500px;
}
.scroolbox {
position: relative; top: 50px; left: 220px;
}Et ce HTML :
<div class="fnpbox">
<div class="scroolbox">
<div style="height: 89px; width: 275px; overflow: auto; text-align: center;">MON TEXTE</div>
</div>
</div>Je tient à dire que vous faites du super boulot et que ça aide beaucoup tout ces CSS et HTML ^^
Je ne peux pas éditer le CSS avec la permission 2 mais voila le code que tu dois mettre dedans :
.maj {
background-image: url(http://data0.ek.la/portfolio/perso/608639sanstitre.png);
background-repeat: no-repeat;
height: 161px;
width: 503px
}
.scrollbox {
position: relative; top: 32px; right: 65px;
}
Pour le HTML, tu dois aller dans le module "Pour vous" de ton blog et dans la catégorie "De vous".
J'ai deja fait un article hors ligne comportant le HTML, tu n'as plus qu'à mettre le CSS donné plus haut pour le compléter.
Pour l'instant je suis disponible donc je veux bien mais il me faut quand même ton image de base.
Ba quand j'ai tout fait le code html et que voila ces fait je clique sur engistrer ya rien u_u"
Ben oui il ne faut pas enlever les parenthèses. ^^'
Enfin, je suis très contente que ça marche chez vous ! :)
Misu tu au lieu de
background-image:http://data0.ek.la/misu-sato/mod_articles954693_1.png?7726;
du doit mettre
background-image:url (http://data0.ek.la/misu-sato/mod_articles954693_1.png?7726);
Et enlever le "EN" après 300
Et la ?
.homems {
background-image:http://data0.ek.la/misu-sato/mod_articles954693_1.png?7726;
background-repeat: no-repeat;
height: 161px;
widht: 503px;
}
.homems2 {
position: relative; top: 18px; left: 4px;
}
<div class="homems">
<div class="homems2">
<div style="height: 200 px; width: 300 EN px;
overflow-x: auto; overflow-y: auto;">News</div>
</div>
</div>
Excellent Tuto ça marche à la perfection chez moi ... j'ai mit du temps à trouver que ça marche puisque le cadre ne s'affiche pas dans la fenetre d'édition !
Merci Merci Merci
Il y a plusieurs erreurs dans ton code Misu Sato, essaie celui-là pour le CSS :
.homems {
background-image: url(url de l'image de base);
background-repeat: no-repeat;
height: 161px;
widht: 503px;
}
.homems2 {
position: relative; top: 18px; left: 4px;
}
Tu dois remplacer url de l'image de base par l'url de l'image que tu vas utiliser
sinon ça ne va pas marcher.
et ceux-là pour encadrer ta scrollbox :
<div class="homems">
<div class="homems2">
Ici tu dois avoir ton cadre avec scrollbar normalement.
Si tu n'as pas crée de cadre avec scrollbar ca ne risque pas de marcher non plus.
</div>
</div>
C'est super ! J'ai hate de l'utiliser sur mon blog =P Merci Miku pour tous ce supers tutos !
hello , sa marche pas :
voici mon code !
.homems {
: http://data0.ek.la/misu-sato/perso/sans%20titre%2017.gifurl(url de l'image de base);
background-repeat: no-repeat;
height: 161px;
widht: 503px;
}
.homems {
position: relative; top: 18px; left: 4px;
}
<div class="majbg">
<div class="scrollbox">
</div>
</div>Vous devez être connecté pour commenter
La sobriété est la marque de la qualité
Créer mon blog 
MERCI infiniment!
Ça marche à la perfection >///< bonne journée et encore merci!