bonjour tout le monde,
Je rencontre un petit soucis pour creer mon site 'one page'.
J'ai fait l'integration HTML & CSS de ma page, reste plus que le js pour faire un effet de scroll vertical.
Malgrès différents forums, je n'arrive pas cette dernière partie.
Help !!
Merci
Voici mon code HTML :
......
<title>Portfolio</title>
<link href="css/vb_styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.ico">
<script src="js/clearbox.js" type="text/javascript"></script>
<script type="text/javascript" src="js/validation.js"></script>
</head>
<body>
<div id="wrapper">
<a name="home"></a>
<div id="navigation">
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#works">WORKS</a></li>
<li><a href="#mjm">MJM</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
<div id="top"><img src="images/logo_virginieb.jpg" title="Virginie" alt="Logo Virginie" height="90px" width="381px"></div>
<div id="content">
<h2><a name="home"> About me</a></h2>
<div id="cat_about">
<div><h3>PrÉsentation</h3>
<p>Hey,<br>
Bienvenue sur mon portfolio, je m'appelle <strong>Virginie</strong> et je suis infographiste & webdesigner.</p>
<p>Depuis toujours, je me passionne pour le graphisme et le design. Grâce à ce site, j'aimerai vous présenter mes créations ainsi que mes compétences dans le domaine du print et du webdesign.</p>
<p>Depuis peu, j'ai décidé de devenir freelance. Je suis donc disponible pour vos projet.</p>
<p><em style="font-size:10px">Je tiens à préciser que certains travaux ont été réalisés dans le cadre scolaire (MJM). Ce ne sont donc en aucun cas des copies ou plagiats d'oeuvres existantes.</em></p>
</div>
<div>
<h3>CompÉtences</h3>
<ul>
<li><strong>En infographie : </strong><br>
réalisation de logotypes, cartes de visite, dépliants, flyers, affiches, illustrations, annonces presse ...</li>
<li><strong>En web :</strong>
réalisation de maquettes, sites vitrines, sites Wordpress, intégration HTML & CSS, bannières web ...</li>
</ul>
<p>Pour plus de précisions, téléchargez mon CV au format .pdf.</p>
<p align="center"><a href="cv_virginieb.pdf" title="Téléchargez mon CV"><img src="images/cv_virginieb.gif" alt="téléchargez mon cv" border="0" height="140" width="140"></a></p>
</div>
<div>
<h3>Infos</h3>
<p>En plus d'être freelance, je garde aussi mon statut de salariée. Cependant je suis à la recherche d'un <strong>poste</strong> dans le domaine. <br>
<em>Je tiens à préciser que je sépare travail pour compte personnel et compte professionnel.</em></p>
<p>N'hésitez pas à me contacter :)<br>
<a href="#contact"><strong>Aller au formulaire</strong></a></p>
</div>
</div>
<div id="espace_one"></div>
<h2><a name="works"> Works</a></h2>
<div id="cat_works">
ici vignettes portfolio pro
</div>
<div id="espace_two"></div>
<h2><a name="mjm"> Mjm</a></h2>
<div id="cat_mjm">
<ul class="columns">
<li>
<a href="#"><img src="images/mjm/img_island.jpg" alt="island" width="210" height="120" /></a>
<div class="info">
<br><span id="titre">Island of Soul</span><br>
<p>Réalisation d'un site full flash pour une agence de communication fictive.</p>
</div>
</li>
<li>
<a href="#"><img src="images/mjm/img_maxgringo.jpg" alt="maxgringo" width="210" height="120" /></a>
<div class="info">
<br><span id="titre">Max Gringo</span><br>
<p>Intégration de la page d'accueil en HTML et CSS depuis une maquette.</p>
</div>
</li>
<li>
<a href="#"><img src="images/mjm/img_strastoys.jpg" alt="StrasToys" width="210" height="120" /></a>
<div class="info">
<br><span id="titre">StrasToys</span><br>
<p>Réalisation d'une maquette pour un site e-commerce vendant des art toys made in Alsace + vidéo de présentation.</p>
</div>
</li>
<li>
<a href="#"><img src="images/mjm/img_melies.jpg" alt="Melies" width="210" height="120" /></a>
<div class="info">
<br><span id="titre">Georges Melies</span><br>
<p>Création d'un site complet en 2 jours sur Georges Melies, magicien du cinéma. Intégration d'éléments flash.</p>
</div>
</li>
<li>
<a href="images/mjm/newsweb.jpg" rel="clearbox[gallery=mjm]" title="Réalisation d'une maquette de première page d'un magazine d'information en ligne + création du logo. Choix typo, couleurs et grille. Travail scolaire - 1ère année"><img src="images/mjm/img_newsweb.jpg" alt="NewsWeb" width="210" height="120" /></a>
<div class="info">
<br><span id="titre">NewsWeb</span><br>
<p>Réalisation d'une maquette de première page d'un magazine d'information en ligne + création du logo.</p>
</div>
</li>
<li>
<a href="http://issuu.com/virgiinie/docs/festivaldedanse?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBtn=true" rel="clearbox[gallery=mjm,,height=700,, width=1000]" title="Création de toute la campagne pour un festival de danse contemporaine. Travail scolaire - 1ère année"><img src="images/mjm/img_festival.jpg" alt="Festival de danse Contemporaine" width="210" height="120" /></a>
<div class="info">
<br><span id="titre">Festival de danse contemporaine</span><br>
<p>Réalisation de la campagne pour le festival : affiche, annonces presse, livret, coupons-réponse et billets d'entrée.</p>
</div>
</li>
<li>
<a href="images/mjm/batista.jpg" rel="clearbox[gallery=mjm]" title="Mise en page pour un magazine fictif. Double page sur un graphiste 'Adhemas Batista'. Travail scolaire - 1ère année"><img src="images/mjm/img_batista.jpg" alt="Adhemas Batista" width="210" height="120" /></a>
<div class="info">
<br><span id="titre">Adhemas Batista</span><br>
<p>Création d'une double page intérieure sur une personne au choix.</p>
</div>
</li>
<li>
<a href="images/mjm/cinema.jpg" rel="clearbox[gallery=mjm]" title="Mise en page pour un magazine fictif. Double page sur l'actu cinéma. Travail scolaire - 1ère année"><img src="images/mjm/img_cinema.jpg" alt="Cinema" width="210" height="120" /></a>
<div class="info">
<br><span id="titre">Cinéma</span><br>
<p>Création d'une double page intérieure sur un sujet au choix.</p>
</div>
</li>
</ul>
</div>
<div id="espace_three"></div>
<h2><a name="contact"> Contact</a></h2>
<div id="cat_contact">
<div><img src="images/portrait_virginieb.gif" alt="Contactez-moi" height="450" width="215"></div>
<div>
<h3>Me contacter</h3>
<form action="sendform.php" method="post" name="contactme" id="contact">
<label for="cname">Nom & prénom</label><input name="cname" id="cname" class="required" type="text">
<label for="cemail">E-mail</label><input name="cemail" id="cemail" class="required validate-email" type="text">
<label for="csubject">Sujet</label><input name="csubject" id="csubject" class="required" type="text">
<label for="ccontent">Votre message</label><textarea name="ccontent" id="ccontent" cols="30" rows="5" class="required"></textarea>
<br><br>
<input name="envoyez" value="ENVOYER" class="submit" type="submit">
</form>
<script type="text/javascript">
var valid = new Validation('contact',{immediate : true}); // OR new Validation(document.forms[0]);
</script>
</div>
<div>
<h3>Mes coordonnÉes</h3>
.... email, tel, adresse ...
</div>
</div>
</div>
</div>
<div id="footer">
<div id="copyrights">
<a name="contact"></a>
©2009 Tous droits réservés <br><br> Plan du site : Home - Works - Mjm - Contact
</div>
</div>