Y'a de l'ambiance #3 - Manuscrits & Vieux livres

Rappel du premier message :

Hello les choupinets à la crème!

C'est, une fois n'est pas coutume, votre bleue cheloue préférée qui vient empiéter sur le domaine des verts! (Moi j'aime les verts, mais je peux pas le dire trop fort, sinon ça donnerait raison à Scav', et j'aime pas donner raison à Scav!)

Votre défi du jour (enfin, de quelques jours) sera de faire une création sur le thème des Manuscrits & des vieux livres.

Il faut qu'on sente l'influence de ces objets si particuliers dans votre création! Vous pouvez créer n'importe quoi, une signature codée, une PA, une fiche, une page html, utiliser des images ou non... Seul le respect du thème est un critère!

Pour me retourner vos créations, merci de poster à la suite un Aperçu Image, un lien vers un forum test & le code sous balises "code".

Vous avez jusqu'au 22 juillet pour faire revivre les vieilles pages dans vos lignes de code, & faire honneur à ces objets du passé absolument merveilleux <3 A vos claviers!

(oui, ça se sent que j'ai le nez dans des imprimés du XVIe siècle en ce moment ^^)

Je vais probablement tenter aussi ! =D

Après quelques heures de bagarres voilà pour moi è_é :
Avant:


Quand on clique sur le petit bouquin à droite:


le lien : http://yolochione.forumactif.org/h7-livre

Très bonne idée de défi ! Voilà ce que j'ai fait :  ( cliquer sur la page memory et les différentes pages )



Je pense que je mettrais ce codage en libre service dans une version annotée pour ceux que ça intéresserait ^^  Sinon voilà ce que ça donne sur une page html de mon forum test: http://test4yoda.forumactif.org/h2-livre-ancien .

Voilà le code :

Code:

<script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jquery-142.js"></script>                   <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/37821634957680146/jqueryimBookFlip-06.js"></script>                   <style> #myBook {  display:none;  position:absolute; left : 0px; top:0px;  width: 328px;  height:533px;}.imBookPage {  position:absolute;  left:0px;  top:0px;  width: 328px;  height:533px; overflow:hidden;}</style>              <script type="text/javascript">$(document).ready( function() {  $("#myBook").imBookFlip({      page_class: 'imBookPage'  });});    </script>                                                  
<div id="myBook" style="display:none;">
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/585593couv.png)">
              
 <div style="height: 533px; color: peru; display:table-cell; vertical-align: middle; font-size: 40px; font-family: Times New Roman ; text-align: center; width : 328px;">
       Memory      
 </div>
                  
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/486457couvdos.png)">
      <br /> <img src="http://img11.hostingpics.net/pics/431017vieillephoto2.png" />                      
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
      <br />          
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
          
 <div style="  font-size:300%; float:left; margin: 2px; color: peru;">
      Q      
 </div>
     uod si rectum statuerimus vel concedere amicis, quidquid velint, vel impetrare ab iis, quidquid velimus, perfecta quidem sapientia si simus, nihil habeat res vitii; sed loquimur de iis amicis qui ante oculos sunt, quos vidimus aut de quibus memoriam accepimus, quos novit vita communis. Ex hoc numero nobis exempla sumenda sunt, et eorum quidem maxime qui ad sapientiam proxime accedunt.<br /><br />Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit. <br /><br />Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.      
 </div>
                          
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
            
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
   <br /><br />  Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris. <br /><br />Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum. <br /><br />Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat. Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.      
 </div>
                        
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
                
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
     <br /><br />Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.<br /><br />Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum. <br /><br />Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.      
 </div>
                        
 </div>
                                        
 <div class="imBookPage" style="background: url(http://img15.hostingpics.net/pics/548825livre2dos.png)">
                  
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
     <br /><br />Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.<br /><br />Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum. <br /><br />Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.      
 </div>
            
 </div>
                                          
 <div class="imBookPage" style="background: url(http://img11.hostingpics.net/pics/234920livre2.png)">
                
 <div style=" float:left; margin : 25px;  text-align: justify; font-size: 14px; color: saddlebrown;">
          <br /><br /> Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.<br /><br />Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum. <br /><br />Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.      
 </div>
                  
 </div>
                      
</div>

Sowy sowy du double post mais j'ai besoin de savoir quelque chose et je veux être sûr qu'on me voit... Est ce que les gens sous google chrome voit les images de mon code ( les images de background, les pages du livre) ? Sous firefox je les vois, sous chrome je ne les vois pas personnellement. ça m'arrangerait si ce n'était que moi

nope je ne les vois pas sous chrome :/

Arrrrrrrrrrg zut de flute de zut ! Merci pour ta réponse Fyraliel, je vais me pencher sur le problème demain du coup.

si je peux me permettre (wahou j'arrive pas à croire que c'est moi qui vais dire ça, la fille elle code une fiche elle donne des conseils où va le monde >.<) peut-être qu'un webkit aiderait mais ne me demande pas où faut le mettre (ah bah voilà, je me disais bien aussi ça paraissait trop beau xD)

Bon courage en tout cas ^^

En fait c'était juste un problème de html, j'avais pas bien placé un guillemet dans le style background et du coup ça buguait sous chrome mais pas sous firefox ( ils sont malins ces renards, ils comprennent même les étourderies)

ah oui !!! La comme ça il rend super bien le code ^^

Heyyyy,

Dis-moi Youp, ton code en libre service, il est en html aussi ou pas ? ^^' Parce qu'il est top franchement :3

C'est un défi Autumn, il n'a pas encore été mis en LS ^^ (Ce sera à Youp de voir après qu'il soit terminé si le code sera en LS ou pas ^^)

Il serait bien que tu ailles te présenter également Autumn, avant toute chose.

Ton code, Chione, es juste magnifique, et le tiens aussi Youp. Fyraliel, Ton code es super ! Mon qui essaye aussi d'apprendre le code tu m'as franchement impressionné ^^

Mais voilà de très beaux codes o.o Je suis épatée et éblouie *^*

Tu as super bien fait de remonter le sujet, Ches', j'avais zappé de lancer les votes Pardon à tous les participants! Je m'emploie donc à lancer ça de suite =)

J'aimerais beaucoup pouvoir utiliser ton code sur mon forum Youp, c'est possible ?

Si Youp le met en libre service sur le forum ça sera possible =)

Alors je croise les doigts