CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Mise en forme de message personnalisé | |
| Ravener
{ Membre }
Messages : 70
| Bien le bonjour à vous! Je viens ici aujourd'hui car j'aurais besoin d'un peu d'aide avec un code pour mon forum SoulCalibur - Untold Legends. Mise en SituationAlors je vous mets en contexte. Dampierre est notre animateur et un genre de PNJ. Puisque le personnage est relativement excentrique et totalement unique, nous voulions qu'il puisse avoir une mise en forme de messages bien à lui. Du coup, après quelques heures de bricolage, j'en suis venue à ce résultat.
- Spoiler:
Vous l'aurez donc compris, le résultat final doit ressembler à ça. J'utilise également les images suivantes pour ce faire. Le header : https://2img.net/r/ihimizer/img843/7854/headerljt.png le footer : https://2img.net/r/ihimizer/img827/1567/footer1f.png le content : https://2img.net/r/ihimizer/img705/6496/contentyz.png le somptueux Dampierre ! : https://2img.net/r/ihimizer/img52/2447/dampierre.png
Alors maintenant, faut coder le tout. Ce que j'ai tenté de faire, malgré mes capacités de débutante. J'ai donc fait mes test, et j'en suis venu à ce résultat. http://untold-legends.keuf.net/h7-dampierre
( Oui, je test sur une page HTML à part ) Les problèmes Alors comme vous pourrez le constater, il y a de nombreux problèmes. D'abord, il y a le cadre qui n'est visiblement pas correct, ensuite il y a une barre qui sépare les trois parties ( ce qui ne doit pas paraître ), on voit qu'une image veut se et je n'arrive vraiment pas à placer Dampierre ( soit il se place en-dessous du reste, soit il se place à côté).
Aussi, j'aimerais simplifier le code au maximum pour que notre Dampierre puisse les utiliser sans paniquer en voyant 3 millions de codes qu'il ne comprendrait pas. Je peux en mettre dans le CSS pour simplifier le plus possible. RésuméAlors en gros, ce que j'aimerais faire c'est :
- Enlever les barres qui séparent les trois sections pour que se soit uniforme
- Placer Dampierre par-dessus le parchemin, et l'aligner avec le footer ( pour que, comme sur l'image, qu'il ait les pieds à quelques pixels du bas du parchemin )
- Placer le cadre du texte dans le parchemin.
Voici donc les codes que j'utilise. CSS - Code:
-
.titre_entete { font-family: Times New Roman; font-style: italic; font-size: 28px; color: #ffffff; text-align: right; margin-right: 50px; margin-top: 25px; }
.texte_contenu { font-family: Times New Roman; font-size: 12px; color: #ffffff; text-align: justify; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; }
.dampierre { display: block; background: url(http://img52.imageshack.us/img52/2447/dampierre.png) center no-repeat; margin-left: -25px; weight: 228px; height: 500px } Contenu - Code:
-
<table> <tr> <td style="width: 510px; height: 93px; background: url(http://img843.imageshack.us/img843/7854/headerljt.png) no-repeat;"><div class="titre_entete">Chronique de Dampierre 1</div></td><td> </td> </tr><tr> <td style="width: 510px; height: 300px; overflow: auto; background: url(http://img705.imageshack.us/img705/6496/contentyz.png) repeat-y;"><div class="texte_contenu">Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</div></td><td> </td> </tr><tr> <td style="width: 510px; height: 93px; background: url(http://img827.imageshack.us/img827/1567/footer1f.png) no-repeat;"> </td><td></td> </tr> </table> Je vous remercie pour l'aide que vous pourrez m'apporter, même la plus petite. Je me sens un peu cruche en fait, j'arrive à coder des PA à onglets, mais j'arrive pas à faire un simple tableau. | | |
| | | Pon&Zi
{ Membre }
Messages : 123
| Bonjour! J'ai fait un gros ménage dans votre code qui avait des balises inutiles! Le tableau n'était pas nécessaire! Ensuite, j'ai débarrassé votre code de toutes les proprités css pour ne pas mélanger le css et le HTML. Donc voici: - Code:
-
.titre_entete { font-family: Times New Roman; font-style: italic; font-size: 28px; color: #ffffff; text-align: center; padding-top: 35px; padding-left: 20px; margin-bottom: 0px; background-image: URL('http://img843.imageshack.us/img843/7854/headerljt.png'); background-repeat: no-repeat; height: 58px; width: 505px; }
.texte_contenu { font-family: Times New Roman; font-size: 12px; padding-left: 30px; padding-right: 10px; color: #ffffff; text-align: justify; margin-bottom: 0px; background-image: URL('http://img705.imageshack.us/img705/6496/contentyz.png'); bakcground-repeat: repeat-y; width: 465px; height: 450px; }
.defilement_chronique { height: 450px; overflow: auto; }
.pied { background-image: URL('http://img827.imageshack.us/img827/1567/footer1f.png'); background-repeat: no-repeat; height: 93px; width: 505px; }
.dampierre { margin-right: -100px; margin-bottom: 0px; float: right; } titre_entete: Correspond à l'image de tête et au titre de la chronique texte_contenu: Correspond au contenu defilement_chronique: j'ai rajouté le défilement séparément pour que ça n'affecte pas la position de Dampierre. pied: correspond au footer dampierre: J'ai appliqué la propriété float, ce qui le positionne à droite du texte et la marge le fait sortir du cadre. Donc en gros, j'ai regroupé vos propriétés qui étaient un peu trop éparpillées! - Code:
-
<div class="titre_entete">Chronique de Dampierre 1</div><div class="texte_contenu"><img src="http://img52.imageshack.us/img52/2447/dampierre.png" class="dampierre" /><div class="defilement_chronique">Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</div></div><div class="pied"></div> J'ai testé sur mon forum de test, toutefois, n'étant pas infaillible, il se peut qu'il y ait des petits pépins. Si vous avez des questions sur les changements que j'ai apporté dans votre formule, je ferai de mon mieux pour les expliquer! En espérant avoir aidé ~ | | |
| | | Ravener
{ Membre }
Messages : 70
| Magnifique! Vraiment superbe! Énorme merci!!! C'est parfait, je comprends assez bien les codes pour savoir quoi est quoi.
Me reste plus qu'à retoucher un peu les images, je viens de m’apercevoir qu'il y a des ombres qui ne devraient pas être là.
Par contre, y aurait-il moyen pour que le parchemin s'allonge en fonction du texte au lieu de créer un cadre avec une scrollbar? | | |
| | | Pon&Zi
{ Membre }
Messages : 123
| Oui évidemment. Malheureusement, je ne sais pas comment m'assurer que le personnage reste bien près du pied de page, c'est pourquoi j'ai positionné le tout ainsi. =/ Je suppose qu'il faut jouer avec le positionnement, mais je n'y comprends rien. Je laisse la place à quelqu'un qui a plus de connaissances que moi maintenant ^^ | | |
| | | Ravener
{ Membre }
Messages : 70
| D'accord! Merci tout de même de ton aide! Je vais attendre que quelqu'un d'autre vienne donner sa petite touche au code =D | | |
| | | Kiwi
{ Membre }
Messages : 142
| Bonsoir ! Je te propose cette amélioration du CSS de Dreamzz - Code:
-
.titre_entete { font-family: Times New Roman; font-style: italic; font-size: 28px; color: #ffffff; text-align: center; padding-top: 35px; padding-left: 20px; margin-bottom: 0px; background-image: URL('http://img843.imageshack.us/img843/7854/headerljt.png'); background-repeat: no-repeat; height: 58px; width: 505px; }
.texte_contenu { font-family: Times New Roman; font-size: 12px; padding-left: 30px; padding-right: 10px; color: #ffffff; text-align: justify; margin-bottom: 0px; background-image: URL('http://img705.imageshack.us/img705/6496/contentyz.png'); bakcground-repeat: repeat-y; width: 465px; position:relative; }
.defilement_chronique { width: 340px; min-height:500px; }
.pied { background-image: URL('http://img827.imageshack.us/img827/1567/footer1f.png'); background-repeat: no-repeat; height: 93px; width: 505px; }
.dampierre { position:absolute; right:-100px; bottom:-50px; } J'ai modifié le CSS de texte_contenu , de défilement_chronique et de dampierre. J'espère que ça t'ira ainsi ^^ Kiwi | | |
| | | Anoobnyme GOD OF COOKIES
Messages : 1445
| Hop' Je vous conseille tous d'oublié cette manie de mettre des padding de tous les côtés, vous perdez du temps... Mettez juste padding : Vpx; ça s’appliquera pour tous les côté
Sinon pourquoi ne voulez-vous pas créer une div pour pouvoir juste à mettre le texte dans le parchemin ? | | |
| | | Ravener
{ Membre }
Messages : 70
| Superbe!! Vraiment parfait!! Énorme merci à vous tous pour votre aide, c'est exactement ce que je voulais!! Reste plus qu'à aller corriger mes images et on va pouvoir l'utiliser presque immédiatement!
Merci à vous encore! J'étais découragée X'D ! | | |
| | | Psycho
Psychopathe
Messages : 3407
| Hello (: Peut-on considérer que le problème est entièrement résolu ? | | |
| | | Ravener
{ Membre }
Messages : 70
| Oui sans problème! Nous sommes tous très satisfaits ! Merci beaucoup =D | | |
| | | pamina
{ Membre actif }
Messages : 1170
| Good.. Je classe. | | |
| | | Contenu sponsorisé
| | | | | Mise en forme de message personnalisé | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|