Boîte de texte avec barre de défilement (messages) Bouton_activeBoîte de texte avec barre de défilement (messages) Bouton_hoverBoîte de texte avec barre de défilement (messages) Fb-hoverBoîte de texte avec barre de défilement (messages) Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
Boîte de texte avec barre de défilement (messages) EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Boîte de texte avec barre de défilement (messages) EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Boîte de texte avec barre de défilement (messages) EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Boîte de texte avec barre de défilement (messages) EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Boîte de texte avec barre de défilement (messages) EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Boîte de texte avec barre de défilement (messages) EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Boîte de texte avec barre de défilement (messages) EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Boîte de texte avec barre de défilement (messages) EmptyMar 07 Fév 2023, 08:40 par Oxtran

-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache Runner
69.99 € 139.99 €
Voir le deal

Partagez
 

Boîte de texte avec barre de défilement (messages)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2, 3  Suivant
http://www.css-actif.com
Orange
Orange
RocketMan
RocketMan

Masculin Messages : 3086



Boîte de texte avec barre de défilement (messages) Empty
C'est une excellent tutoriel Furase, clair et bien expliqué.

Félicitations. cheers
MessageSujet: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyMer 09 Juin 2010, 17:47
Revenir en haut Aller en bas
http://...
Haze
{ Membre }
{ Membre }

Masculin Messages : 7



Boîte de texte avec barre de défilement (messages) Empty
Bonjour,

Tout d'abord, merci pour ce tuto, que je cherchais, jusqu'à présent, en vain Smile

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.
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyMar 06 Juil 2010, 15:09
Revenir en haut Aller en bas
http://kiss-university.forumactif.org/
Ikø'
Ikø'
Pika'Ghøst~ Maîtresse des pelles ~
Pika'Ghøst
~ Maîtresse des pelles ~

Féminin Messages : 3193



Boîte de texte avec barre de défilement (messages) Empty
Il n'Y a simplement pas assez de texte Wink

Essaie en mettant des bla bla bla en quantité industrielle entre les div, et la barre de défilement devrait apparaître.
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyMar 06 Juil 2010, 15:15
Revenir en haut Aller en bas
http://...
Haze
{ Membre }
{ Membre }

Masculin Messages : 7



Boîte de texte avec barre de défilement (messages) Empty
Merci pour ton message Smile

Malheureusement, ça ne marche toujours pas...

Spoiler:
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyMar 06 Juil 2010, 15:20
Revenir en haut Aller en bas
http://kiss-university.forumactif.org/
Ikø'
Ikø'
Pika'Ghøst~ Maîtresse des pelles ~
Pika'Ghøst
~ Maîtresse des pelles ~

Féminin Messages : 3193



Boîte de texte avec barre de défilement (messages) Empty
Et en mettant ceci par exemple dans le CSS à la place, ça change quelque chose?

Code:
.boite {
height: 100px;
overflow: auto;
}
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyMar 06 Juil 2010, 15:22
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Boîte de texte avec barre de défilement (messages) Empty
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'
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyMar 06 Juil 2010, 15:25
Revenir en haut Aller en bas
http://...
Haze
{ Membre }
{ Membre }

Masculin Messages : 7



Boîte de texte avec barre de défilement (messages) Empty
Owi, ça MARCHE !!

MERCI ! Merci, grands dieux Smack Smack

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 ! Boîte de texte avec barre de défilement (messages) 189128
Et bonne fin de soirée !
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyMar 06 Juil 2010, 15:33
Revenir en haut Aller en bas
http://kiss-university.forumactif.org/
Ikø'
Ikø'
Pika'Ghøst~ Maîtresse des pelles ~
Pika'Ghøst
~ Maîtresse des pelles ~

Féminin Messages : 3193



Boîte de texte avec barre de défilement (messages) Empty
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
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyMar 06 Juil 2010, 15:35
Revenir en haut Aller en bas
Babi-Usagi
{ Membre }
{ Membre }

Féminin Messages : 12



