Mise en page d'un post (journal)

2 participants

Page 1 sur 2 1, 2  Suivant

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

Résolu Mise en page d'un post (journal)

Message par Lunathiel Sam 8 Jan 2011 - 22:26

Bonjour...

Je suis vraiment déroutée ce soir... Impossible de mettre un titre convenable a ma demande d'aide et pas moyen de choisir dans quel partie faire ma demande...

Enfin voila...

J'aimerais réalisé pour mon forum un journal...

Mise en page d'un post (journal) La_feu10

Voici le haut de mon image

Mise en page d'un post (journal) Haut_d10

Le centre (qui doit se répéter en longueur)

Mise en page d'un post (journal) Centre10

Le fond


Mise en page d'un post (journal) Fond_d10

Et donc voila j'aimerais arriver à mettre en place correctement ces images pour ensuite mettre du texte dessus

Et la encore je ne sais pas comment procéder

Mise en page d'un post (journal) La_feu11

J'aimerais pouvoir mettre une image a droite [1] , du texte juste à coté (avec tout de même une petite marge) [2] qui comme un vrai journal contournerait l'image
et enfin une colonne à droite... [3]

Au secours... J'ai beau essayer par tout les moyens toute seule je suis dépassée...

Merci beaucoup de votre aide


Dernière édition par Lunathiel le Jeu 13 Jan 2011 - 18:35, édité 1 fois
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Dim 9 Jan 2011 - 13:50

Bonjour

Avez-vous ces images en png ou gif avec fond transparent et sans écriture ou est-ce tout ce dont vous disposez ?

Ceci ne fera pas trop beau avec ce fond quadrillé de transparence Wink

Vous pouvez regarder ce tutoriel -> ICI

Et si vous coincez alors demander de l'aide

ge
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Dim 9 Jan 2011 - 14:07



Dernière édition par Lunathiel le Lun 10 Jan 2011 - 18:41, édité 2 fois
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Dim 9 Jan 2011 - 14:11

OK, dans ce cas , j'attends pour vous faire un brouillon de gestion de journal.
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Dim 9 Jan 2011 - 14:12

Message édité! Merci beaucoup de vous penchez sur mon problème!!!!
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Dim 9 Jan 2011 - 14:30

OK
Je termine une aide en cours et je m'occupe de votre codage.

Est-il possible d'avoir l'image de titre sans le texte ?
Ceci est faisable par codage.
Cela serait une solution universelle et non limitée à ce titre.


Il y aura un mélange de feuille de style (CSS) et de code.


ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Dim 9 Jan 2011 - 16:09

L'image du titre =/

Il faut que je le refasse car j'ai déjà imbriqué mon texte dans l'image...

Il faudra donc que je fasse un retour en arrière du texte... Mais avec mon image c'est possible non?
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Dim 9 Jan 2011 - 16:14

Vous pouvez aussi utiliser votre image de pied de page et faire un effet miroir pour la mettre comme celle de titre. N'est ce pas ce que vous avez fait pour les deux images ?

ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Dim 9 Jan 2011 - 16:18

A la base oui mais j'ai du la modifier pour que ça colle, elle ne sont pas tout a fait identique. Sinon je n'avais pas l'effet "roulé" dans ce sens
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Lun 10 Jan 2011 - 12:18

Et voila l'image...

mais moi j'aurais besoin de mettre l'image que j'ai créé avec le haut de mon dessin...

https://sd-1.archive-host.com/membres/images/90513428757421836/tete.png
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Lun 10 Jan 2011 - 12:23

Merci.

Vous pouvez mettre ce titre en image transparente que j'ajouterai à votre entête avec l'image de fond que vous venez de fournir.
Dans ce cas, me préparer cette image de titre les deux images donnant l'image de départ.
Je ne sais pas si je suis clair Wink

Solution plus souple que de refaire une image globale à chaque fois (titre).
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Lun 10 Jan 2011 - 13:36

Ok je pense que j'ai compris oui^^ Je vais vous faire ça dans l'après-midi!!

Un tout grand merci
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Lun 10 Jan 2011 - 14:40

J'attends votre texte de titre avant de commencer le codage.
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Lun 10 Jan 2011 - 18:20

yurk...
Je ne comprends pas je n'arrive plus a héberger une image via archives Host... Je n'ai plus le bouton "choisir" ....

EDIT: Je n'ai pas tout compris mais j'y suis tout de même arrivé XD

https://sd-1.archive-host.com/membres/images/90513428757421836/titre_la_feuille_de_taluca.png

Voila mon image

Cordialement

Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Lun 10 Jan 2011 - 19:27

Merci : j'ai maintenant l'ensemble des données.
Je m'y attache demain matin.

ps : c'est beau.
sunny
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Lun 10 Jan 2011 - 21:09

