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! |
| Cadre pour les champs du profil. | |
| Pomm Loulou
{ Membre }
Messages : 8
| Bonjour ou bonsoir ! J'ai un peu fouillé sur le forum, et je crois que mes questions n'ont pas encore été posées, si c'est le cas excusez-moi. Je voudrais savoir comment faire : 1) un cadre, du style tableau, pour les champs du profil qui apparaissent sous l'avatar dans les messages ; 2) un rang inscrit dans le cadre de l'avatar ; 3) les champs du profil alignés à droite et non centré - je crois que c'est ma faute, parce que j'ai centré le pseudo et l'avatar.4) une feuille de personnage qui apparaît et disparaît à l'aide d'un lien. Pour vous aider, je vous montre mon forum (a) et celui qui me sert de modèle pour ces problèmes (b). a = | b = |
|
Dernière édition par Pomm Loulou le Mar 09 Fév 2010, 16:47, édité 1 fois | |
| | | Thalie
{ Membre actif }
Messages : 317
| Bonsoir, est ce que je pourrait voir ton template viewtopic_body s'il te plait, que je voit déjà ce que tu as fait, ainsi que ta feuille de style css. Merci | | |
| | | Pomm Loulou
{ Membre }
Messages : 8
| Hum, laissez tomber pour ce qui est du centrage des champs, finalement j'ai tout remis en aligné à droite et le pseudo n'en fera pas une maladie... Pour le reste, ça tient toujours ! Ma feuille de CSS : - Code:
-
tr.post td {padding-left: 20px; }
.postdetails.poster-profile a img { -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border: 5px solid #474747; }
body { background-repeat: no-repeat; }
.forumline{ border: 3px #ccc785 double; }
body { cursor: crosshair } a:hover { cursor:ne-resize; }
I{border-bottom:none; color:#000000;text-decoration: none }
a:hover { text-decoration: none ; color: black ; border-bottom: 1px dotted #B0ADA0; }
a.mainmenu:link, a.mainmenu:visited{ margin-left : 6px; margin-right : 6px; font-family :Georgia; color: #818181; background-color: #631322; text-align:left; border-left: 6px solid #490e19; border-right: 9px solid #631322 ;}
a.mainmenu:hover, a.mainmenu:hover:visited{ color: #908789; border-left: 6px solid #852134; border-right: 9px solid #631322;}
.bodylinewidth { width:60%}
a img { border: none; }
a.mainmenu{ text-decoration: none; color : #000000; } a.mainmenu:hover{ text-decoration: none; color : #B0ADA0; }
a:link {text-decoration: none;} a:hover{text-decoration: none !important;} a { text-decoration: none; } a:link { text-decoration: none; } a:hover { text-decoration: none; } a:hover{text-transform:uppercase;}
.quote{ font-family: Tahoma; font-size: 12px; color: #000000; line-height: 125%; background-color: #636060; border: #cfcdce; border-style: solid; border: 1px #636060 dotted; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; -moz-border-radius:6px;}
.code{ font-family: Courier,Courier New,sans-serif; font-size: 11px; color: #000000; background-color: #636060; border: #636060; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px border: 1px #636060 dotted; -moz-border-radius:6px;}
.forumline{ background-color: #000000; -moz-border-radius: 0px 0px 14px 14px ; border-bottom: 6px #000000 solid; border-top: 1px #000000 dotted; border-right: 1px #000000 dotted; border-left: 1px #000000 dotted;}
a {font-variant: small-caps;}
.postdetails.poster-profile a img { margin: auto; display: block; margin-bottom: -10px; }
a.forumlink:link, a.forumlink:visited { font-family: serif; background-color: #000000; text-transform : uppercase; font-size: 100%; border-bottom: 1px solid #590823; solid
color: #000000; text-align: center; border-left: 6px solid #380424; border-right: 6px solid #380424; letter-spacing: 3px; display: block; }
a.forumlink:hover, a.forumlink:hover:visited{ background-color: #3b3b3b; border-bottom: 1px solid #590823; solid; text-align: center; border-left: 6px solid #380424; border-right: 6px solid #380424; display: block; }
input,textarea, select { -moz-border-radius-bottomleft:9px; -moz-border-radius-bottomright:9px; -moz-border-radius-topleft:9px; -moz-border-radius-topright:9px; }
.opacity img { filter:alpha(opacity=50); -moz-opacity:0.5;opacity: 0.5; }
.opacity img:hover { filter:alpha(opacity=100); -moz-opacity:1;opacity: 1; }
| | |
| | | Thalie
{ Membre actif }
Messages : 317
| Lol tu sais c'est vraiment pas compliquer que le pseudo soit centré mais pas le profil. Enfin je regarde pour tes autres problème. | | |
| | | Pomm Loulou
{ Membre }
Messages : 8
| | | | Thalie
{ Membre actif }
Messages : 317
| ok alors voilà ce que tu as à mettre dans ton template viewtopic_body a la place de: - Code:
-
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</span></strong><br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br /> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span><br /> Tu met ça: - Code:
-
<div class="cadreava"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><div align="center">{postrow.displayed.POSTER_NAME}</span></strong><br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</div></div><br /><br /> <!-- BEGIN profile_field --> <div class="cadrepro">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> <div class="profilmasque" onClick="this.firstChild.value=(this.firstChild.value=='Afficher le profil')?'Masquer le Profil':'Afficher le profil';this.lastChild.style.display=(this.firstChild.value=='Afficher le profil')?'none':'block';" style="text-align: center;"> <input type="button" value="Afficher le profil" class="profil1"/> <div style="display: none; text-align:left;"> {postrow.displayed.POSTER_RPG}</div> </div></div> </span><br /> et voilà le css, que tu doit completer selon tes preference: - Code:
-
.cadreava{ border:XXpx solid #couleur; background-color:#couleur; } .cadrepro{ border:XXpx solid #couleur; background-color:#couleur; }
.profilmasque{ background-color: #couleur; border: XXpx solid #couleur; } Il est possible qu'il y est des erreurs, je suis fatigué lol. Donc dit le mois et je reglerai ça, s'il y en a. | | |
| | | Pomm Loulou
{ Membre }
Messages : 8
| Merci beaucoup !!! Mais ceci ne fonctionne pas comme il faudrait (ça déborde de partout) alors j'ai essayé en faisant les bords ronds comme ça mais c'est tout aussi laid : - Code:
-
.cadreava{ border-bottom:5px solid #474747; background-color:#474747; } .cadrepro{ border-bottom:5px solid #474747; background-color:#474747; }
.profilmasque{ background-color: #474747; border-bottom: 5px solid #474747; }
Et l'autre m'agrandit la police... Avec tous ces codes, je suis un peu perdue, et je ne sais pas où mettre le code pour avoir plus petit... Attends, je fais une capture d'écran pour aider : | | |
| | | Thalie
{ Membre actif }
Messages : 317
| ok alors esaye avec ce code: - Code:
-
<div style="font-size:11px;"> <div class="cadreava"> <span class="name"> <a name="{postrow.displayed.U_POST_ID}"> </a> <strong> <div align="center"> {postrow.displayed.POSTER_NAME} </strong> </span> <br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR} </div> </div> <br /><br /> <div class="cadrepro"> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> </div> <div class="profilmasque" onClick="this.firstChild.value=(this.firstChild.value=='Afficher le profil')?'Masquer le Profil':'Afficher le profil';this.lastChild.style.display=(this.firstChild.value=='Afficher le profil')?'none':'block';" style="text-align: center;"> <input type="button" value="Afficher le profil" class="profil1"/> <div style="display: none; text-align:left;"> {postrow.displayed.POSTER_RPG}</div> </div> </span> </div> <br /> | | |
| | | Pomm Loulou
{ Membre }
Messages : 8
| Oui ça marche !!! Merci merci merci merci ! | | |
| | | Thalie
{ Membre actif }
Messages : 317
| Avec plaisir . | | |
| | | Contenu sponsorisé
| | | | | Cadre pour les champs du profil. | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|