| Contour autour de l'avatar (messages) | |
|
|
Invité Invité
| Aïe. Donc on va faire le contraire, tu remets l'url de l'image dans la case approprié, puis on va espacé le texte de l'image, toujours avec une div: - Code:
-
<div class="nomdetadiv">Ton texte</div> Le CSS que je t'ai donné tu peux l'effacer et le remplacer par celui ci: - Code:
-
.nomdetadiv{ margin-left: 2px; /*Marge gauche qui espacera ton texte à l'image*/ } | | |
|
| |
Parady
{ Membre }
Messages : 42
| Sa n'espace pas du tout, c'est toujours.. ? Normal.
| | |
|
| |
Invité Invité
| peut être que je me suis trompé, remplace margin-left par - Code:
-
padding-left | | |
|
| |
Parady
{ Membre }
Messages : 42
| |
| |
Invité Invité
| tu peux me donner l'image en question je voudrai tester quelque chose? | | |
|
| |
Parady
{ Membre }
Messages : 42
| La voici : http://pictupload.free.fr/images/smallicon7.png | | |
|
| |
Invité Invité
| Merci,
Avec plusieurs tentative, je n'ai pas réussis à trouver. Je crois même que c'est infaisable, je suis désolé. | | |
|
| |
Parady
{ Membre }
Messages : 42
| D'accord, ce n'st pas grave. Mais si tu trouve quelque chose, n'hésite pas | | |
|
| |
Invité Invité
| Oui ne t'inquiète pas, mais ce n'est pas bien grave, si? | | |
|
| |
Parady
{ Membre }
Messages : 42
| C'était surtout pour l'esthétique, le cadre Mais pour séparer le texte de l'image, sa c'est faisable ? Par contre, on peut faire Image - Texte juste à côté ? J'ai trouvé un moyen, c'est bon ! - Code:
-
[left][list][table][tr][td]<div style="border: 2px solid lightgray; padding: 10px; width: 80px; height:80px; -moz-border-radius: 30px;background-image: url('http://pictupload.free.fr/images/smallicon7.png');"></div>[/td][td]Bonjour les petits monstres... Saviez vous que vous allez souffrir ? Non ? Alors il serait temps de vous y préparer, n'est ce pas ? Alors, commençons par ce règlement de trois pages.. Sa ne vous tente pas tellement ? Et deux cents ? Toujours pas ? Alors montons au niveau maximale... Et retenez bien sa : votre administratrice est sadique ! TRES très sadique, d'ailleurs. Une seule bêtises et vous êtes renvoyé èoé. Banni. Mort èwé. Et vous dormirez dans un cercueil comme les vampires. Nyaah ! [/td][/tr][/table][/list][/left] A mettre dans la description de la catégorie, avec un cadre EDIT Teal: Il est interdit de faire des doubles-post. | | |
|
| |
Ai-Chan~~
{ Membre }
Messages : 26
| |
| |
marc442
{ Membre }
Messages : 5
| On doit le mettre ou le code??? | | |
|
| |
marc442
{ Membre }
Messages : 5
| Je parle du premier code de la première page pour les contours d'avatar on doit le mettre ou pour que chaque membre est sa ? Désoler pour le double-post | | |
|
| |
Psycho
Psychopathe
Messages : 3407
| Bonjour, le double-post est interdit. Quand tu as besoin de rajouter quelque chose, utilise plutôt la fonction éditer avec l'icône . Merci de ta compréhension & de faire plus attention à l'avenir (: | | |
|
| |
marc442
{ Membre }
Messages : 5
| Je ne voit pas ton icone de crayon sinon t'inkiète pas j'aurais éditer et encore désolé Edit Psycho : Au temps pour moi, j'avais oublié que tu ne pouvais pas la voir. Désolée (: | | |
|
| |
Kmille1405
{ Membre }
Messages : 13
| Super, merci pour ce tuto !! Ca donne un petit quelque chose en plus au forum...! | | |
|
| |
Morgane*
{ Membre }
Messages : 29
| J'ai essayer le code mais ça ne marche pas :/ Je vous copie colle mon CSS peut être ai-je fait une erreur. - Code:
-
#navigation ul{ list-style-type: none; text-align: center; } #navigation li{ display: inline; text-align: center; margin: 0 10px 0 0; } #navigation li a { padding: 2px 7px 2px 7px; color: #FFF; background-color: #000000; border: 1px solid #ccc; text-decoration: none; } #navigation li a:hover{ background-color: #333333; color: #ffffff; } textarea, .textarea.post, input.post { -moz-border-radius:10px; -webkit-border-radius: 10px; } .bodyline { -moz-border-radius:10px; } .forumline{ background-color: #COULEUR; -moz-border-radius: 10px ; border: 3px #COULEUR solid; } .titre_categorie { background: #COULEUR; /*fond*/ -moz-border-radius-topleft: 50px; /*arrondi angle gauche*/ -moz-border-radius-topright: 50px; /*arrondi angle droit*/ -webkit-border-radius-top-left: 50px; /*arrondi angle gauche*/ -webkit-border-radius-top-right: 50px; /*arrondi angle droit*/ margin-top: 10px; /*ne pas modifier*/ margin-bottom: -10px; /*a modifier selon vos goûts*/ text-align: center; /*alignement du texte*/ height: auto; /*hauteur à modifier selon vos goûts*/ width: 500px; /*largeur à modifier selon vos goûts*/ margin-left: 350px; /*pour déplacer la position des titres des catégories*/ padding-top: 1px !important; /*espace entre la bordure et le texte*/ padding-bottom: 5px !important; /*espace entre la bordure et le texte*/ -moz-text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/ -webkit-text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/ text-shadow: 2px 2px 2px #COULEUR; /*ombre sur le texte*/ } .souforums{ font-variant: small-caps ; margin-left: 375px; } .messages_sujets_derniers_sujets { margin-left: VALEURpx; /*espace entre le bord gauche et la bordure*/ padding-top: VALEURpx; /*espace entre le texte et la bordure du haut*/ padding-left: VALEURpx; /*espace entre le texte et la bordure gauche*/ padding-bottom: VALEURpx; /*espace entre le texte et la bordure du bas*/ padding-right: VALEURpx; /*espace entre le texte et la bordure droite*/ border-top: VALEURpx solid #COULEUR; border-left: VALEURpx solid #COULEUR; border-bottom: VALEURpx solid #COULEUR; -moz-border-radius-topleft: VALEURpx; /*arrondir l'angle gauche du haut*/ -moz-border-radius-bottomleft: VALEURpx;/*arrondir l'angle gauche du bas*/ }
/*affichage derniers messages*/ .derniers_sujets { padding: VALEURpx; /*espace entre le texte et la bordure*/ margin: VALEURpx; /*espace entre le bord et la bordure*/ border: VALEURpx dashed #COULEUR; -moz-border-radius-topleft: VALEURpx; /*arrondir l'angle gauche du haut*/ -moz-border-radius-bottomright: VALEURpx; /*arrondir l'angle droit du bas*/ text-align: center; } /* Menu navigation */ a.mainmenu { padding-right: Xpx; background-color:#COLOR; color: #; font-size:Xpx; font-variant: small-caps; text-align: center; }
/* Menu navigation au survol de la souris */ a.mainmenu:hover { padding-right:Xpx; background-color:#COLOR; color: #; font-size:Xpx; font-variant: small-caps; text-align: center; border: Xpx solid #COLOR; }
.vignettes {-moz-border-radius:7px; background-color: #ffffff; padding-right:10px; padding-left:10px; padding-bottom: 3px; padding-top:3px;}
a { font-variant: small-caps; }
a:before { content: ""; }
a:hover{ letter-spacing : 2px; }
a:hover { background-color:#ffffff;} -moz-border-radius: XXpx; -webkit-border-radius: XXpx; border-radius: XXpx;
.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 #9E8479; } | | |
|
| |
SayaLovesHim
{ Membre }
Messages : 7
| Merci beaucoup c'est super ! | | |
|
| |
Chachoubidou
{ Membre }
Messages : 17
| ça ne marche pas pour moi non plus ... Dommage, ça rendait vraiment bien sur l'exemple >< | | |
|
| |
Love'less
{ Membre }
Messages : 13
| Bonjour, avant ce code marchait très bien, depuis que j'ai changée mon css, il ne fonctionne plus, que dois je faire ? Merci. Voici mon code :
- Spoiler:
/*CONTRE LES EDITIONS*/ tr.post span.gensmall { display: none; }
/* DETAIL */
body { cursor: default } a:hover { cursor:ne-resize; }
a:link { letter-spacing: 1px; } a:visited { letter-spacing: 1px; } a:hover { letter-spacing: 1px; } a:active { letter-spacing: 1px; }
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{ text-shadow: #000000 1px 1px 1px; } a:hover{ text-shadow: #000000 1px 1px 1px; }
*/ CONTOUR DE L'AVATAR */
.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 #595656; }
u{border-bottom: 1px solid;border-color:#d5cec8;text-decoration: none; -moz-border-radius:10px;}
I{border-bottom:none; color:#ED8787;text-decoration: none }
a:hover{text-transform:uppercase;}
.bodylinewidth { width:70%}
a.forumlink{ -moz-border-radius: 7px 7px 7px 7px; background-color: #ffffff; border-bottom: 2px dotted #9b9fa2; color:#oooooo; font-family: Arial; font-size: 11px; font-weight: lighter; letter-spacing: 2px; display:block; text-align: left; }
a.forumlink:hover, a.forumlink:hover:visited{ background-color: #ffffff; border-left: 9px solid #dbc8cf; border-right: 9px solid #dbc8cf; -moz-border-radius:6px;}
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; }
.quote{ font-family: Tahoma; font-size: 11px; color: #666e70; line-height: 125%; background-color: #1f1f1f; border: #1f1f1f; border-style: solid; border: 1px #1f1f1f; 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: #666e70; background-color: #1f1f1f; border: #1f1f1f; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px border: 1px #c4bfb5; dotted; -moz-border-radius:6px;}
input,textarea, select { -moz-border-radius-bottomleft:9px; -moz-border-radius-bottomright:9px; -moz-border-radius-topleft:9px; -moz-border-radius-topright:9px; }
a {font-variant: small-caps;} .forumline{-moz-border-radius:15px;} .bodyline {-moz-border-radius:40px;}
a.forumline{ background-color: #ffffff; border: 5px #C5C5C5 solid; }
body {background-repeat: no-repeat;} background-position: none; } a.mainmenu{ text-decoration: none; color : #C5C5C5; } a.mainmenu:hover{ text-decoration: none; border: 1px dotted #CDCDCD; color : #c1bbb3; }
.forumline{ background-color: #ffffff; border: 5px #ffffff solid; }
a.mainmenu:link, a.mainmenu:visited{ background-color: #ECEBEA; border-left: 9px solid #a69f9b; border-right: 6px solid #a69f9b; -moz-border-radius:13px; border: 1px #d6d2ca double; }
.milieu {width: 90%; margin: 0px; border: 1px solid #eeeeee;-moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 5px; background-color:#e2e1d7}
.statistiques { border:0px; background-image: url("https://nsa14.casimages.com/img/2010/05/01/100501065250309168.png"); background-repeat: no-repeat; background-position: center; height:211px; /* HAUTEUR DE VOTRE IMAGE DE FOND, C'EST UNE VARIABLE */ }
.groupes { background-color:#dad0c7; /* FOND DES NOMS DE GROUPES */ border: 1px #D0D0D0 dotted; /* POUR METTRE LE CONTOUR EN POINTILLES */ -moz-border-radius : 5px 5px 5px 5px; /* ARRONDI DES CONTOURS */ height:40px; /* HAUTEUR DES ENCADRES */ padding-right:24px; /* SÉPARATION ENTRE LES GROUPES */ padding-left:24px; padding-bottom:1px; font-size:13px; /*TAILLE ECRITURE */ font-weight: bold; /* STYLE DE L'ECRITURE */ text-align:center; text-decoration: none !important; } a.forumlink { background-color: #transparent; text-shadow: #dad0c7 1px 1px 1px; background-image: url('https://i.servimg.com/u/f67/14/07/23/03/gtrfb10.png'); color: #989b96; display: block; font-family: Freestyle Script; font-size: 16px; text-transform: uppercase; text-align: center; letter-spacing: -1px; -moz-border-radius:5px; -moz-box-shadow: 0px 2px 2px #a49896; }
a.forumlink { background-color: #transparent; text-shadow: #dad0c7 1px 1px 1px; background-image: url('https://i.servimg.com/u/f67/14/07/23/03/gtrfb10.png'); color: #989b96; display: block; font-family: Courier New; font-size: 16px; text-transform: uppercase; text-align: center; letter-spacing: -1px; -moz-border-radius:5px; -moz-box-shadow: 0px 2px 2px #a49896; }
a.forumlink:hover{ background-color: #transparent; text-shadow: #635f5e 1px 1px 1px; background-image: url('https://i.servimg.com/u/f67/14/07/23/03/gtrfb10.png'); color: #f9fced; display: block; font-family: Courier New; font-size: 16px; text-transform: uppercase; text-align: center; letter-spacing: -1px; -moz-border-radius:5px; -moz-box-shadow: 0px 2px 2px #a49896; }
| | |
|
| |
kiflesjaps
{ Membre }
Messages : 34
| Quelqu'un pourrais me donner la démarche a suivre s'il vous plait ? Merci d'avance | | |
|
| |
*Dream_On
{ Membre }
Messages : 8
| Bonjour et merci pour ton code!^^ Toutefois j'ai un problème... Il ne s'affiche pas et j'ai la grosse impression que c'est parce que j'ai des erreurs dans ma feuille CSS XD. Quelqu'un saurait où est située l'erreur? Je vous en serait éternellement reconaissante! =) - Spoiler:
- Code:
-
/* BARRE NAVIGATION MAJUSCULE */ a.mainmenu { text-transform: uppercase; }
a.mainmenu:hover { /* pour le survol */ text-transform: uppercase; } tr.post span.gensmall { display: none !important; } .forumline{ border: 2px #dc3010 dashed; }
.postbody { display: block; padding-left: 100px; padding-right: 100px; text-align:justify; }
a.forumlink:link, a.forumlink:visited { font-family: georgia; text-transform : uppercase; text-align: center; font-size: 100%; border-bottom: 5px solid #dc3010; color: #dc3010; letter-spacing: 1px; display: block; -moz-border-radius:10px; }.postdetails.poster-profile a img { margin: auto; display: block; margin-bottom: -10px; }
a.forumlink:hover, a.forumlink:hover:visited { background-image: url("http://img4.imageshack.us/img4/3402/cherrycl.jpg"); color: #000000; text-align: center; display: block; border-bottom: 5px solid #729aa3; -moz-border-radius:10px; } .a { font-variant: small-caps; } table.bodylinewidth { position: relative; top: -9px; } .postbody, td.row1 span.gensmall { text-align: justify !important; display: block; }
padding-left: 100px; padding-right: 100px;
/* ================= ===== Message d'accueil ===== script by James1920 de CSSACTIF et LBTPROD - Novembre 13, 2010 http://www.themes-fa.com - BY-NC (http://creativecommons.org/licenses/by-nc/2.0/fr/)
================= */
/*----------------- Ma g�n�ral ----------------- */
/* Pour les défilement */ #scroller_container { padding-top: 15px; overflow: hidden; } /* CSS Hack Safari */ #dummy { ;# } #scroller_container { overflow: auto; }
/*le tableau invisible */
.table25 { border: none ; }
/* Liens */
.a2 { display: block; width: 130px; color: black; text-align:center; border: 1px white; -moz-border-radius: 5px; height: 30px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; }
.a2:hover {
background-color: white; color: blue; }
#table22 /* fond du ma */ { width: 770px; background-color: #dad7a2; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; }
/*-----------------Titre----------------- */
/* Le titre special pour le texte de bienvenu */
.h2_themebienvenu { font-size: 14px; background-color: #e7f0f2; padding: 6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; color: black; text-align: center; margin: 10px; /max-width: 367px; }
/* le titre special pour les credits */
.h2_themecredit { font-size: 14px; background-color: #e7f0f2; padding: 6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; color: black; text-align: center; margin: 10px; /max-width: 160px; }
/* le titre pour les autres boites */
.h2_theme { font-size: 14px; background-color: #e7f0f2; padding: 6px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; color: black; text-align: center; margin: 10px;
}
/* effet de transparance FF */
.transparence { background-color: transparent; border: none; opacity: 0.5; }
.transparence:hover{ background-color: transparent; border: none; opacity: 2; }
/*-----------------Les boites contenant les textes----------------- */
/* Navigation */
.navi_ma { background-color:#e7f0f2; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; color: black; font-size: 16px; height: 300px; margin: 10px; width: 130px; padding: 5px; line-height:34px; -webkit-box-shadow: 4px 4px 0 #e6e6e6; -moz-box-shadow: 4px 4px 0 #e6e6e6; -khtml-box-shadow: 4px 4px 0 #e6e6e6; padding-top: 20px;
}
/* News */
.news { background-color: #e7f0f2; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; color: black; font-size: 14px; height: 120px; width: 160px; margin: 10px; overflow-y: auto; overflow-x: visible; padding: 5px; -webkit-box-shadow: 4px 4px 0 #e6e6e6; -moz-box-shadow: 4px 4px 0 #e6e6e6; -khtml-box-shadow: 4px 4px 0 #e6e6e6; }
/* Partenaires */
.partenaire_test { background-color: #e7f0f2; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; color: black; font-size: 14px; height: 105px; width: 160px; margin: 10px; padding: 5px; -webkit-box-shadow: 4px 4px 0 #e6e6e6; -moz-box-shadow: 4px 4px 0 #e6e6e6; -khtml-box-shadow: 4px 4px 0 #e6e6e6; padding-top: 20px;
}
/* message de bienvenu */
#bienvenu_ma { background-color: #e7f0f2; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; color: black; font-size: 14px; height: 120px; margin: 10px; overflow-y: auto; overflow-x: visible; padding: 5px; -webkit-box-shadow: 4px 4px 0 #e6e6e6; -moz-box-shadow: 4px 4px 0 #e6e6e6; -khtml-box-shadow: 4px 4px 0 #e6e6e6; width: 370px; } /* membres staffs */
.staff { background-color: #e7f0f2; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; color: black; font-size: 10px; height: 105px; width: 180px; margin: 10px; padding: 5px; font-size: 14px; -webkit-box-shadow: 4px 4px 0 #e6e6e6; -moz-box-shadow: 4px 4px 0 #e6e6e6; -khtml-box-shadow: 4px 4px 0 #e6e6e6; padding-top: 20px; }
/*crédits */
.credits { background-color: #e7f0f2; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; color: black; font-size: 14px; height: 105px; width: 160px; margin: 10px; padding: 5px; -webkit-box-shadow: 4px 4px 0 #e6e6e6; -moz-box-shadow: 4px 4px 0 #e6e6e6; -khtml-box-shadow: 4px 4px 0 #e6e6e6; padding-top: 20px;
}
/*-----------------inffobulles----------------- */
div.infobulle { position: relative; float: left; color: black; }
div.infobulle span { display: none; /* ceci masque l'infobulle */ } div.infobulle:hover { background: none; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */ color: black; }
/* style de l infobulle */
div.infobulle:hover span { display: inline; /* on affiche l'infobulle */ position: absolute; top: 10px; /* on positionne notre infobulle */ background-color: #e7f0f2; color: black; padding: 3px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */ text-align: center; font-size: 14px; }
/*Catégories*/
a.forumlink{"-moz-border-radius: 7px 7px 7px 7px; font-weight: lighter; background-color: #ededed; border-bottom: 5px double #ededed; display:block; text-align: center; -moz-border-radius: 7px 7px 7px 7px; }
.contour { text-align: center; border: 2px solid #D2AF44; padding: 5px; margin: 0px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
/* QUI EST EN LIGNE */
.statistiques{ border:2x; background-image: url("URL DE L'IMAGE DU QEEL"); background-repeat: no-repeat; background-position: center; height:320px}
.groupes{ background-color:#FFFFF ;border: 0px #FFFFF dotted; -moz-border-radius : 5px 5px 5px 5px; height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px; font-size:15px;font-weight: bold;text-align:center; text-decoration: none !important;} /*EFFET TEXTE*/ .lettrine { float: left; font-size: 90px; padding-top: 10px; margin-bottom: 10px; border: 5px solid #09C; background-color:#900; text-align: center; font-family: Monotype Corsiva; color: #FFF; height: 40px;}
//* CONTOUR AVATAR */
.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 #FF7F50; }
| | |
|
| |
Contenu sponsorisé
| |
| |
| Contour autour de l'avatar (messages) | |
|