NPDS : Gestion de contenu et de communauté
Content & Community Management System (CCMS) robuste, sécurisé, complet, performant, parlant vraiment français, libre (Open-Source) et gratuit.
19 visiteur(s) et 1 membre(s) en ligne.
Suivre le code
Autres infos
Activité du Site
Pages vues depuis 25/05/2001 : 111 383 486
- Nb. de membres 8 701
- Nb. d'articles 1 695
- Nb. de forums 26
- Nb. de sujets 8
- Nb. de critiques 92
Index du forum »» Mods, Trucs, Astuces »» articles trop longs: simulation de frames en CSS
articles trop longs: simulation de frames en CSS#17405
5Contributeur(s)
3 Modérateur(s)
toba
J'ai personnellement une ptite phobie: Quand un article est trop long, je trouve inélégant voir "angoissant" de scroller pendant des heures, et de perdre tout l'habillage du site pour me retrouver dans les abysses du fond du tréfond de mon navigateur...
Bref, voici une petite astuce pour simuler une "frame" scrollable qui contient l'article et seulement l'article, gardant tout le reste intact, y compris le titre de l'article ou les notes du bas...
Cette astuce est basée sur la version CSS/XHTML de "Permanent Double Side" faite par Tito.
Dans votre feuille de stlye, créez un stlye "article-contenu", (ainsi que quelques autres que vous mettrez à votre sauce, voir la liste dans la deuxième partie concernant "detail-news.html" plus bas) et donnez-lui des parametres du genre:
div.article-contenu {
background: none transparent;
color: #FFF;
padding: 3px;
width: auto;
height: 338px;
overflow: auto;
}
où "height" sera la taille de la "pseudo-frame" du contenu de votre article, et overflow: auto génerera la fameuse pseudo-frame.
2) Editer le fichier detail-news.html; de sorte qu'il ressemble à ceci:
<div class="article">
<div class="article-entete">
<div class="article-titre">!N_titre!<hr /></div>
<div class="article-infos">Écrit par !N_emetteur!. Posté le !N_date! par !N_publicateur!</div>
</div>
<div class="article-sujet">!N_sujet!</div></div>
<div class="article-contenu">
!N_texte!
</div>
Ben... voila. C'est tout, et ça marche. Bon, ça casse pas trois pattes à un canard je sais bien, mais moi ca soulage mon angoisse phobique :-D
Bref, voici une petite astuce pour simuler une "frame" scrollable qui contient l'article et seulement l'article, gardant tout le reste intact, y compris le titre de l'article ou les notes du bas...
Cette astuce est basée sur la version CSS/XHTML de "Permanent Double Side" faite par Tito.
Dans votre feuille de stlye, créez un stlye "article-contenu", (ainsi que quelques autres que vous mettrez à votre sauce, voir la liste dans la deuxième partie concernant "detail-news.html" plus bas) et donnez-lui des parametres du genre:
div.article-contenu {
background: none transparent;
color: #FFF;
padding: 3px;
width: auto;
height: 338px;
overflow: auto;
}
où "height" sera la taille de la "pseudo-frame" du contenu de votre article, et overflow: auto génerera la fameuse pseudo-frame.
2) Editer le fichier detail-news.html; de sorte qu'il ressemble à ceci:
<div class="article">
<div class="article-entete">
<div class="article-titre">!N_titre!<hr /></div>
<div class="article-infos">Écrit par !N_emetteur!. Posté le !N_date! par !N_publicateur!</div>
</div>
<div class="article-sujet">!N_sujet!</div></div>
<div class="article-contenu">
!N_texte!
</div>
Ben... voila. C'est tout, et ça marche. Bon, ça casse pas trois pattes à un canard je sais bien, mais moi ca soulage mon angoisse phobique :-D
Message édité par : toba
Jireck
Toba ! tu me met un exemple en ligne ;-)
please cela m'interesse mais j'ais deja la css de l'article tres chargé... donc avant de mis plonger, un petit exemple serait sympa
please cela m'interesse mais j'ais deja la css de l'article tres chargé... donc avant de mis plonger, un petit exemple serait sympa
toba
Visuellement, ca donne ca:
www.npds.org/user.php?op=userinfo&uname=toba
J'ai pas de site NPDS en ligne pour te montrer la démo mais je t'email les fichiers si tu veux
www.npds.org/user.php?op=userinfo&uname=toba
J'ai pas de site NPDS en ligne pour te montrer la démo mais je t'email les fichiers si tu veux
GilbertNelson
Merci beaucoup pour cette information de qualité
---
Gilbert Nelson
http://simulationpretimmobilier.net
---
Gilbert Nelson
http://simulationpretimmobilier.net
Message édité par : GilbertNelson / 16-06-2009 12:08