Comment faire un Background de post constitué de 3 images??

Je ne sais pas si l'intitulé du post est bien clair pour tout le monde, et je crois que c'est pour ca qu'en faisant une recherche sur le site je n'ai trouvé aucune réponse à ma question... bien que je pense qu'elle a probablement été posée ultérieurement!!

Je suis en train de bosser sur un blog perso en utilisant dotclear... et voici ce que j'aimerai pouvoir faire...

En fait ce que j'aimerai pourvoir faire c'est que chaque post puisse se composer en trois parties distinctes..

1. un Graf de départ pour chaque post + Titre du billet + posteur avec date...
2. Un Graf qui se répète et qui serve d'intermédiaire tout le long du post...
3. Enfin... Un Graf qui termine le post... incluant les éventuels commentaires...

Pour référence, J'ai commencé mes premiers tests ici....

http://www.spirale73.com/
et/ou...
http://ouiski.free.fr/Spirale73/

Je n'utilise pour le moment qu'une seule image en fond, et quand le texte est trop long... ben ca dépasse comme vous pouvez le voir!!

Alors, si quelqu'un pouvait me venir en aide sur ce coup la!!!

J'aimerai pouvoir également utilisé cette méthode pour le menu si possible, mais je peux m'en passer pour le moment!!

Voili, voilou, voilà... Premier post sur ce site, j'espère avoir une réponse et pourquoi pas plusieurs.

----------------
Spirale73

http://www.franckmorel.com/
http://mydailysketch.blogspot.com/

Salut.

Tu peux te servir des éléments div et p qui constituent ton post. Dans ton cas tu as une structure du style:

<div class="post">
   <h2>titre</h2>
   <p class="post-info">auteur, date, etc.</p>

   <div class="post-content">contenu du post</div>

   <p class="post-info-co">commentaires</p>
</div>

Il faudra donc donner ton image répétitive au corps du post (post-content). Ton image du haut au div général (post) puisque c'est le seul qui inclut le titre et l'auteur. Et enfin ton image du bas au p des commentaires (post-info-co).
Pour placer correctement la ligne auteur, date, etc., le paragraphe "post-info" peut être placé en position absolue. Dans ce cas, la dvi "post" devra être en relative pour pouvoir servir de référence.
Modifié par <nicolas> (05 Apr 2007 - 08:49)

Bonjour,

Alors, il te faut un bloc conteneur
dans ce bloc un bloc head avec son image de fond
un bloc centre avec en image de fond une "tranche" de ton fond centre contenant les côtés (de gauche à droite) de 10px de haut en repeat-y
Et un bloc pied avec son image de fond. Le tout dans le flux.

Salut,

ghost a écrit :
Alors, il te faut un bloc conteneur
dans ce bloc un bloc head avec son image de fond
un bloc centre avec en image de fond une "tranche" de ton fond centre contenant les côtés (de gauche à droite) de 10px de haut en repeat-y
Et un bloc pied avec son image de fond. Le tout dans le flux.

Même mieux, tu utilise un bloc conteneur pour tout ton post, auquel tu attribue un fond répété en vertical, comprenant les bordures destinées à se répéter.
Ensuite, comme je suppose que tout tes posts commencent par un titre, tu lui attribue une image de background comprenant le haut de ton cadre, en réglant les marges et padding pour que le titre soit placé comme tu le souhaite.
Enfin tu utilise le dernier élément de tes posts (en l'occurence le système de commentaires et trackbacks) avec un background comprenant le bas de ton cadre, et le tour est joué.
Ainsi ton fond sera répété quelle que soit la longueur du conteneur, et les premiers et derniers éléments situés à l'intérieur cacheront respectivement le haut et le bas par les images souhaitées, et le contenu , en s'allongant, obligera le bas du cadre à descendre tout en évitant la rupture de design.

Edit: sinon j'aime bien le look, même s'il faudrait le simplifier quand même un peu pour une meilleure lisibilité
Modifié par Mikachu (05 Apr 2007 - 10:10)