Mise en page d'un post (journal)

[Lunathiel]

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...



Voici le haut de mon image



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



Le fond




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



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

[ge80]

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

Vous pouvez regarder ce tutoriel -> ICI

Et si vous coincez alors demander de l'aide

ge

[Lunathiel]

Oui oui je les ai en Png... Je n'avais pas remarqué que servimg leur avait oter le fond transparent =/

C'est moi qui ai créé cette image...

le haut => https://sd-1.archive-host.com/membres/images/90513428757421836/haut_de_la_feuille_du_taluca.png

le centre => https://sd-1.archive-host.com/membres/images/90513428757421836/centre_de_la_feuille_de_taluca.png

le bas => https://sd-1.archive-host.com/membres/images/90513428757421836/fond_de_la_feuille_de_taluca.png

[ge80]

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

[Lunathiel]

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

[ge80]

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.

[Lunathiel]

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?

[ge80]

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 ?

[Lunathiel]

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]

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

[ge80]

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

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

[Lunathiel]

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

Un tout grand merci

[ge80]

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

[Lunathiel]

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

[ge80]

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

ps : c'est beau.

[Lunathiel]

Merci beaucoup =)

[ge80]

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)



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

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 ?

[Lunathiel]

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...

[ge80]

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.

[Lunathiel]

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)

[ge80]

Je finalise demain matin.

A demain

[Lunathiel]

Ok à demain alors^^

Bonne soirée

[ge80]

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 ?

[Lunathiel]

Il y a comme un petit problème XD

Jugez par vous même



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

[Lunathiel]

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?)

[ge80]

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 ?

[Lunathiel]

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

[ge80]

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

[Lunathiel]

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

[ge80]

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>