| Boîte de texte avec barre de défilement (messages) | |
|
|
Orange
RocketMan
Messages : 3086
| C'est une excellent tutoriel Furase, clair et bien expliqué. Félicitations. | | |
|
| |
Haze
{ Membre }
Messages : 7
| Bonjour, Tout d'abord, merci pour ce tuto, que je cherchais, jusqu'à présent, en vain Je l'ai testé, et malheureusement, rien n'apparaît ! Je l'ai pourtant suivi à la lettre... - Spoiler:
- Spoiler:
(Peut-être qu'il ne marche pas sur les pages d'accueil ?) - Spoiler:
Ai-je fait une erreur, oublié quelque chose ? Merci d'avance pour votre aide. | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Il n'Y a simplement pas assez de texte Essaie en mettant des bla bla bla en quantité industrielle entre les div, et la barre de défilement devrait apparaître. | | |
|
| |
Haze
{ Membre }
Messages : 7
| Merci pour ton message Malheureusement, ça ne marche toujours pas... - Spoiler:
| | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Et en mettant ceci par exemple dans le CSS à la place, ça change quelque chose? - Code:
-
.boite { height: 100px; overflow: auto; } | | |
|
| |
Furase
{ Membre actif }
Messages : 312
| Bonjour ^^
Ton css et ton html me semblent bon, et je pense que la réponse donnée par Iko est l'explication à ton problème. Tu as défini une hauteur de 300px pour ta boîte (avec height) donc la barre n'apparaîtra que si tu mets une hauteur de texte supérieure à 300 pixels. Tu peux bien sûr changer la hauteur de ta boîte si tu veux ^^ Pour tester ton code, rajoutes dans le css par exemple un background-color, que tu pourras supprimer ensuite. S'il apparaît, c'est que le problème venait bien de la hauteur. S'il n'apparaît pas... je t'accorde qu'il va falloir chercher ailleurs.
Fu' | | |
|
| |
Haze
{ Membre }
Messages : 7
| Owi, ça MARCHE !! MERCI ! Merci, grands dieux Je viens aussi de réaliser que j'aurais dû superposer mes BLABLA au lieu de les faire se succéder sur la même ligne... Bref. Non, mon PA n'est pas un cas, et j'en suis très heureux. Merci encore pour votre aide à toutes les deux ! Et bonne fin de soirée ! | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| De rieen =D En résumé c'est comme Furase a dit, tu n'avais pas assez de texte pour remplir les 300px de hauteur, donc il fallait simplement réduire la hauteur =D | | |
|
| |
Babi-Usagi
{ Membre }
Messages : 12
| [center]Bonjour, ça me fait exactement pareil que pour Haze sauf que j'ai essayé ce qui a été dit et que malheureusement ça n'y change toujours rien. Mon CSS : - Spoiler:
- Code:
-
a:hover { text-decoration: none !important; }
a:hover{ letter-spacing : 2px; }
a { font-variant: small-caps; }
a { text-decoration: none; }
.mystats_fa{ padding: 5px; float:right; font-family: verdana; font-size: 10px; font-weight: bold; }
.statistiques{ border:0px; background-image: url("http://img208.imageshack.us/img208/598/qeel2.jpg"); background-repeat: no-repeat; background-position: left; height:270px;}
.groupes{ background-color:#d0c9d3; border: 1px #d0c9d3 dotted; -moz-border-radius : 5px 5px 5px 5px; height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px; font-size:15px;font-weight: bold;text-align:center; text-decoration: none !important;}
.listlastconnected td { background-color: transparent; }
.vignettes {-moz-border-radius:7px; background-color: #ffffff; padding-right:10px; padding-left:10px; padding-bottom: 3px; padding-top:3px;}
a.infobulle { position: relative; }
a.infobulle span { display: none; /* ceci masque l'infobulle */ } a.infobulle:hover { background: none; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
} a.infobulle:hover span { display: inline; /* ceci affiche l'infobulle */ position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 5px; /* on positionne notre infobulle */ left: 15px;
background: #d0c9d3; /* arrière-plan de l'infobulle */
color: #523660; /* texte dans l'infobulle */ padding: 3px;
/* bordures de votre infobulle*/ border: 1px dotted white; border-left: 1px dotted white; }
.boite { height: 200px ; weight: 450px ; padding: 10px ; border: #523660 ; text-align: justify; color: #523660 ; overflow: auto; background-image : http://img269.imageshack.us/img269/9574/fond2r.jpg;
}
Ma page d'accueil : - Spoiler:
- Code:
-
<TABLE width="100%"> <TBODY> <TR> <TD style="TEXT-ALIGN: center; BORDER-RIGHT: #523660 1px dashed" rowSpan=2 width="25%"> <P><IMG src="http://img251.imageshack.us/img251/2653/partenaires.jpg"></P> <P> </P> <P><FONT face=Georgia>- Chevaux au vent <BR></FONT></P> <P><FONT face=Georgia>Pour toute demande de partenariat, merci d'envoyer un MP à un administrateur.</FONT></P> <P><FONT face=Georgia></FONT> </P> <P><FONT face=Georgia>Nous lier :</FONT></P> <P> </P> <P><IMG src="http://img718.imageshack.us/img718/4993/logo88x31.jpg"></P></TD> <TD style="BORDER-BOTTOM: #523660 1px dashed" width="75%" colSpan=3> <DIV align=center><IMG src="http://img691.imageshack.us/img691/1103/bienvenuec.jpg"></DIV> <DIV class=boite>BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA. BLA.</DIV></TD></TR> <TR> <TD style="TEXT-ALIGN: center; BORDER-RIGHT: #523660 1px dashed" width="25%"> <P> <IMG src="http://img685.imageshack.us/img685/5058/recherches.jpg"><BR></P> <P><BR>... <BR>... <BR>...</P></TD> <TD style="TEXT-ALIGN: center; BORDER-RIGHT: #523660 1px dashed" width="25%"><A class=infobulle href="http://equitation-66.forumactif.com/admin/index.forum?part=themes&sub=index&extended_admin=1&sid=08d981f18706d1576bf7670b97501e6f#"></A> <P><IMG src="http://img689.imageshack.us/img689/5702/lestaff.jpg"> </P> <P> <A class=infobulle href="#"><IMG src="http://img34.imageshack.us/img34/6276/anteo.jpg"> <SPAN><IMG src="http://img257.imageshack.us/img257/9568/ante2.jpg" < span></A></SPAN> <A class=infobulle href="#"><IMG src="http://img340.imageshack.us/img340/1447/clmenciiii2.jpg"> <SPAN><IMG src="http://img686.imageshack.us/img686/5926/clmenciiii.jpg" < span></A> </SPAN></P></TD> <TD style="TEXT-ALIGN: center" width="25%"> <P><IMG src="http://img25.imageshack.us/img25/3654/crdits.jpg"><BR></P> <P>Forum by ... <BR>Admins : ... <BR>Design by ... <BR>Codage by ...</P></TD></TR></TBODY></TABLE></SPAN>
| | |
|
| |
Furase
{ Membre actif }
Messages : 312
| Bonjour !
Je suis sûr que si dans ton css tu mettais "width" au lieu de "weight" et que tu inscrivais dans ton background url("adresse") au lieu de mettre directement l'adresse du l'image, ça irait tout de suite beaucoup mieux ^^ Pour le reste... rajoutes du texte, quitte à mettre des retours à la ligne, et tu verras bien ce qui se passe ^^
Dans la partie html, pense à sauter des lignes dans ton code... Aucun retour à la ligne n'apparaîtra même si tu le fais, car seul le br / donne cet ordre, et ce sera bien plus facile à relire ^^ Essaie de décaler tes lignes également, toujours pour la même raison. Les balises s'écrivent en minuscules, et n'oublie pas les guillemets autour de chaque valeur introduite avec =, quelle qu'elle soit.
Fu' | | |
|
| |
Babi-Usagi
{ Membre }
Messages : 12
| Ok ok merci beaucoup, je suis un peu intattentive xD. Par contre c'est normal que les guillements qui entourent boite dans la partie html s'en aillent tout le temps ? | | |
|
| |
Babi-Usagi
{ Membre }
Messages : 12
| Edit : en fait ça marche c'est bon merci beaucoup | | |
|
| |
Furase
{ Membre actif }
Messages : 312
| Heu... je dirai oui et non. Je n'ai jamais fait attention à la présence des guillemets en particulier, puisque je modifie toujours mes codes via un logiciel de codage et jamais directement sur le forum, mais je sais qu'il a tendance à faire certaines choses... comme justement virer les décalages entre les lignes et réécrire les balises. Donc non ce n'est pas normal dans le sens où ça ne devrait pas faire ça... Et oui ça l'est parce que ça le fait pour tout le monde. Le seul conseil que je puisse te donner est de ne pas faire ton code directement sur le forum (même sur le bloc notes je dirai que c'est plus pratique... Mais il y a pas mal de logiciels gratuits si tu préfères), et surtout de les enregistrer ailleurs. Fu' EDIT : de rien, mais évites les double-posts s'il te plait | | |
|
| |
Denehbe
{ Membre }
Messages : 9
| Bonjour ._. Alors, j'ai suivi le tutoriel et j'ai cependant un petit problème, enfin... Presque. Je suis sur Google Chrome et tout va bien. La fonction "auto" mais juste une barre vertical pour nos partenaires et c'est juste ce qu'il faut. Cependant, j'ai remarqué que sur Firefox, il met aussi une barre horizontal alors que ce n'est pas du tout nécessaire =/ (J'ai remarqué ça aussi bien depuis mon ordinateur que sur celui de mon admin). J'ai tenté de changer la largeur de la boite pour voir si cela changeait quelque chose mais ça n'a rien modifié T_T Voilà les codes que j'ai utilisé : CSS : - Code:
-
.ami { height: 70px ; weight: 370px ; overflow: auto ; border: 2px solid #000000 ; } Et pour le html sur la page d'accueil : - Code:
-
<div style="text-align: center; background-color: rgb(0, 0, 0); color: rgb(211, 211, 211);">Partenaires</div><div align="justify"><br><div class="ami"><div style="text-align: center;"> LOGOS des partenaires </div><br></div></div> (Hum... J'espère que ça suffit, je ne sais pas vraiment comment on procède pour ce genre de problème) Accessoirement (ce n'est pas vraiment un problème), j'ai remarqué que depuis que j'ai placé ce code, une barre de défilement apparait lorsqu'on utilise la balise "code" Dans tout les cas, merci pour vos conseils et tutoriels, c'est très instructif ._. | | |
|
| |
Furase
{ Membre actif }
Messages : 312
| Bonjour ! Tiens tu notes tes couleurs en rgb, ce n'est pas courant XD Pourquoi as-tu placé plusieurs div consécutifs dans ton html ? Pour aligner ton texte, il suffisait de rajouter ta propriété dans ton css. - Citation :
- .ami
{ height: 70px ; weight: 370px ; overflow: auto ; border: 2px solid #000000 ; text-align: center ; } - Code:
-
<div style="text-align: center; background-color: rgb(0, 0, 0); color: rgb(211, 211, 211);">Partenaires</div> <br /> <div class="ami"> LOGOS des partenaires </div> Par ailleurs, tu peux supprimer ton br / entre les deux divs, et à la place mettre un margin-bottom pour laisser de l'espace entre tes deux lignes. Ainsi que créer une classe titre pour ne pas avoir à mettre ton css directement dans le html. Essaie déjà avec ceci. Si ça ne fonctionne pas, remplace overflow par overflow-y, comme indiqué dans mon spoiler "pour aller plus loin". Pour la barre de défilement qui apparait dans la balise code, je ne peux pas te répondre. Je sais que ça le fait sur d'autres forums, mais j'ignore l'origine exacte du problème. Essaie toujours de rajouter deci : - Code:
-
.code { overflow: visible !important ; } ou si ça en change rien : - Code:
-
.code div { overflow: visible !important ; } Si ta barre de défilement dans ta balise code est verticale, essaie plutôt de remplacer overflow par overflow-y pour ne pas déformer tes pages dans le cas où le contenu du code soit long. Fu' | | |
|
| |
Denehbe
{ Membre }
Messages : 9
| Merci pour ta réponse si rapide ^^ En vérité, à la base, mon code n'était pas avec les rgb mais quand je l'ai copier/coller dans le champs de forumactif, il a changé et s'est mis en rgb ^^' En fait, l'alignement est un reste de l'ancien code, avant que je ne mette en pratique ton Tutoriel =) Je vais suivre ton conseil, merci /o/
Enfin, pour en venir à mon problème. Il semble réglé. J'ai regardé coté Firefox, sur mon ordinateur et ça marche. Du coté de mon Admin, il semble que ça ne fonctionne pas encore mais je suppose que c'est firefox qui a un petit problème de son coté =/
Merci donc d'avoir réglé notre problème \o/ | | |
|
| |
vaaléeriiee
{ Membre }
Messages : 30
| Moi j'ai un blème je peux pas le mettre dans un postes. Sa ne marche pas. Enfait je ne sais pas ou mettre le " overflow " Ouais, voir...
Du moins, si quelqu'un pourrait m'aider sa serait très gentil! | | |
|
| |
Furase
{ Membre actif }
Messages : 312
| Bonjour ^^ Le overflow est la propriété qui sert à placer la barre de défilement. Il est à placer avec les autres propriétés se rattachant à ta boîte. Donc, si tu es administrateur et veut créer une classe, il suffit de mettre le overflow dans la classe de la boîte. Si tu es simple utilisateur et n'a pas accès au css du site, il faut mettre le overflow directement dans ton code html en utilisant style. Dans les deux cas, il ne faut pas oublier de définir une hauteur à la boîte, sans quoi la barre ne peut pas apparaître. En créant une classe (que j'appellerai boite) : - Code:
-
CSS:
.boite { height: 50px; overflow: auto; }
HTML:
<div class="boite">texte</div> En plaçant tout directement dans le html : - Code:
-
<div style="height: 50px; overflow: auto;">texte</div> J'ai mis ici 50px, mais tu peux bien sûr mettre la valeur de ton choix. Tu peux également personnaliser ta boîte comme tu le souhaite, en rajoutant des propriétés dans le css (que ce soit dans la classe ou dans le style). Fu' | | |
|
| |
kikou Nakami
{ Membre }
Messages : 6
| Coucou ! Je voudrais savoir s'il n'y avait pas un moyen de changer la couleur de la barre de défilement.
Merci d'avance. | | |
|
| |
Miss-GRS
{ Membre }
Messages : 54
| Bonjour, je suis administratrice/fondatrice sur mon forum, alors je voulais savoir si c'était possible de le faire dans un sujet ? Car j'ai essayé je n'arrive pas à le faire fonctionner. J'éspère que vous avez compris ce que je veux dire, merci d'avance, Elisa. | | |
|
| |
Invité Invité
| Tu mets une div dans le sujet, tien moi au courant si ça a marché! | | |
|
| |
Miss-GRS
{ Membre }
Messages : 54
| Merci de m'avoir répondu, mais comme je ne suis pas très douée, est-ce que, si ça ne te dérange pas, tu peux me passer le code avec la div s'il te plaît ? | | |
|
| |
Invité Invité
| A mettre dans ton sujet: - Code:
-
<div style="height:300px;"> on mettra notre texte ici </div> Dans ton CSS: - Code:
-
.boite { height: 300px ; } Fais attention, pour que ça marche, il faut impérativement avoir activé le HTML: Général > Messages et Emails > Configuration > Autoriser le HTML et dans ton profil: Profil > Préférences > Toujours autoriser le HTML : oui.Voilà |
Dernière édition par Teal le Jeu 11 Nov 2010, 11:11, édité 1 fois | |
|
| |
Miss-GRS
{ Membre }
Messages : 54
| Merci, en fait le code marche mais il n'y a aucun cadre qui s'affiche. Il faut que je tappe plus de texte ? | | |
|
| |
Invité Invité
| Si tu veux un cadre sur ta boîte, il faut modifier ton CSS: - Code:
-
.boite { border: 2px black; height: 300px ; } | | |
|
| |
Contenu sponsorisé
| |
| |
| Boîte de texte avec barre de défilement (messages) | |
|