Création d'une page de journal

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Création d'une page de journal

Message par Shak Lun 20 Mai 2013, 17:18

Bonjour !

Voilà, je suis la reine à problèmes.. J'aimerais pourvoir faire un article de type journal comme sur l'image suivante : https://i.servimg.com/u/f81/18/18/55/53/type-j10.jpg
Car sur mon forum, un journal existe et vu que je m'en occupe, toujours tout noter sous photofiltre et coller des montages de textes les uns après les autres, c'est assez chiant...

C'est pourquoi j'aimerais obtenir de vos talents plus importants que les miens, un code qui pourrait me permettre de n'avoir qu'à écrire un bloc en dessous des titres, comme sur l'image en quelque sorte.

Le forum est un pphb2 et fonctionne sous chrome!


Dernière édition par Shak le Mar 21 Mai 2013, 21:29, édité 1 fois
avatar

Shak
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 19/05/2013

http://universite-les-camel.forumactif.org/
Shak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par [Nihil] Lun 20 Mai 2013, 18:57

C'est effectivement possible et assez facilement, mais après, tous tes articles auront la même structure ? (au niveau du placement des blocs)
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par Shak Lun 20 Mai 2013, 19:00

Je pense qu'ils auront la même structure oui ^^ Les pages n'ayant pas la même seront faites très probablement manuellement !
avatar

Shak
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 19/05/2013

http://universite-les-camel.forumactif.org/
Shak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par [Nihil] Lun 20 Mai 2013, 19:05

Dans ce cas là est ce que tu peux m'envoyer : une image de ton fond sans les paragraphe, sans les titres, sans le fond des titres (le blanc ^^) ?

Et aussi une image sans les paragraphes, sans les titres mais avec le fond des titres ?

Cela devrait suffire, voilà voilà ♥
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par Shak Lun 20 Mai 2013, 19:44

Si j'ai bien compris, l'image de fond c'est celle ci https://i.servimg.com/u/f81/18/18/55/53/fond_d10.jpg

Mais l'autre, tu veux l'image avec les carrés blancs?
avatar

Shak
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 19/05/2013

http://universite-les-camel.forumactif.org/
Shak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par [Nihil] Lun 20 Mai 2013, 19:56

Bah, si tu avais les .png de chaque polygones blancs qui sont pour les titres, ça serait pratique ^^
Edit : avec aussi l'image en haut
l'image pour les textes avec une police spéciale ^^

