Mise en page d'un post (journal)

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



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 Lunathiel le 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 =>



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://illiweb.com/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
****

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 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://illiweb.com/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
+ 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 Jeu 13 Jan 2011 - 18:30

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

On peu clôturer maintenant =)

thumleft

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

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