[CSS] overflow : scroll
Résolu
kij_82
Messages postés
4089
Date d'inscription
Statut
Contributeur
Dernière intervention
-
Sucré Salé -
Sucré Salé -
Bonjours,
J'ai un ami qui me demandais cela, mais vu que ca fait pas mal de temp que je ne touche plus aux mise en page et que j'ai un peu une mémoire de poisson rouge... je me demandais si certain d'entre vous pouvais m'en dire plus sur son problème.
Voilà, dans un site, en page d'intro, il veut faire un petit encadré avec du texte dedans. L'encadré ne doit pas dépasser une certaine taille et donc il faut que les scrollbar s'active en fonction de la longueur du contenu.
Voici son code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>page d'acceuil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
p{
heigth: 100px;text-align:justify;
}
.coupe{
overflow:scroll
}
</style>
</head>
<body>
<p class="coupe">
<br />
<font color="#ffffff">
// Un texte Bidon d'un certain nombre de lignes
</font>
<br />
</p>
</body>
</html>
Voilà, le résultat de ce code est que le texte apparait bien mais l'encadré est élargi à l'ensemble du texte et devient donc trop grand - au lieu de faire les taille indiquées dans la classe.
Sauriez vous pourquoi et comment remédier à cela ?
Merci d'avance à vous. :)
J'ai un ami qui me demandais cela, mais vu que ca fait pas mal de temp que je ne touche plus aux mise en page et que j'ai un peu une mémoire de poisson rouge... je me demandais si certain d'entre vous pouvais m'en dire plus sur son problème.
Voilà, dans un site, en page d'intro, il veut faire un petit encadré avec du texte dedans. L'encadré ne doit pas dépasser une certaine taille et donc il faut que les scrollbar s'active en fonction de la longueur du contenu.
Voici son code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>page d'acceuil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
p{
heigth: 100px;text-align:justify;
}
.coupe{
overflow:scroll
}
</style>
</head>
<body>
<p class="coupe">
<br />
<font color="#ffffff">
// Un texte Bidon d'un certain nombre de lignes
</font>
<br />
</p>
</body>
</html>
Voilà, le résultat de ce code est que le texte apparait bien mais l'encadré est élargi à l'ensemble du texte et devient donc trop grand - au lieu de faire les taille indiquées dans la classe.
Sauriez vous pourquoi et comment remédier à cela ?
Merci d'avance à vous. :)
7 réponses
je te conseille un overflow:auto;
Comme ça si le contenu ne dépasse pas du cadre, la barre de défilemenent n'apparaît pas.
Comme ça si le contenu ne dépasse pas du cadre, la barre de défilemenent n'apparaît pas.
Il semble que la propriété "overflow:auto" ne fonctionne pas sous iphone ipod et ipad.
Sinon cela est la meilleur solution, ça marche même sous IE.....
Sinon cela est la meilleur solution, ça marche même sous IE.....
C'est un peu vieux, mais quand même. :p
Il manque simplement le point virgule à la fin je pense. ^^
Et en passant la balise font c'est bof. Il faudrait plutot définir la couleur dans le css :
coupe{
overflow:scroll
}
Il manque simplement le point virgule à la fin je pense. ^^
Et en passant la balise font c'est bof. Il faudrait plutot définir la couleur dans le css :
p {
heigth: 100px;
text-align: justify;
}
.coupe {
overflow: scroll;
color: white;
}
Pareil que SitaJONY... j'arrive quelques années après la guerre ^^
Mais bon j'voulais juste remercie Artis.psyko pour sa réponse. Je sais pas si elle a aidé la personne qui a posté en premier, mais moi ça m'aide beaucoup.
Mon problème c'est que j'avais une table trop grande qui obligeait mon <div> à passer en dessous du reste quand elle était affichée.
Maintenant avec overflow: scroll j'ai une scrollbar et ma table reste en place ^^
Mais bon j'voulais juste remercie Artis.psyko pour sa réponse. Je sais pas si elle a aidé la personne qui a posté en premier, mais moi ça m'aide beaucoup.
Mon problème c'est que j'avais une table trop grande qui obligeait mon <div> à passer en dessous du reste quand elle était affichée.
Maintenant avec overflow: scroll j'ai une scrollbar et ma table reste en place ^^
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
salut,
ton message date de loin mais je suis tombée dessus et ne peut m'empêcher d'y répondre...
ce n'est pas 'heigth' mais 'height' qu'il faut ! lol
allez, bye
ton message date de loin mais je suis tombée dessus et ne peut m'empêcher d'y répondre...
ce n'est pas 'heigth' mais 'height' qu'il faut ! lol
allez, bye
Houa un vrai hasard que je passe ici mdr je sais même plus pourquoi je suis venu lol.
Je savais pas qu'on pouvait ajouter un scrollbar dans une balise, je savais qu'on pouvais supprimer le scrollbar d'une page mais pas ajouter/supprimer d'un objet DIV...
Sa va beaucoup m'aider pour mon Chat maintenant jèspère qu'on peut récuperer la valeur du scroll même pour un DTD Strict XHTML 1.0...
overflow tout simplement et moi qui galerais à mettre le chat en pleine ecran et supprimer le scrollbar de la page pour pas qu'on voit les conversations dépasser XD... Bon je me comprend merci :D
Je savais pas qu'on pouvait ajouter un scrollbar dans une balise, je savais qu'on pouvais supprimer le scrollbar d'une page mais pas ajouter/supprimer d'un objet DIV...
Sa va beaucoup m'aider pour mon Chat maintenant jèspère qu'on peut récuperer la valeur du scroll même pour un DTD Strict XHTML 1.0...
overflow tout simplement et moi qui galerais à mettre le chat en pleine ecran et supprimer le scrollbar de la page pour pas qu'on voit les conversations dépasser XD... Bon je me comprend merci :D