AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment :
Réassort du coffret Pokémon 151 ...
Voir le deal

    (LLARIARITH - ONYX) Codage "Vieux Journal"

    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Sam 26 Déc 2015 - 17:26

    Bonjour je voudrais :



    Tout d'abors, merci à toi, cher inconnu, de t'arréter un instant devant ma petite demande, c'est bien sympatoche XD. Etant une poire (parce que j'en ai mangé hier) (mais peu importe) en codage, je viens gratouiller un ch'tit coup d'main pour réaliser un quelque chose que je voudrais ben : un code avec un style vieux journal.
    Je développe : en fait, ce que je voudrais, c'est une fiche avec une texture vieux papier en fond, et des zones de textes (ou images XD) exploitables séparément, c'est à dire des blocs indépendants que l'on peut remplir à son gré. Mon principal problème étant que je ne trouve pas d'image de fond convenable, je voudrais que le résultat final semble réaliste, j'y tiens beaucoup. En revanche, je voudrais un codage le plus simple possible, pour que je puisse le manipuler si besoin. Si jamais j'ai manqué de clarté dans mes explications, faites le moi savoir au plus vite s'il vous plaît !


    Schéma(s) et Eléments
    Schémas :
    Spoiler:
    Tailles des éléments : Il ne faudrait pas que la largeur dépasse 600px, parce que mon forum est réglé en pixels afin que mes codes tiennent la route XP.
    Effets voulus : J'aimerais qu'il soit possible de découvrir une deuxième page sous la première, au survol. Avec un fond différent, de préférence, sveupleu.
    Exemples avec des images, du rendu que je voudrais :
    Like That:


    Ressources
    textures Proposées:
    Vous n'avez aucune obligation de vous en servir, ce serait même le contraire, je les met plus à titre d'exemple qu'autre chose, car j'ai bien peur qu'elles ne soient trop petites XP.


    Autres précisions ?
    Marchiiiiiiiiiiiiiiiiiiiiii


    Dernière édition par Kira HexBlood le Dim 27 Déc 2015 - 1:16, édité 1 fois
    Camomille
    Camomille
    FémininAge : 20Messages : 62

    Sam 26 Déc 2015 - 17:46

    Alors, je m'arrête , en tant qu'inconnu, devant ta commande ! Je vois ce que tu veux dire quand tu dis le codage le plus simple possible je vais essayer de me débrouiller avec ceci même si je ne suis pas sûre de pouvoir réussir car je débute dans le codage. Mais à ta demande, même si c'est dur à trouver, ce serait bien que tu aies un schéma pour que les codeurs comme moi [ ou plus forts que moi x'3 ] puissent voir EN GROS sans texte et juste avec une image a quoi ça ressemble.
    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Dim 27 Déc 2015 - 1:14

    Awwwww, merci d'avoir proposé ton aide XD
    Ca me touche énormément XD
    Pour en revenir à ta suggestion, aussitôt, dit, aussitôt fait !
    Wala =>:

    (moi ? dormir ? non, jamais, je suis un vampire XD)



    (LLARIARITH - ONYX) Codage "Vieux Journal" Hg7i
    Camomille
    Camomille
    FémininAge : 20Messages : 62

    Dim 27 Déc 2015 - 14:16

    Comme je l'ai dit plus haut, je suis un peu très nulle. Si un autre codeur veut prendre cette commande, il peut car honnêtement, je n'ai pas les capacités qu'il faut avoir pour le faire. Merci d'avoir mis le schéma pour les autres codeurs aussi ça les aidera !
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Dim 27 Déc 2015 - 14:40

    Hello ^^
    Je ne vais pas prendra ta demande, mais je voulais faire une petite remarque ^^ Les codeurs ne sont pas des graphistes, ainsi, ce n'est pas à eux de trouver ou créer les images nécessaires à la demande. Du coup, pour ton fond de papier usé, c'est à toi de procurer une image utilisable. Si tu n'en trouves pas, tu peux passer commande dans la partie graphique ^^



    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Mar 29 Déc 2015 - 19:40

    Ah... Bon. Heureusement que j'avais précieusement gardé mespeanuts pour ce genre de galère X'P
    Merci.... snif



    (LLARIARITH - ONYX) Codage "Vieux Journal" Hg7i
    Llariarith
    Llariarith
    FémininAge : 39Messages : 218

    Ven 1 Jan 2016 - 14:07

    Coucou :)

    J'ai fait un essai ici n'hésite pas à commenter, je n'ai fait que la page 1 pour l'instant mais je peux te faire la suite dans le même style :)

    Pour la texture j'ai pris un stock de Deviant Art ici si d'autres codeurs veulent essayer :)

    Pour le coté "au survol" je tenterais mais ne pense pas y arriver avec mes connaissances, si survol il y a par contre il faudra enlever les overflow et la hauteur dans les articles Wink
    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Sam 2 Jan 2016 - 2:03

    Wahou, cro cro bien XD
    Merki, merki, merkiiiiiiiiiiii
    Je peux avoir le code s'il te plaît ? Je vais le garder précieusement !!!!! Mais j'attends encore afin de voir si quelqu'un peu me fournir le survol... Et je voudrais bien la page deux s'il te plait... ?



    (LLARIARITH - ONYX) Codage "Vieux Journal" Hg7i
    Llariarith
    Llariarith
    FémininAge : 39Messages : 218

    Sam 2 Jan 2016 - 8:07

    Contente que ça te convienne, la page 2 devrait venir dans la journée je pense :)


    HTML :
    Code:
    <div class="journal">

    <center><table><tr><td align="center"><image src="http://media.logicielmac.com/download/80x80/rss-podcast/cebbcd33-journal-les-echos.jpg"></td><td  align="center">  <div class="titre">titre</div></td><td  align="center"><image src="http://media.logicielmac.com/download/80x80/rss-podcast/cebbcd33-journal-les-echos.jpg"></td></tr></table></center>
    <center>
    <image src="http://www.patrick-rako.net/wp-content/uploads/2015/11/4762384399_9f80ff4168_o.jpg" width=600px;/></center>

    <table><tr>
    <td width="20%" text-align="justify" class="annonces"><image src="http://www.lounce.com/sites/all/themes/lounce_0/images/drupal/xvalidation.png.pagespeed.ic.y0XZ6645Vz.png">


    Petites annonces 1

    Petites annonces 1

    Petites annonces 1

    Petites annonces 1

    </td>
    <td width="60%"> <span class="sstitre"> Titre article 1</span>
    <div class="article">Article 1.
    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</div>

    <span class="sstitre"> Titre article 2</span>
    <div class="article">Article 2.
    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</div>
    </td>
    <td width="20%" text-align="justify" class="annonces"><image src="http://www.lounce.com/sites/all/themes/lounce_0/images/drupal/xvalidation.png.pagespeed.ic.y0XZ6645Vz.png">


    Petites annonces 1

    Petites annonces 1

    Petites annonces 1

    Petites annonces 1

    </td></tr></table></div>


    EDIT : Et voilà la page 2 : (visible un peu plus bas sur le même lien que précédemment Wink )
    Code:
    <div class="journal">
    <table><tr><td colspan="2" style="border-bottom:2px solid black;text-align:center;" width="100%"> <div class="sstitre">Titre </div></td></tr>
    <tr><td colspan="2" width="100%"> <br /></td></tr>
    <tr><td width= "30%" class="article" height="100px;">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</td>
    <td width="70%" align="center"><image src="http://www.patrick-rako.net/wp-content/uploads/2015/11/4762384399_9f80ff4168_o.jpg" width="420px"/></td></tr>
    <tr> <tr><td colspan="2" width="100%">
    <div class="article">
    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</div></td></tr></table>

    <table><tr><td colspan="5" style="border-top:2px solid black;text-align:center;padding-top:5px;" width="100%"> <div class="sstitre">Titre </div></td></tr><tr><td colspan="5" width="100%"> <br /></td></tr>
    <tr><td width="30%" class="article">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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</td><td width="5%"> </td> <td width="30%" class="article">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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</td><td width="5%"> </td> <td width="30%" class="article">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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</td></tr></table>

    CSS :

    Code:

    .journal{
      background-image:url(http://nsa38.casimages.com/img/2016/01/01/160101013902901122.jpg);
      background-repeat : repeat;
    text-align:center;
    padding:5px;}

    .titre{ display: block;
      font-size: 50px;
    font-family: "Times New Roman", Times, serif;
      color: #000 ;
      letter-spacing:2px;
      text-align:center;
      text-transform:uppercase;
      padding : 15px;
      border-bottom:4px black solid;
        border-top:4px black solid;
    }

    .sstitre{ display: block;
      font-size: 25px;
    font-family: "Times New Roman", Times, serif;
      color: #000 ;
      letter-spacing:2px;
      text-align:center;
    }
      
    .article{
      border:2px black solid;
    padding:15px;
    height:200px;
    overflow:auto;}

      .annonces{
      vertical-align:top;
      font-size:14px;
      padding:10px;
    border:2px black solid;
    }

    Je n'ai pas mis de crédit mais je te fais confiance pour le faire dans les crédits généraux de ton forum Wink
    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Lun 4 Jan 2016 - 19:35

    Bien sûr ! Merci beaucoup !!
    Juste une petite question, à quoi sert le code CSS que tu m'a donné ? XP
    (comme je le disais, le codage c'est pas ma tasse de thé)(pis j'aime pas ça le thé moi)



    (LLARIARITH - ONYX) Codage "Vieux Journal" Hg7i
    Llariarith
    Llariarith
    FémininAge : 39Messages : 218

    Lun 4 Jan 2016 - 20:16

    J'ai présumé que tu voulais cela pour ton forum, donc mettre les détails du code en CSS permet de le rendre plus aisé à modifier Wink

    Pour modifier ton css c'est panneau d'administration puis affichage, puis couleurs et enfin fiche css.
    Tu n'enlèves pas ce qui y es déjà, tu rajoutes juste ça à la suite :)

    Si ce n'est pas pour ton forum je peux arranger ça Wink
    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Mar 5 Jan 2016 - 18:04

    Aaaaaawwwww OKAY !! (on sent ma blondeur qui s'exprime)
    Sisi, c'est pour mon forum, c'est juste que je n'ai pas l'habitude de manipuler mon css pour quelques codes de prez' XD
    Oki, merchi pour ce petit complément d'info, je choppe tout ça et je le garde préciseusement
    Kiss !



    (LLARIARITH - ONYX) Codage "Vieux Journal" Hg7i
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 15 Jan 2016 - 2:19

    Hellow!

    Est-ce que c'est toujours d'actualité? Essayez de passer donner de vos nouvelles au moins une fois par semaine histoire qu'on sache que cela n'a pas été abandoné Wink

    Pour le hover, je pourrais peut-être essayer si je trouve un peu de temps (ce qui n'a rien de sûr alors si quelqu'un d'autre passe par là, sentez-vous libre u_u). J'aimerais juste savoir quand exactement est-ce que la deuxième page doit apparaître? Dois-ton passer à un endroit particulier sur la première page?



    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Ven 15 Jan 2016 - 15:16

    En fait, je me contente de ce que Llariarith m'a déjà réalisé, et donc on pourrait à la limite dire que c'est réglé XP
    Mais, si quelqu'un veut y apporter des améliorations, ça ne se refuse pas XD

    Pour répondre à tes questions, la deuxième page apparaît quand elle veut, mais j'avoue que j'aurais une petite préférence pour que la zone de survol soit sur le chiffre en bas de page (le n° de la page en somme)... Brefouille, si tu as envie d'ssayer, c'est bien sympa de ta part, merchi XD
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Lun 25 Jan 2016 - 13:27

    Hello!
    Toujours d'actualité ou j'archive? ^^



    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Mar 26 Jan 2016 - 14:26

    Toujours d'actualité !
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 26 Jan 2016 - 18:00

    Voilà l'aperçu , la deuxième page s'affiche quand tu passes sur "voir la deuxième page" en bas :
    http://forum-test-onyx5.forum-canada.com/t68-journal-test#76



    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Ven 29 Jan 2016 - 18:11

    Awwwww, c cool ! Dis, petite question, srait t'il possible que la 2ème page apparaisse comme si on tournait la page d'un livre ?

    ex : http://www.gif-maniac.com/gifs/54/53783.gif



    (LLARIARITH - ONYX) Codage "Vieux Journal" Hg7i
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 4 Fév 2016 - 3:23

    Sachant que c'est une page qui n'est pas séparée au milieu, c'est assez dur à faire. Cela se fait, mais disons que c'est plus facile quand on utilise des images alors que dans ce cas, ce sont des blocs qui contiennent plusieurs éléments (images et texte). Bref, je ne suis pas vraiment capable, sorry >< Y a-t-il une autre effet qui te plairait mieux?



    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Lun 8 Fév 2016 - 14:26

    Aww....je comprends. Je sais à quel point l'encodage peut être difficile. Peut être un glissement latéral, juste ? Comme si la page apparaît de côté plutôt que de tomber du ciel ?



    (LLARIARITH - ONYX) Codage "Vieux Journal" Hg7i
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 9 Fév 2016 - 23:43

    Comme ça?
    http://forum-test-onyx5.forum-canada.com/t68-journal-test#77



    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 19 Fév 2016 - 17:30

    Hello!
    C'est toujours d'actualité? tu as vu le message d'Onyx?


    Dernière édition par NyoTheNeko le Sam 20 Fév 2016 - 13:06, édité 1 fois



    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Sam 20 Fév 2016 - 12:10

    Oui, je l'ai vu, je n'ai juste pas eu le temps de répondre parce que j'ai des examens en ce moment.
    Onyx => C'est parfait, merci !!!!! <3 Puis-je avoir le code ?



    (LLARIARITH - ONYX) Codage "Vieux Journal" Hg7i
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 21 Fév 2016 - 5:37

    Bien sûr ^^

    Alors le HTML (la deuxième partie est avant la première, je sais c'est bizarre, mais sinon ça ne fonctionne pas) :
    Code:
    <div class="journal_bloc"><div class="journal_hover">Voir la deuxième page</div><div class="journal journal2"><div class="journal3">
    <table><tr><td colspan="2" style="border-bottom:2px solid black;text-align:center;" width="100%"> <div class="sstitre">Titre </div></td></tr>
    <tr><td colspan="2" width="100%"> <br /></td></tr>
    <tr><td width= "30%" class="article" height="100px;">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</td>
    <td width="70%" align="center"><image src="http://www.patrick-rako.net/wp-content/uploads/2015/11/4762384399_9f80ff4168_o.jpg" width="420px"/></td></tr>
    <tr> <tr><td colspan="2" width="100%">
    <div class="article">
    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</div></td></tr></table>

    <table><tr><td colspan="5" style="border-top:2px solid black;text-align:center;padding-top:5px;" width="100%"> <div class="sstitre">Titre </div></td></tr><tr><td colspan="5" width="100%"> <br /></td></tr>
    <tr><td width="30%" class="article"><div class="article2">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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</div></td><td width="5%"> </td> <td width="30%" class="article"><div class="article2">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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</div></td><td width="5%"> </td> <td width="30%" class="article"><div class="article2">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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</div></td></tr></table></div></div><div class="journal journal1"><div class="journal3">

    <center><table><tr><td align="center"><image src="http://media.logicielmac.com/download/80x80/rss-podcast/cebbcd33-journal-les-echos.jpg"></td><td  align="center">  <div class="titre">titre</div></td><td  align="center"><image src="http://media.logicielmac.com/download/80x80/rss-podcast/cebbcd33-journal-les-echos.jpg"></td></tr></table></center>
    <center>
    <image src="http://www.patrick-rako.net/wp-content/uploads/2015/11/4762384399_9f80ff4168_o.jpg" width=600px;/></center>

    <table><tr>
    <td width="20%" text-align="justify" class="annonces"><image src="http://www.lounce.com/sites/all/themes/lounce_0/images/drupal/xvalidation.png.pagespeed.ic.y0XZ6645Vz.png">


    Petites annonces 1

    Petites annonces 1

    Petites annonces 1

    Petites annonces 1

    </td>
    <td width="60%"> <span class="sstitre"> Titre article 1</span>
    <div class="article">Article 1.
    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</div>

    <span class="sstitre"> Titre article 2</span>
    <div class="article">Article 2.
    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Et licet quocumque oculos flexeris feminas adfatim multas spectare cirratas, quibus, si nupsissent, per aetatem ter iam nixus poterat suppetere liberorum, ad usque taedium pedibus pavimenta tergentes iactari volucriter gyris, dum exprimunt innumera simulacra, quae finxere fabulae theatrales.

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    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.

    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.</div>
    </td>
    <td width="20%" text-align="justify" class="annonces"><image src="http://www.lounce.com/sites/all/themes/lounce_0/images/drupal/xvalidation.png.pagespeed.ic.y0XZ6645Vz.png">


    Petites annonces 1

    Petites annonces 1

    Petites annonces 1

    Petites annonces 1

    </td></tr></table></div></div></div>

    Et le CSS :
    Code:
    .journal_bloc {
      width: 100%;
      position: relative;
      height: 1170px;
      overflow: hidden;
    }
    .journal1 {
      position: absolute;
      width: 100%;
      top: 0px;
      left: 0px;
      z-index: 2;
      transition: 1s ease;
    }
    .journal2 {
      width: 100%;
      position: absolute;
      top: 0px;
      left: 100%;
      z-index: 4;
      transition: 1s ease;
    }
    .journal3 {
      padding: 5px;
    }
    .journal_hover {
      width: 60%;
      height: 20px;
      z-index: 3;
      position: absolute;
      bottom: 5px;
      left: 20%;
      font-size: 18px;
      font-family: "Times New Roman", Times, serif;
      color: #000;
      letter-spacing:2px;
      text-align: center;
      transition: 1s ease;
    }
    .journal_hover:hover ~ .journal2, .journal2:hover {
      left: 0%;
    }
    .journal_hover:hover, .journal_hover:hover ~ .journal1, .journal2:hover ~ .journal1 {
      left: -100%;
    }

    .journal{
      background-image:url(http://nsa38.casimages.com/img/2016/01/01/160101013902901122.jpg);
      background-repeat : repeat;
    text-align:center;}
    .titre{ display: block;
      font-size: 50px;
    font-family: "Times New Roman", Times, serif;
      color: #000 ;
      letter-spacing:2px;
      text-align:center;
      text-transform:uppercase;
      padding : 15px;
      border-bottom:4px black solid;
        border-top:4px black solid;
    }

    .sstitre{ display: block;
      font-size: 25px;
    font-family: "Times New Roman", Times, serif;
      color: #000 ;
      letter-spacing:2px;
      text-align:center;
    }
     
    .article{
      border:2px black solid;
    padding:15px;
    height:200px;
    overflow:auto;}

    .article2{
    padding-left: 15px;
    margin-left: -15px;
    height:400px;
    overflow:auto;}

      .annonces{
      vertical-align:top;
      font-size:14px;
      padding:10px;
    border:2px black solid;
    }



    Kira HexBlood
    Kira HexBlood
    FémininAge : 28Messages : 89

    Lun 22 Fév 2016 - 18:53

    Meeeeeerrccccccccccccciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii :kay4:



    (LLARIARITH - ONYX) Codage "Vieux Journal" Hg7i
    Contenu sponsorisé


      La date/heure actuelle est Dim 12 Mai 2024 - 8:49