Création d'une page de journal

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 le 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 : http://i81.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

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] le 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]
# Tropactif #

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

http://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 le 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 !

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] le 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]
# Tropactif #

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

http://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 le Lun 20 Mai 2013 - 19:44

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

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

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] le 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]
# Tropactif #

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

http://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 le 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à : http://i81.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: http://i81.servimg.com/u/f81/18/18/55/53/page-d15.jpg

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] le 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]
# Tropactif #

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

http://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 le 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 : http://i81.servimg.com/u/f81/18/18/55/53/fond_d11.jpg

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] le 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]
# Tropactif #

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

http://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 le 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 ...

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] le 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]
# Tropactif #

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

http://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 le Mar 21 Mai 2013 - 19:00

Dans un post de forum ^^

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] le 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]
# Tropactif #

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

http://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 le Mar 21 Mai 2013 - 21:00

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

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


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