Mise en page d'un post (journal)

2 participants

Page 2 sur 2 Précédent  1, 2

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

Rappel du premier message :

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) - Page 2 La_feu10

Voici le haut de mon image

Mise en page d'un post (journal) - Page 2 Haut_d10

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

Mise en page d'un post (journal) - Page 2 Centre10

Le fond


Mise en page d'un post (journal) - Page 2 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) - Page 2 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 Lunathiel Jeu 13 Jan 2011 - 16:59

J'ai modifier un peu le code CSS pour que ça colle mieux^^

Et une chose à dire C'EST MAGNIFIQUE

Qu'entendez-vous par une version minimale? Je trouve celà très bien moi^^ et même superbe

J'ai juste une remarque je ne suis pas arrivée à centré le texte en haut à gauche dans la 3e table... Comme je l'ai montré sur mon image =>
Mise en page d'un post (journal) - Page 2 Centra10


Voici le CSS adapté:

Code:
/*-------Journal----------- */

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


    /* c'est nouveau */

    .ptable {
        margin: 0px  0px 0px 50px;
        width: 625px;
        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: 60px 40px 0px 0px;
      background: url(http://i39.servimg.com/u/f39/14/59/60/98/fond_d11.png) no-repeat;
      text-align: right;
      background-position: center top;
      font-size:120%;
    }

Et le 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"/> Lorem ipsum dolor sit amet,

[size=12]consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.[/size]</td><td width="2%"></td><td width="18%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr></table>
</div><h3>[img]http://i39.servimg.com/u/f39/14/59/60/98/signat10.png[/img]</h3></div>


Encore un 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 Jeu 13 Jan 2011 - 17:31

Merci Embarassed

Version minimale dans le sens ou vos trois cellules de tableaux et les images peuvent être contrôlées par la CSS.

C'est un exemple : aligne la troisième cellule vers le haut.
je suis passé par le code. en ajoutant valign = top Wink

Code:
<td width="18%" valign="top">Lorem


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"/> Lorem ipsum dolor sit amet,

[size=12]consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.[/size]</td><td width="2%"></td><td width="18%" valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr></table>
</div><h3><img src="http://i39.servimg.com/u/f39/14/59/60/98/signat10.png"/ ></h3></div>

Complexifier la CSS est correct si tous vos Papyrus ont la même disposition sinon les messages html ou bbcode avec "Styles" sont préférables.

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 Jeu 13 Jan 2011 - 18:30

Magnifique!!!! Un grand merci pour ce magnifique travail!!!!!!

On peu clôturer maintenant =)

thumleft
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 Jeu 13 Jan 2011 - 18:38

Embarassed et merci Wink

Je pense faire un tutoriel.


Puis-je utiliser vos images (en vous citant évidemment) ou dois-je en trouver d'autres ?




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 2 sur 2 Précédent  1, 2

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