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! |
| | Coup de pouce pour un encadrement (: [RESOLU] |  |
|  Mia0712 
{ Membre }
 Messages : 119
![Coup de pouce pour un encadrement (: [RESOLU] Empty](https://2img.net/i/fa/empty.gif) | |
Dernière édition par Mia0712 le Dim 22 Avr 2012, 15:29, édité 1 fois | |
| | | | Anoobnyme GOD OF COOKIES
 Messages : 1445
| Hop' Il me serait bien utile d'avoir tes codes histoire que ça soit fait dans les brefs délais. Merci de ta compréhension.  | | |
| | | | Mia0712
{ Membre }
Messages : 119
| Ma feuille CSS du forum ou les codes que j'ai essayé pour l'encadrement ? x) | | |
| | | | Anoobnyme GOD OF COOKIES
Messages : 1445
| Les deux... ![Coup de pouce pour un encadrement (: [RESOLU] 1688815589](/users/3911/10/76/28/smiles/1688815589.gif) | | |
| | | | Mia0712
{ Membre }
Messages : 119
| Ok d'ac alors :
Feuille CSS ( c'est un forum test ) :
- Spoiler:
- Code:
-
body {
background-repeat: repeat;
}
.forumline{border:1px dotted #91A693;
}
a.infobulle {
position: relative;
color: #91A693;
text-decoration: none;
}
a.infobulle span {
display: none; /* on masque l'infobulle */
font-size: 12px;
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.infobulle:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
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é */
top: 60px; /* on positionne notre infobulle */
left: 60px;
background: #5897DF; /* couleur fond de l'infobulle */
color: #01172F; /* couleur de la police */
padding: 3px;
border: 3px solid #01172F; /* couleur du contour de l'infobulle */
-border-radius: 30 px; /* tous les côtés sont arrondis */
-moz-border-radius: 30 px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30 px; /* tous les côtés sont arrondis */
}
a.blah:hover {
letter-spacing: 5px;
}
.statistiques{
border:0px;
background-image: url("");
background-repeat: no-repeat;
background-position: center;
height:310px;}
.groupes{
background-color: #000000;border: 1px #455e8a solid;
-moz-border-radius : 5px;
-webkit-border-radius: 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;}
.quote{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 10px;
text-indent: 30px ;
color: #0B2C66;
line-height: 125%;
background-repeat: no-repeat;
background-position: top center;
background-color: #627699;
-border-radius: 30px; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.code{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 10px;
text-indent: 30px ;
color: #0B2C66;
line-height: 125%;
background-repeat: no-repeat;
background-position: top center;
background-color: #627699;
-border-radius: 30px; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.spoiler_content{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 10px;
text-indent: 30px ;
color: #0B2C66;
line-height: 125%;
background-repeat: no-repeat;
background-position: top center;
background-color: #627699;
-border-radius: 30x; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.spoiler_closed{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 10px;
text-indent: 30px ;
color: #0B2C66;
line-height: 10%;
background-repeat: no-repeat;
background-position: top center;
background-color: #627699;
-border-radius: 30px; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.code{border: 1px dotted;}
.code{border: -moz-border-radius:6px;}
.quote{border: 1px dotted;}
.quote{border: -moz-border-radius:6px;}
a:hover{text-transform:uppercase;}
a { text-decoration: none; }
span.forumlink {display: block; text-align: center; background-color: #C2CCC3; border-left:9px solid #053614; border-right:9px solid #053614; margin: 4px;}
span.forumlink:hover {background-color: #C8CCC8; border-left-color: #053614; border-right-color: #053614;}
body { cursor: crosshair }
a:hover { cursor:ne-resize; } /*Pour le curseur*/
.forumline{
-moz-border-radius: 8px 8px 8px 8px ;
border-bottom: 3px solid ;
border-top: 3px solid ;
border-right: 3px solid ;
border-left: 3px solid ;}
/*Pour que le QEEL fonctionne : */
.statistiques{
border:0px;
background-image: url("http://img11.hostingpics.net/pics/813772QEEL2.png");
background-repeat: no-repeat;
background-position: left;
height:270px;}
.groupes{
background-color:#D2DBD3;border: 1px #000000 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;} /*Pour que le QEEL fonctionne : */
td.row1{
background-image : url(http://img11.hostingpics.net/pics/590624Fond2.png);
}
td.row2{
background-image : url(http://img11.hostingpics.net/pics/590624Fond2.png);
}
td.row3{
background-image : url(http://img11.hostingpics.net/pics/590624Fond2.png);
}
td.row3Right{
background-image : url(http://img11.hostingpics.net/pics/590624Fond2.png);
}
/*Le premier : pour le fond des sujets et la première catégorie.
Le deuxième : pour la catégorie "messages".
Le troisème : pour les catégiores : "sujets" et "derniers messages".
Le dernier :
Pour mettre une image en fond des catégories*/
body {
background-repeat: repeat;
}
.forumline{border:1px dotted #91A693;
}
a.infobulle {
position: relative;
color: #91A693;
text-decoration: none;
}
a.infobulle span {
display: none; /* on masque l'infobulle */
font-size: 12px;
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.infobulle:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
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é */
top: 60px; /* on positionne notre infobulle */
left: 60px;
background: #5897DF; /* couleur fond de l'infobulle */
color: #01172F; /* couleur de la police */
padding: 3px;
border: 3px solid #01172F; /* couleur du contour de l'infobulle */
-border-radius: 30 px; /* tous les côtés sont arrondis */
-moz-border-radius: 30 px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30 px; /* tous les côtés sont arrondis */
}
a.blah:hover {
letter-spacing: 5px;
}
.statistiques{
border:0px;
background-image: url("");
background-repeat: no-repeat;
background-position: center;
height:310px;}
.groupes{
background-color: #000000;border: 1px #455e8a solid;
-moz-border-radius : 5px;
-webkit-border-radius: 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;}
.quote{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 10px;
text-indent: 30px ;
color: #0B2C66;
line-height: 125%;
background-repeat: no-repeat;
background-position: top center;
background-color: #627699;
-border-radius: 30px; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.code{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 10px;
text-indent: 30px ;
color: #0B2C66;
line-height: 125%;
background-repeat: no-repeat;
background-position: top center;
background-color: #627699;
-border-radius: 30px; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.spoiler_content{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 10px;
text-indent: 30px ;
color: #0B2C66;
line-height: 125%;
background-repeat: no-repeat;
background-position: top center;
background-color: #627699;
-border-radius: 30x; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.spoiler_closed{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 10px;
text-indent: 30px ;
color: #0B2C66;
line-height: 10%;
background-repeat: no-repeat;
background-position: top center;
background-color: #627699;
-border-radius: 30px; /* tous les côtés sont arrondis */
-moz-border-radius: 30px; /* tous les côtés sont arrondis */
-webkit-border-radius: 30px; /* tous les côtés sont arrondis */
border: 1px solid;
}
.code{border: 1px dotted;}
.code{border: -moz-border-radius:6px;}
.quote{border: 1px dotted;}
.quote{border: -moz-border-radius:6px;}
a:hover{text-transform:uppercase;}
a { text-decoration: none; }
span.forumlink {display: block; text-align: center; background-color: #C2CCC3; border-left:9px solid #053614; border-right:9px solid #053614; margin: 4px;}
span.forumlink:hover {background-color: #C8CCC8; border-left-color: #053614; border-right-color: #053614;}
body { cursor: crosshair }
a:hover { cursor:ne-resize; } /*Pour le curseur*/
.forumline{
-moz-border-radius: 8px 8px 8px 8px ;
border-bottom: 3px solid ;
border-top: 3px solid ;
border-right: 3px solid ;
border-left: 3px solid ;}
/*Pour que le QEEL fonctionne : */
.statistiques{
border:0px;
background-image: url("http://img11.hostingpics.net/pics/813772QEEL2.png");
background-repeat: no-repeat;
background-position: left;
height:270px;}
.groupes{
background-color:#D2DBD3;border: 1px #000000 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;} /*Pour que le QEEL fonctionne : */
td.row1{
background-image : url(http://img11.hostingpics.net/pics/590624Fond2.png);
}
td.row2{
background-image : url(http://img11.hostingpics.net/pics/590624Fond2.png);
}
td.row3{
background-image : url(http://img11.hostingpics.net/pics/590624Fond2.png);
}
td.row3Right{
background-image : url(http://img11.hostingpics.net/pics/590624Fond2.png);
}
.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 #FEFEFE;
}
/*Le premier : pour le fond des sujets et la première catégorie.
Le deuxième : pour la catégorie "messages".
Le troisème : pour les catégiores : "sujets" et "derniers messages".
Le dernier :
Pour mettre une image en fond des catégories*/
>> Ca c'est fait ! x)
>> Codes dont j'ai tenté de faire l'encadrement ( en vain u.u ) :
EDIT : pour le code je l'avais effacé de la page CSS, je vais essayer de te refaire le code tel que je l'avais mis o/ | | |
| | | | Anoobnyme GOD OF COOKIES
Messages : 1445
| Bien mais ce n'est pas ce que je voulais, je ne sais pas quelle balise appartient a ton bloc a qui tu veux appliquer les effets. | | |
| | | | Mia0712
{ Membre }
Messages : 119
| Ha ! ... J'espère répondre à ta question : Partie Sous-Forum enfaite, comme dans l'image hébergée. Sincèrement désolée si je ne réponds pas à ce que tu désires... Partie catégorie ? Balise catégorie plutôt ? Arg. EDIT : Voilà ce que j'ai fait : - Code:
-
<div style="overflow: auto; border: 6px solid #8E3557; -moz-border-radius: 10px; font-size:13; color: #000000; background-image:url('http://img546.imageshack.us/img546/9553/grossf6.jpg4)" height="100px" ><span style="color: #dOOO1f; font-size: 30px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center">[size=12][center]TEXTE[/center][/size]</span></div> | | |
| | | | 'Christa 
Lostmindy
Messages : 2856
| Hello ^^ Tu sais que tu pourrais rentabiliser ta feuille CSS et éviter de coder "en dur" les styles dans les descriptions ? Sinon, le jour où tu voudras changer le design de ton forum, tu vas pleurer en devant tout remplacer dans toutes les descriptions  Donc ça : - Code:
-
<div style="overflow: auto; border: 6px solid #8E3557; -moz-border-radius: 10px; font-size:13; color: #000000; background-image:url('http://img546.imageshack.us/img546/9553/grossf6.jpg4)" height="100px" ><span style="color: #dOOO1f; font-size: 30px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center">[size=12][center]TEXTE[/center][/size]</span></div> Tu le remplaces par ça : - Code:
-
<div class="descfo">TEXTE</div> Et tu rajoutes ça dans ton CSS : - Code:
-
.descfo {
overflow:auto;
height:100px;
background-image:url('http://img546.imageshack.us/img546/9553/grossf6.jpg');
text-align:center;
/* bordure : épaisseur / type / couleur */
border: 6px solid #8E3557;
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* mise en forme du texte */
color: #d0001f;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
padding-left: 20px;
} Et voilà x) Petites notes sur ce que tu avais oublié/raté : - En hexadécimal on utilise 0, pas O - Pour l'image de fond, il y avait un 4 à la place d'une simple quote ' - span est une balise inline, tu ne peux pas centrer du texte dedans - Le code que tu as mis dans div et celui dans le span pouvaient être fusionnés sans problème. - la balise div n'a pas d'attribut height, par contre elle a un attribut style et height est une propriété de style CSS - [ center] est l'équivalent de < div style="text-align:center;">, c'est donc un bloc que tu as tenté de placé dans un élément inline (span). Or il ne faut jamais placer d'élément bloc dans un élément inline. - Faut te décider, il y avait font-size:13, 30px et 12 XD | | |
| | | | Mia0712
{ Membre }
Messages : 119
| Merci beaucoup, vraiment (:
Pour arrondir les bordures de mon encadrement, il suffit de rajouter un code d'arrondissement de bordure ou pas ?
Merci (: | | |
| | | | 'Christa
Lostmindy
Messages : 2856
| Ben ya déjà un arrondi '_' CF la partie du css avec border-radius. | | |
| | | | Haldira
{ Membre actif }
Messages : 981
| Puisque le problème est résolu, je déplace le sujet. | | |
| | | | Contenu sponsorisé
| | | | | | | Coup de pouce pour un encadrement (: [RESOLU] | |
|
Sujets similaires | |
|
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
![Coup de pouce pour un encadrement (: [RESOLU] Bouton_active](https://2img.net/h/theme3.cssactif.com/ui/bouton_active.png)
![Coup de pouce pour un encadrement (: [RESOLU] Bouton_hover](https://2img.net/h/theme3.cssactif.com/ui/bouton_hover.png)
![Coup de pouce pour un encadrement (: [RESOLU] Fb-hover](https://2img.net/h/theme3.cssactif.com/facebook/fb-hover.png)
![Coup de pouce pour un encadrement (: [RESOLU] Fb-active](https://2img.net/h/theme3.cssactif.com/facebook/fb-active.png)
![Coup de pouce pour un encadrement (: [RESOLU] Logo](https://2img.net/h/theme3.cssactif.com/logo.png){kind=logo}