Boîte de texte avec barre de défilement (messages) Empty
[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:

Ma page d'accueil :

Spoiler:
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 08 Juil 2010, 05:21
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Boîte de texte avec barre de défilement (messages) Empty
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'
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 08 Juil 2010, 05:36
Revenir en haut Aller en bas
Babi-Usagi
{ Membre }
{ Membre }

Féminin Messages : 12



Boîte de texte avec barre de défilement (messages) Empty
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 ?
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 08 Juil 2010, 05:43
Revenir en haut Aller en bas
Babi-Usagi
{ Membre }
{ Membre }

Féminin Messages : 12



Boîte de texte avec barre de défilement (messages) Empty
Edit : en fait ça marche c'est bon merci beaucoup Very Happy
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 08 Juil 2010, 05:46
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Boîte de texte avec barre de défilement (messages) Empty
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 Wink
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 08 Juil 2010, 05:48
Revenir en haut Aller en bas
http://ishtar.forum-actif.eu/forum.htm
Denehbe
Denehbe
{ Membre }
{ Membre }

Masculin Messages : 9



Boîte de texte avec barre de défilement (messages) Empty
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 ._.
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyDim 11 Juil 2010, 13:38
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Boîte de texte avec barre de défilement (messages) Empty
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'
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyDim 11 Juil 2010, 16:20
Revenir en haut Aller en bas
http://ishtar.forum-actif.eu/forum.htm
Denehbe
Denehbe
{ Membre }
{ Membre }

Masculin Messages : 9



Boîte de texte avec barre de défilement (messages) Empty
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/
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyLun 12 Juil 2010, 06:09
Revenir en haut Aller en bas
http://www.twilight-History.twilight-mania.com
vaaléeriiee
vaaléeriiee
{ Membre }
{ Membre }

Féminin Messages : 30



Boîte de texte avec barre de défilement (messages) Empty
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!
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptySam 11 Sep 2010, 01:30
Revenir en haut Aller en bas
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Boîte de texte avec barre de défilement (messages) Empty
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'
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptySam 11 Sep 2010, 08:31
Revenir en haut Aller en bas
http://sweet-yuri.forumactif.com/
kikou Nakami
kikou Nakami
{ Membre }
{ Membre }

Féminin Messages : 6



Boîte de texte avec barre de défilement (messages) Empty
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.
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyMar 09 Nov 2010, 12:34
Revenir en haut Aller en bas
http://ilovelagrsjeuderole.forumouf.com/index.htm
Miss-GRS
{ Membre }
{ Membre }

Féminin Messages : 54



Boîte de texte avec barre de défilement (messages) Empty
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.Embarassed
J'éspère que vous avez compris ce que je veux dire,
merci d'avance,

Elisa.
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 11 Nov 2010, 10:47
Revenir en haut Aller en bas
Invité
Invité




Boîte de texte avec barre de défilement (messages) Empty
Tu mets une div dans le sujet, tien moi au courant si ça a marché! Wink
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 11 Nov 2010, 10:59
Revenir en haut Aller en bas
http://ilovelagrsjeuderole.forumouf.com/index.htm
Miss-GRS
{ Membre }
{ Membre }

Féminin Messages : 54



Boîte de texte avec barre de défilement (messages) Empty
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 ?
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 11 Nov 2010, 11:03
Revenir en haut Aller en bas
Invité
Invité




Boîte de texte avec barre de défilement (messages) Empty
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à Wink


Dernière édition par Teal le Jeu 11 Nov 2010, 11:11, édité 1 fois
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 11 Nov 2010, 11:08
Revenir en haut Aller en bas
http://ilovelagrsjeuderole.forumouf.com/index.htm
Miss-GRS
{ Membre }
{ Membre }

Féminin Messages : 54



Boîte de texte avec barre de défilement (messages) Empty
Merci,
en fait le code marche mais il n'y a aucun cadre qui s'affiche.
Il faut que je tappe plus de texte ?
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 11 Nov 2010, 11:10
Revenir en haut Aller en bas
Invité
Invité




Boîte de texte avec barre de défilement (messages) Empty
Si tu veux un cadre sur ta boîte, il faut modifier ton CSS:

Code:
 .boite
{
  border: 2px black;
  height: 300px ;
}
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) EmptyJeu 11 Nov 2010, 11:13
Revenir en haut Aller en bas
Contenu sponsorisé




Boîte de texte avec barre de défilement (messages) Empty
MessageSujet: Re: Boîte de texte avec barre de défilement (messages)   Boîte de texte avec barre de défilement (messages) Empty
Revenir en haut Aller en bas
 

Boîte de texte avec barre de défilement (messages)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 3Aller à la page : 1, 2, 3  Suivant

 Sujets similaires

-
» Encadrement du texte avec ombre (messages)
» Créer une barre de défilement (messages)
» Bloc avec barre de défilement
» Votre texte dans une boîte transparente (messages)
» Description des forums avec liens et barre de défilement

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Corbeille :: Archives de CSSActif :: Archives 2009~2011-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forumactif.com