Mise en forme de message personnalisé Bouton_activeMise en forme de message personnalisé Bouton_hoverMise en forme de message personnalisé Fb-hoverMise en forme de message personnalisé Fb-active
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!

Derniers sujets
» Système d'onglets simple et personnalisable
Mise en forme de message personnalisé EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Mise en forme de message personnalisé EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Mise en forme de message personnalisé EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Mise en forme de message personnalisé EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Mise en forme de message personnalisé EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Mise en forme de message personnalisé EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Mise en forme de message personnalisé EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Mise en forme de message personnalisé EmptySam 11 Fév 2023, 06:04 par Krager

-17%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS + Cellular 44mm (plusieurs ...
249 € 299 €
Voir le deal

Partagez
 

Mise en forme de message personnalisé

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://untold-legends.keuf.net/
Ravener
Ravener
{ Membre }
{ Membre }

Féminin Messages : 70



Mise en forme de message personnalisé Empty
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 Situation
    Alors 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.
MessageSujet: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyMer 11 Avr 2012, 17:46
Revenir en haut Aller en bas
http://dreamzz-hime.grafbb.com
Pon&Zi
Pon&Zi
{ Membre }
{ Membre }

Féminin Messages : 123



Mise en forme de message personnalisé Empty
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é ~
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyMer 11 Avr 2012, 20:03
Revenir en haut Aller en bas
http://untold-legends.keuf.net/
Ravener
Ravener
{ Membre }
{ Membre }

Féminin Messages : 70



Mise en forme de message personnalisé Empty
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?
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyMer 11 Avr 2012, 20:13
Revenir en haut Aller en bas
http://dreamzz-hime.grafbb.com
Pon&Zi
Pon&Zi
{ Membre }
{ Membre }

Féminin Messages : 123



Mise en forme de message personnalisé Empty
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 ^^
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyMer 11 Avr 2012, 20:55
Revenir en haut Aller en bas
http://untold-legends.keuf.net/
Ravener
Ravener
{ Membre }
{ Membre }

Féminin Messages : 70



Mise en forme de message personnalisé Empty
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
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyMer 11 Avr 2012, 21:28
Revenir en haut Aller en bas
Kiwi
Kiwi
{ Membre }
{ Membre }

Féminin Messages : 142



Mise en forme de message personnalisé Empty
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
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyJeu 12 Avr 2012, 16:58
Revenir en haut Aller en bas
http://cssmania.com
Anoobnyme
Anoobnyme
GOD OF COOKIES

Masculin Messages : 1445



Mise en forme de message personnalisé Empty
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é Bravo !




Sinon pourquoi ne voulez-vous pas créer une div pour pouvoir juste à mettre le texte dans le parchemin ?
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyJeu 12 Avr 2012, 17:46
Revenir en haut Aller en bas
http://untold-legends.keuf.net/
Ravener
Ravener
{ Membre }
{ Membre }

Féminin Messages : 70



Mise en forme de message personnalisé Empty
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 !
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyJeu 12 Avr 2012, 20:37
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Mise en forme de message personnalisé Empty
    Hello (:
    Peut-on considérer que le problème est entièrement résolu ?
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyVen 13 Avr 2012, 16:37
Revenir en haut Aller en bas
http://untold-legends.keuf.net/
Ravener
Ravener
{ Membre }
{ Membre }

Féminin Messages : 70



Mise en forme de message personnalisé Empty
Oui sans problème! Nous sommes tous très satisfaits !
Merci beaucoup =D
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptyVen 13 Avr 2012, 20:29
Revenir en haut Aller en bas
pamina
pamina
{ Membre actif }
{ Membre actif }

Féminin Messages : 1170



Mise en forme de message personnalisé Empty
Good.. Very Happy

Je classe.
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé EmptySam 14 Avr 2012, 07:35
Revenir en haut Aller en bas
Contenu sponsorisé




Mise en forme de message personnalisé Empty
MessageSujet: Re: Mise en forme de message personnalisé   Mise en forme de message personnalisé Empty
Revenir en haut Aller en bas
 

Mise en forme de message personnalisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Mise en forme d'une PA
» Mise en forme d'une PA
» Mise en forme pa
» Mise en forme
» Mise en forme des catégories "cassée"

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit | Informatique et Internet | Internet