[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par Shak Lun 20 Mai 2013, 20:34

Les polygones je les fais au feeling en fonction de l'article ^^'
Je n'ai donc pas d'image déjà toute faite pour ça... Je peux en faire si c'est vraiment nécessaire ..?

Quant au texte, il y a l'image là : https://i.servimg.com/u/f81/18/18/55/53/titre10.png
cette image texte serait placée tout en haut, comme sur la couverture faite sous photofiltre comme je l'ai fais ci dessous: https://i.servimg.com/u/f81/18/18/55/53/page-d15.jpg
avatar

Shak
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 19/05/2013

http://universite-les-camel.forumactif.org/
Shak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par [Nihil] Lun 20 Mai 2013, 20:46

Olalalala... J'ai du mal à comprendre exactement ce que tu veux, tu peux me faire une maquette s'il te plait xDDD ? (un rectangle là où y a le texte, un truc bien schématisé).
Et mettre aussi toutes les images nécessaires Very Happy
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par Shak Lun 20 Mai 2013, 21:43

Oui d'accord xD je pense que ce sera plus facile à comprendre !

Voilà, en fait sur le fond, j'aimerais que dans les rectangles 1, 2 et 3, on puisse les remplir en écrivant comme ici, un message (et ne pas être obligé de passer par photofiltre avec ces copier/coller incessant)

Quelque chose comme ça : https://i.servimg.com/u/f81/18/18/55/53/fond_d11.jpg
avatar

Shak
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 19/05/2013

http://universite-les-camel.forumactif.org/
Shak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par [Nihil] Lun 20 Mai 2013, 22:30

Voici un petit exemple : http://world-of-nihil.forumactif.com/h2-journal
Dans ce style là cela te conviendrait ?
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par Shak Mar 21 Mai 2013, 18:30

Oui ça me va parfaitement ! ^^

Mais il y a un bug non? Du texte vole sur le côté droit de la page ...
avatar

Shak
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 19/05/2013

http://universite-les-camel.forumactif.org/
Shak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par [Nihil] Mar 21 Mai 2013, 18:58

Effectivement, j'avais un petit bug sous -webkit- que je n'avais pas vu ^^
C'est maintenant corrigé.

Tu souhaites mettre ce contenu à quel endroit ? Dans un post de forum ? Dans une page web ?
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par Shak Mar 21 Mai 2013, 19:00

Dans un post de forum ^^
avatar

Shak
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 19/05/2013

http://universite-les-camel.forumactif.org/
Shak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par [Nihil] Mar 21 Mai 2013, 20:15

Donc, sur ton forum personnel il faut que tu crées une page html (il y a les explications pour cela sur le forum en cherchant dans les astuces), dans laquelle tu va mettre ce code là :

Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="UTF-8">
   <title>Journal</title>
   <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   <style>
div.article {
   background: #DEDEDE url("http://www.servimg.com/u/f81/18/18/55/53/fond_d10.jpg") no-repeat;  /*  BACKGROUND DE L'ARTICLE, C'EST ICI QU'ON CHANGE L'IMAGE*/
   width: 550px;
   margin: auto;
   text-align: center;
}

div.haut {
   height: 250px; /*  Plus la valeur est grande plus il y a aura de l'espace en haut*/
}

div.textes {
   -moz-column-count:2;
   -webkit-column-count:2;
   column-count:2;
   -moz-column-gap:10px;
   -webkit-column-gap:10px;
   column-gap:10px;
   padding: 5px;
}

p.paragraphe, p.fondblanc {
   width: 220px;
   margin: 10px 0;
}

.num1 {
   background: url("http://i.imgur.com/A3u1qQT.png") no-repeat center;  /* On remplace le lien par l'image de fond pour le titre numéro 1 */
}

.num2 {
   background: url("http://i.imgur.com/A3u1qQT.png") no-repeat center;
}

.num3 {
   background: url("http://i.imgur.com/A3u1qQT.png") no-repeat center;
}

.num4 {
   background: url("http://i.imgur.com/A3u1qQT.png") no-repeat center;
}

p.paragraphe {
   text-align: justify;
   margin-bottom: 20px;
}
</style>
</head>
 
<body>
   <div id="content">
      <div class="article">
      
         <div class="haut"></div>
         
         <div class="textes">
            <p class="fondblanc num1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
            <p class="paragraphe">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti suscipit ratione voluptatibus voluptates eum! Saepe dolores dicta unde quos ullam consectetur quasi esse veritatis eveniet provident debitis cumque voluptatibus iure. ipsum dolor sit amet, consectetur adipisicing elit. Repellat animi nam ullam iusto ratione cumque labore facilis excepturi deserunt quam qui ea cum magni incidunt nesciunt ut veniam beatae quasi.</p>
            <p class="fondblanc num2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="paragraphe">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti suscipit ratione voluptatibus voluptates eum! Saepe dolores dicta unde quos ullam consectetur quasi esse veritatis eveniet provident debitis cumque voluptatibus iure. ipsum dolor sit amet, consectetur adipisicing elit. Repellat animi nam ullam iusto ratione cumque labore facilis excepturi deserunt quam qui ea cum magni incidunt nesciunt ut veniam beatae quasi.</p>
            <p class="fondblanc num3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p class="paragraphe">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti suscipit ratione voluptatibus voluptates eum! Saepe dolores dicta unde quos ullam consectetur quasi esse veritatis eveniet provident debitis cumque voluptatibus iure. ipsum dolor sit amet, consectetur adipisicing elit. Repellat animi nam ullam iusto ratione cumque labore facilis excepturi deserunt quam qui ea cum magni incidunt nesciunt ut veniam beatae quasi.</p>
            <p class="fondblanc num4">Lorem ipsum dolor sit amet</p>
         </div>
         
      
      </div>
   
   
   
   
   
   
   
   </div>
</body>
</html>

Ensuite pour utiliser le code il te faudra utiliser une iframe (voir tuto ici)

Je te laisse regarder un peu le code par toi même, voir ce que tu en comprends, et ensuite poses moi les questions que tu veux ^^
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'une page de journal

Message par Shak Mar 21 Mai 2013, 21:00

Merci c'est parfait ! mon soucis a été résolu à merveille ! Merci mille fois !
avatar

Shak
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 19/05/2013

http://universite-les-camel.forumactif.org/
Shak a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum