Bonjour,
j'ai vu sur ce site un effet que j'aime particulièrement et que je souhaiterai adapter pour un site.
Lorsque vous cliquez sur expertises puis que vous cliquez sur les différentes catégories de la sidebar, il y a un scroll du contenu (partie de gauche)
Quelle est la meilleure solution afin de reproduire cet effet ?
J'ai testé en créant 2 div (un pour le contenu et un pour la sidebar) puis en créant plusieurs blocks de contenu comme ceci :
CSS :
Je ne sais pas si c'est une bonne façon de faire mais ça ne me plait pas vraiment... Est-t-il possible de retirer la barre de scroll de l'overflow:auto ? Et autre problème : avec une petite résolution (en hauteur), lorsque je clique sur un des liens de la sidebar, la fenêtre globale se décale également. Est-il possible d'y remédier ?
Modifié par newty (27 Jul 2011 - 16:12)
j'ai vu sur ce site un effet que j'aime particulièrement et que je souhaiterai adapter pour un site.
Lorsque vous cliquez sur expertises puis que vous cliquez sur les différentes catégories de la sidebar, il y a un scroll du contenu (partie de gauche)
Quelle est la meilleure solution afin de reproduire cet effet ?
J'ai testé en créant 2 div (un pour le contenu et un pour la sidebar) puis en créant plusieurs blocks de contenu comme ceci :
<section id="contentarea">
<div class="content-block">
<a name="1"><h2>Mortalis Constantinus Hannibaliano</h2></a>
<p>Vita est illis semper in fuga uxoresque mercenariae conductae ad tempus ex pacto atque, ut sit species matrimonii, dotis nomine futura coniunx hastam et tabernaculum offert marito, post statum diem si id elegerit discessura, et incredibile est quo ardore apud eos in venerem uterque solvitur sexus.</p>
<ul>
<li>Nec piget dicere avide magis hanc insulam populum</li>
<li>Et quia Montius inter dilancinantium manus</li>
<li>Quid? qui se etiam nunc subsidiis patrimonii aut</li>
<li>Ergo ego senator inimicus, si ita vultis, homini,</li>
<li>Nec sane haec sola pernicies orientem diversis</li>
</ul>
</div>
<div class="content-block">
<a name="2"><h2>Exstitisse qui amicitiis amicissimos</h2></a>
<p>Superatis Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi palmite viget et frugibus minutis, quam mediam navigabile flumen Calycadnus interscindit.</p>
<p>Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.</p>
</div>
<div class="content-block">
<a name="3"><h2>Licentia nullo laribus puniti praeter</h2></a>
<p>Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.</p>
<p>Eodem tempore Serenianus ex duce, cuius ignavia populatam in Phoenice Celsen ante rettulimus, pulsatae maiestatis imperii reus iure postulatus ac lege, incertum qua potuit suffragatione absolvi, aperte convictus familiarem suum cum pileo, quo caput operiebat, incantato vetitis artibus ad templum misisse fatidicum, quaeritatum expresse an ei firmum portenderetur imperium, ut cupiebat, et cunctum.</p>
</div>
<div class="content-block">
<a name="4"><h2>De quidem cum laudantur Catoni</h2></a>
<p>Quam a multo cum natura ad sit potius eo tempus cum evidentius sensu et scelere quae mihi esset ita utilitatis.</p>
</div>
</section>
<div id="sidebar">
<ul>
<li><a class="active" href="#1">Mortalis Constantinus Hannibaliano</a></li>
<li><a href="#2">Exstitisse qui amicitiis amicissimos</a></li>
<li><a href="#3">Licentia nullo laribus puniti praeter</a></li>
<li><a href="#4">De quidem cum laudantur Catoni</a></li>
</ul>
</div>
<div class="clear"></div>
</div>CSS :
#contentarea {
float:left;
width:580px;
height:650px;
overflow:auto;
}
.content-block {
min-height:650px;
}Je ne sais pas si c'est une bonne façon de faire mais ça ne me plait pas vraiment... Est-t-il possible de retirer la barre de scroll de l'overflow:auto ? Et autre problème : avec une petite résolution (en hauteur), lorsque je clique sur un des liens de la sidebar, la fenêtre globale se décale également. Est-il possible d'y remédier ?
Modifié par newty (27 Jul 2011 - 16:12)
