Mise en page d'un post (journal)

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



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


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

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 le 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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le Dim 9 Jan 2011 - 14:07

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 => http://sd-1.archive-host.com/membres/images/90513428757421836/haut_de_la_feuille_du_taluca.png

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

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


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

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 le Dim 9 Jan 2011 - 14:11

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

ge80
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le Dim 9 Jan 2011 - 14:12

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

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 le 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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le 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
****

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 le 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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le 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
****

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

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

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 le 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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le 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
****

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 le Lun 10 Jan 2011 - 14:40

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

ge80
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le 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

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

Voila mon image

Cordialement


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 le 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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le Lun 10 Jan 2011 - 21:09

Merci beaucoup =)

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 le Mar 11 Jan 2011 - 12:01

Bonjour

J'ai presque terminé mais cette image à un léger souci.
le centre => http://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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le 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
****

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 le 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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le Mar 11 Jan 2011 - 15:05

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

Le haut=> https://i39.servimg.com/u/f39/14/59/60/98/haut_v10.png
Le titre => https://i39.servimg.com/u/f39/14/59/60/98/titre_11.png
Le centre => https://i39.servimg.com/u/f39/14/59/60/98/centre15.png
Le bas => https://i39.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
****

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 le Mar 11 Jan 2011 - 20:24

Je finalise demain matin.

A demain

ge80
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le Mar 11 Jan 2011 - 21:21

Ok à demain alors^^

Bonne soirée

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 le 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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le Mer 12 Jan 2011 - 13:58

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

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


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 le 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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le 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


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 le 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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
ge80 a été remercié(e) par l'auteur de ce sujet.

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

Message par Lunathiel le 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
****

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 le 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://illiweb.com/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
+ Hyperactif +

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

http://tsi80.pro-forums.fr/
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


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