Et l'eau,
@Victor : Si tu passes par là, merci pour ton bolo bolo que tu as trouvé sur le net ^^. Sais tu que j'ai fait délirer certains avec ce faux texte ? ...
C'est pas bien difficile en soit. Le principe est d'appeler des ancres :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JCVD POWA !!!! XD XD XD</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('body,#content').css({'overflow':'hidden'});
$('#nav a').slice(1,5).bind('click',function(e){
e.preventDefault();
$('#nav a').removeClass('current');
$(this).addClass('current');
var cible = $(this).attr('href');
$('html, body').stop().animate({
scrollLeft: $(cible).offset().left,
scrollTop: $(cible).offset().top
}, 500);
});
$('#nav a:first').bind('click',function(e){
e.preventDefault();
$('#nav a').each(function(i){
if($(this).hasClass('current')) positionCurrent = i;
});
if(positionCurrent != 1){
$('#nav a').eq(positionCurrent - 1).trigger('click');
}
});
$('#nav a:last').bind('click',function(e){
e.preventDefault();
$('#nav a').each(function(i){
if($(this).hasClass('current')) positionCurrent = i;
});
if(positionCurrent != 4){
$('#nav a').eq(positionCurrent + 1).trigger('click');
}
});
});
</script>
<style type="text/css">
body,#content{width:3000px;}
#nav{position:fixed;top:0;left:0;}
#nav li{display:inline-block;}
#nav a{display:block;width:15px;height:15px;margin:0 10px;padding:5px;text-decoration:none;background-color:black;color:white;border:1px solid black;}
#nav a:hover{background-color:white;color:black;}
#content{margin:40px 0 0 0;}
.article{width:480px;float:left;margin:0 10px;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#"><</a></li>
<li><a href="#uneAncre" class="current">1</a></li>
<li><a href="#uneAutreAncre">2</a></li>
<li><a href="#encoreUneAncre">3</a></li>
<li><a href="#etEncoreUneAncre">4</a></li>
<li><a href="#">></a></li>
</ul>
<div id="content">
<div id="uneAncre" class="article">
<p>You see, premièrement, il y a de bonnes règles, de bonnes rules et c'est une sensation réelle qui se produit si on veut ! Et là, vraiment, j'essaie de tout coeur de donner la plus belle réponse de la terre ! </p>
<p>Quand tu fais le calcul, si vraiment tu veux te rappeler des souvenirs de ton perroquet, en vérité, la vérité, il n'y a pas de vérité parce que spirituellement, on est tous ensemble, ok ? Et j'ai toujours grandi parmi les chiens. </p>
<p>Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, tu vois au passage qu'il n'y a rien de concret car le cycle du cosmos dans la vie... c'est une grande roue et finalement tout refaire depuis le début. Mais ça, c'est uniquement lié au spirit. </p>
</div>
<div id="uneAutreAncre" class="article">
<p>Tu comprends, je sais que, grâce à ma propre vérité entre penser et dire, il y a un monde de différence car l'aboutissement de l'instinct, c'est l'amour ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Ça sounds good, si vraiment tu veux te rappeler des souvenirs de ton perroquet, on vit dans une réalité qu'on a créée et que j'appelle illusion et je ne cherche pas ici à mettre un point ! C'est pour ça que j'ai fait des films avec des replicants. </p>
<p>Si je t'emmerde, tu me le dis, je ne suis pas un simple danseur car c'est juste une question d'awareness et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit. </p>
</div>
<div id="encoreUneAncre" class="article">
<p>Ça sounds good, si vraiment tu veux te rappeler des souvenirs de ton perroquet, on vit dans une réalité qu'on a créée et que j'appelle illusion et je ne cherche pas ici à mettre un point ! C'est pour ça que j'ai fait des films avec des replicants. </p>
<p>Si je t'emmerde, tu me le dis, je ne suis pas un simple danseur car c'est juste une question d'awareness et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Tu vois, après il faut s'intégrer tout ça dans les environnements et il faut se recréer... pour recréer... a better you et c'est très, très beau d'avoir son propre moi-même ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Tu comprends, là on voit qu'on a beaucoup à travailler sur nous-mêmes car entre penser et dire, il y a un monde de différence et parfois c'est bon parfois c'est pas bon. C'est pour ça que j'ai fait des films avec des replicants. </p>
</div>
<div id="etEncoreUneAncre" class="article">
<p>Tu vois, après il faut s'intégrer tout ça dans les environnements et il faut se recréer... pour recréer... a better you et c'est très, très beau d'avoir son propre moi-même ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Tu comprends, là on voit qu'on a beaucoup à travailler sur nous-mêmes car entre penser et dire, il y a un monde de différence et parfois c'est bon parfois c'est pas bon. C'est pour ça que j'ai fait des films avec des replicants. </p>
<p>You see, premièrement, entre penser et dire, il y a un monde de différence et je ne cherche pas ici à mettre un point ! Il y a un an, je t'aurais parlé de mes muscles. </p>
</div>
</div>
</body>
</html>
Je pense qu'on peut encore l'améliorer notamment rendre encore plus dynamique la gestion du menu et que ce soit un petit peu plus propre... Aussi, je te laisse le soin de le faire.
Je suis passé sur ta page que je trouve très sympa. Cependant, il y a trop de JS intrusif/obstructif. Aussi, la page n'est pas valide. Attention aux bogues
priscille a écrit :
Déjà, la moitié ne comprenait même pas qu'il fallait cliquer sur les images pour avoir le détail, j'ai du le préciser, alors la il faut que se soit clair pour ne pas que la moitié du site soit zappé)
Cela démontre un problème d'ergonomie évident. Je pense qu'en redoublant d'astuces, tu peux améliorer cet aspect là.
Arialia a écrit :
joli site mais je déteste que l'on me redimensionne ma fenêtre de navigation ... essaye plutôt de t'adapter à la dimension existante ...
+1
Modifié par niuxe (30 May 2011 - 07:37)