Merci beaucoup =)
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Mar 11 Jan 2011 - 12:01

Bonjour

J'ai presque terminé mais cette image à un léger souci.
le centre => https://sd-1.archive-host.com/membres/images/90513428757421836/centre_de_la_feuille_de_taluca.png

Vous avez un trait fin noir (une horizontale en bas) qui existe et qui provoque une ligne séparatrice.

Pouvez-vous refaire une image ?
Elle a aussi une taille très légèrement supérieure à l'entête et au bas (1 à 2 pixels) Wink



Le rendu provisoire est très satisfaisant mais je suis tatillon Wink
Spoiler:


Par contre une petite précision :
Vos images sont larges.
Quelle est la largeur de votre zone message et à quelle taille se déclenche le redimensionnement de vos images ?
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Mar 11 Jan 2011 - 13:15

Je vais refaire ces images à mon retour (je vais a un entretien d'embauche =/ )

et pour la largueur de mon image il s'agit d'un journal qui sera probablement sur une page HTLM mais il est vrai que j'ai pensé a le mettre dans un post et ai complétement oublié ce problème...

Comment puis je connaitre la largeur de ma zone de message? Pour alors dans ce cas retailler mes images...

Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Mar 11 Jan 2011 - 13:32

Il faut regarder les dimensions saisies pour le redimensionnement.

Je pense qu'un 750 pixels de large serait suffisant.

Croisons les doigts pour votre entretien.


ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Mar 11 Jan 2011 - 15:05

Voila j'ai retaillée les images pour qu'elles soit de 750px de large^^

Le haut=> https://i.servimg.com/u/f39/14/59/60/98/haut_v10.png
Le titre => https://i.servimg.com/u/f39/14/59/60/98/titre_11.png
Le centre => https://i.servimg.com/u/f39/14/59/60/98/centre15.png
Le bas => https://i.servimg.com/u/f39/14/59/60/98/fond_d11.png

Et pour l'entretien et bien c'est raté XD
La prochaine fois ce sera la bonne

j'ai testé en mettant les liens bout a bout sur mon forum et il n'y a plus de soucis de décalage^^ (ligne noir)


Dernière édition par Lunathiel le Mar 11 Jan 2011 - 15:09, édité 1 fois (Raison : petite précision)
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Mar 11 Jan 2011 - 20:24

Je finalise demain matin.

A demain
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Mar 11 Jan 2011 - 21:21

Ok à demain alors^^

Bonne soirée
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Mer 12 Jan 2011 - 11:47

Voici une proposition

Partie à coller dans un message
Code:
<div class="boite"><h2><img src="http://i39.servimg.com/u/f39/14/59/60/98/titre_11.png"/></h2><p>Le texte qui sera affiché dans le corps du  papyrus ;) les balises <br/> fonctionnent ainsi que les images.
Je pense que la meilleure gestion pour l'affichage est de laisser le centrage en position centrale.
</p><h3>Votre signature en image ou en texte.    Ge80.</h3></div>

La partie à coller dans votre feuille de style
Code:

/* le conteneur global */
.boite {
    margin: 0;
}
/* le conteneur de votre entête */
.boite h2 {
  margin: 0;  /*  tout se colle */
  padding: 0px 0px 0px 250px;  /* positionnement  */
/* ou padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 250px; */
  height: 169px;  /* permettre l’affichage de votre image */
  background: url(http://i39.servimg.com/u/f39/14/59/60/98/haut_v10.png) no-repeat;
  background-position: center top; /* on la centre et alignement haut */
}
/* le conteneur de votre corps de message*/
.boite p {
  font-size:150%; /* pour les essais*/
  color: #000000; /* en noir */
  margin: 0; /* coller à la boite précédente */
  padding: 10px 10px 10px 120px; /* quelques espaces*/
  background-image:  url(http://i39.servimg.com/u/f39/14/59/60/98/centre15.png);
  background-repeat: repeat-y; /* on répète le fond pour agrandir automatiquement l’image de fond */
  background-position: center top; /* on la centre et alignement haut */
  text-align: center; /*  centrage du texte*/
}
/* le conteneur de votre signature */
.boite h3 {
  margin: 0; /* coller à la boite précédente */
  color: #000000; /* en noir*/
  height: 169px; /* permettre l’affichage de votre image */
  padding: 85px 0px 0px 0px;  /* quelques espaces*/
  background: url(http://i39.servimg.com/u/f39/14/59/60/98/fond_d11.png) no-repeat;
  text-align: center; /*  centrage du texte*/
  background-position: center top; /* on la centre et alignement haut */
  font-size:120%;
}

Qu'en pensez-vous ?
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Mer 12 Jan 2011 - 13:58

Il y a comme un petit problème XD

Jugez par vous même

Mise en page d'un post (journal) Journa10

Il faut probablement que je modifie le CSS... mais je ne sais pas trop comment

EDIT: j'ai commencer mes test^^ Pour éviter que le forum ne soit tout déformé j'ai pour commencé changer le positionnement^^
Je continue^^ Si besoin j'appellerais au secours Mr. Green
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Mer 12 Jan 2011 - 15:19

Voila désolé pour le double post mais je suis enfin arrivée à un résultat satisfaisant... Malheureusement je ne peux pas faire un tableau à la place du texte car celui-ci s'intercale entre les images de fond...

Mais alors comment puis-je arriver à une organisation comme j'aurais aimer avoir (voir un peu plus haut?)

Mise en page d'un post (journal) Prasen10
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Mer 12 Jan 2011 - 16:10


Vous désirez un tableau dans cette feuille ou simplement un positionnement ?

Quel serait le contenu des zones différentes de votre image de départ ?
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Mer 12 Jan 2011 - 17:33

Bien je ne sais pas... J'ai une image à mettre sur un coin supérieur droit puis du texte a côté et j'aurais aimer une petite colonne sur la droite comme sur mon image, pour y mettre un autre texte

Mise en page d'un post (journal) La_feu11
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Mer 12 Jan 2011 - 17:51

N'avez-vous pas un exemple à me fournir pour que je regarde les largeurs respectives à mettre en style CSS ?

J'ai déjà modifié la structure pour accueillir une table.

L'image 1 sera dans une cellule de tableau.
Le plus difficile sera la zone 2 si vous voulez un texte qui suive le changement de colonne sous l'image.
Deux solutions sont possibles....
Comment voulez vous organiser concrètement les cases 1 et 2.
La 1 avec seulement une image ?

Que contiendra la colonne 3

ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par Lunathiel Mer 12 Jan 2011 - 20:44

Un exemple? Non je n'en ai pas ceci est sorti de mon imagination XD

Dans le 1 il n'y aurait qu'une image

le 3 du texte principalement avec des liens
Lunathiel

Lunathiel
****

Féminin
Messages : 458
Inscrit(e) le : 30/11/2009

http://thoawin.forumactif.com/
Lunathiel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mise en page d'un post (journal)

Message par ge80 Mer 12 Jan 2011 - 20:49

Donc je ferai trois cellules.
Une qui contiendra l'image et le texte qui entourera l'image (donc zone 1 et 2) , une cellule vide séparatrice de largeur contrôlable et enfin une cellule pour la partie 3.

Pas ce soir car je ne suis pas sur l'ordinateur adapté.
Demain matin à l'aube ceci sera fait.


Edit : voici un brouillon non commenté.

Il faut remplacer les lignes CSS ajoutées par celles-ci.
Un nouveau container pour accueillir la table.

Dans la CSS
Code:
.boite {
    margin: 0;
 }
.boite h2 {
  margin: 0;
  padding: 0px 0px 0px 10px;
  height: 169px;
  background: url(http://i39.servimg.com/u/f39/14/59/60/98/haut_v10.png) no-repeat;
  background-position: left top;
}
.boite div {
 font-size:150%;
  color: #000000;
  margin: 0;
  padding: 10px 10px 10px 10px;
  background-image:  url(http://i39.servimg.com/u/f39/14/59/60/98/centre15.png);
  background-repeat: repeat-y;
  background-position: left top;
  text-align: left ;
}


/* c'est nouveau */

.ptable {
    margin: 0px  0px 0px 50px;
    width: 640px;
    border: 1px dashed red; /* pour que vous le visualisiez */
    border-collapse: collapse; /* pour que vous le visualisiez */
}
.ptable td {
    border: 1px dashed green; /* pour que vous le visualisiez */
}
.boite h3 {
  margin: 0;
  color: #000000;
  height: 169px;
  padding: 85px 0px 0px 520px;
  background: url(http://i39.servimg.com/u/f39/14/59/60/98/fond_d11.png) no-repeat;
  text-align: left;
  background-position: left top;
  font-size:120%;
}
La table est configurable entièrement en CSS ainsi que le positionnement de l'image et ses bords ou espacements.

J'ai fait une version minimale pour voir si ma piste est la bonne.

Voici le codage d'un message.


Code:
<div class="boite"><h2><img src="http://i39.servimg.com/u/f39/14/59/60/98/titre_11.png"/></h2><div><table class="ptable"><tr><td width="80%"><p><img align="left" hspace="5px" src="http://2img.net/i/fa/i/smiles/lol.gif"/> un
petit
texte




entourant cette belle image ou icône.... </td><td width="2%">.</td><td width="18%">Une autre Zone2</td></tr></table>
</div><h3>Une signature.    Ge80.</h3></div>
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

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

- Sujets similaires

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