Cindra
{ Membre }
Messages : 23
| Bonjour à Tous ! Alors voilà ... C'est très bête, j'aimerais faire vérifier mon CSS, qu'on me dise tout les trucs à quoi ça sert parce que moi je mets mais je sais plus x) Et aussi, le bidule me dit que ya une erreur avec un nombre impaire de guillement mais je vois pas o.O Merci d'avance ! - Code:
-
body { background-attachment: no-fixed; background-repeat: no-repeat; background-position: top center; }
table.forumline { border:1px dotted; }
a:hover { font-style: italic; }
a { text-decoration: none; }
.traits { border-bottom: 4px solid #000000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
a.forumlink, a.forumlink:hover{ display: block; text-shadow: #ffffff 1px 1px 1px; text-align: center; font-style: oblique; border-bottom: 2px dashed #B96F13; text-decoration:none !important; }
.postdetails.poster-profile a img { margin: auto; display: block; margin-bottom: -10px; }
.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 #B96F13; }
a { text-shadow: 1px 1px 1px #945810; }
.postbody { margin-left: 20px; }
a:hover { letter-spacing : 2px; }
.bodyline { -moz-border-radius:10px; -webkit-border-radius: 20px; }
.limitation-signature img { max-width: 550px; max-height: 550px;
}
.mystats_fa{ padding: 5px; float:right; font-family: verdana; font-size: 10px; font-weight: bold; }
.table_ma { border-collapse: collapse; font-size: 10px; }
.table_ma .titre_bah { height:24px !important; background-color: #B96F13; font-size: 20px; border: 5px solid #EDA54E; background-image: none !important; color: black; font-weight: normal; font-family: arial;
}
.td_ma { width: 280px; border: 2px solid #EDA54E; background-color: #EDA54E; vertical-align: top; }
.tr_ma { }
.texte_barre { overflow-y: auto; overflow-x: visible; height:160px; }
.texte_barre2 { overflow-y: auto; overflow-x: visible; height:250px; }
.a_navig /* les liens à l'état normal */ { display: block; width: 270px; height: 15px; background-color:#B96F13; margin: auto; text-align: center; color: black; /* couleur du texte des liens */ border-left: 5px solid #B96F13; border-right: 5px solid #B96F13; }
.a_navig:hover /* les liens survolé */ { background-color: #EDA54E; border-left: 5px solid #B96F13; border-right: 5px solid #B96F13; }
.kwicks { /* recommended styles for kwicks ul container */ list-style: none; position: relative; margin: 0; padding: 0; } .kwicks li{ /* these are required, but the values are up to you (must be pixel) */ width: 30px; height: 100px;
/*do not change these */ display: block; overflow: hidden; padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */ } .kwicks.horizontal li { /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */ margin-right: 5px; /*Set to same as spacing option. */ float: right; } .kwicks.vertical li{ /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */ margin-bottom: 5px; /*Set to same as spacing option. */ }
#kwick_1 { background-color: #713F38; background-image : url("http://www.hostingpics.net/thumbs/mini_123225P.png"); background-repeat: no-repeat; }
#kwick_2 { background-color: #E2976F; background-image : url("http://www.hostingpics.net/thumbs/mini_230973R.png"); background-repeat: no-repeat; }
#kwick_3 { background-color: #C3C4C9; background-image : url("http://www.hostingpics.net/thumbs/mini_662795H.png"); background-repeat: no-repeat; }
#kwick_4 { background-color: #333333; background-image : url("http://www.hostingpics.net/thumbs/mini_899473N.png"); background-repeat: no-repeat; }
#kwick_5 { background-color: #EDA323; background-image : url("http://www.hostingpics.net/thumbs/51/01/58/mini_510158Sanstitre1bmp.png"); background-repeat: no-repeat; }
.kwicks.horizontal #kwick_5 { margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */ } .kwicks.vertical #kwick_5 { margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */ }
.haut_droite { float: right; width: 420px; background-color: #EDA54E; height: 290px;
}
.image_ma { float: left; width: 398px; background-color: black; height: 290px;
}
.top_titre { width: 410px; height: 24px; background-color: #B96F13; margin: 2px; margin-left: auto; margin-right: auto; }
| | |
|
Kiwi
{ Membre }
Messages : 142
| Bonsoir ! C'est très long ^^ Voici tout ton CSS commenté, après, tu auras peut-être des questions plus pointues, mais bon ^^ J'ai mis aussi quelques commentaires persos - Code:
-
/*Pour le body, autrement dit, l'ensemble du corps de la page*/ body { background-attachment: no-fixed; /* Heu... La propriété background-attachment gère l'image d'arrière plan, pour voir si elle descend quand on scroll ou si elle reste fixe. En l'occurrence "no-fixed" n'existe pas, tu as scroll ou fixed (voire inherit pour les héritages, mais oublie ça si tu t'embrouilles avec les CSS */ background-repeat: no-repeat; /* Le fond ne se répète pas, évite d'avoir un effet "mosaïque" par exemple */ background-position: top center; /* le background de l'image se place tout en haut, mais au milieu en largeur */ }
/* Pour les balises table de classe forumline */ table.forumline { border:1px dotted; /* une bordure en pointillés de 1px */ }
/* Pour les liens au survol de la souris */ a:hover { font-style: italic; /* en italique */ }
/* Pour les liens : pas de décoration (notamment pas de soulignement qui est activé par défaut) */ a { text-decoration: none; }
/*Pour les éléments de classe traits */ .traits { border-bottom: 4px solid #000000; /* bordure en bas de 4px en noir et en ligne droite */ -moz-border-radius: 5px; /* bordure arrondie de 5px (mozilla & co) */ -webkit-border-radius: 5px; /* bordure arrondie de 5px (chrome & co) */ border-radius: 5px; /* bordure arrondie de 5px (autre navigateur me rappelle plus) */ }
/* Pour les liens de classe forumlink, que ce soit en temps normal ou au passage de la souris */ a.forumlink, a.forumlink:hover{ display: block; /* L'élément devient un type block au lieu d'inline */ text-shadow: #ffffff 1px 1px 1px; /* ajout d'une ombre blanche, avec décalage horizontal/vertical d'1px et flou d'1px */ text-align: center; /* texte centré */ font-style: oblique; /* met en italique, ça ressemble un peu à italic */ border-bottom: 2px dashed #B96F13; /* bordure du bas, épaisseur 2px, en tiré, et de couleur #B96F13 */ text-decoration:none !important; /* Pas de décoration sur le texte, en important, sans doute parce qu'il a fallu forcer la priorité, le style devait être défini différemment ailleurs et avoir la priorité */ }
/* J'avoue n'avoir jamais vu cette syntaxe des classes, j'imagine que tu associes un style à toutes les images contenues dans un lien, lui même contenu dans un élément de classe postdetails ET poster-profile */ .postdetails.poster-profile a img { margin: auto; /*gestion des marges externes en automatique : vu comme ça, j'ai l'impression que ça sert à rien, mais j'ai pas une vision globale de ton code */ display: block; /*force l'élément à devenir un block */ margin-bottom: -10px; /* ajoute une marge externe en bas, négative de 10px */ }
/*Tu ajoutes des propriétés aux mêmes éléments que celui juste avant, tu peux fusionner */ .postdetails.poster-profile a img { /* bordure arrondie, mais que pour mozilla... tu aurais pu mettre -moz-border-radius : 10px directement ça aurait été plus vite, et le faire aussi pour chrome, tu l'as fait pour .traits */ -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border: 5px solid #B96F13; /* bordure ligne droite 5px */ }
/* Pour tous les liens : tu peux le fusionner avec le a déjà mis un peu plus haut */ a { text-shadow: 1px 1px 1px #945810; /* ombrage des textes, 1px de décalage horizontal et vertical, 1px de flou et une couleur spécifique */ }
/*Pour les éléments de classe postbody */ .postbody { margin-left: 20px; /* une marge externe à gauche de 20px */ }
/* Pour tous les liens survolés : tu peux le fusionner avec le a:hover déjà mis un peu plus haut */ a:hover { letter-spacing : 2px; /* 2px d'espace entre les lettres */ }
/*Pour les éléments de classe bodyline */ .bodyline { -moz-border-radius:10px; /* bordure arrondie de 10px pour mozilla */ -webkit-border-radius: 20px; /* bordure arrondie de 20px pour chrome > faudrait voir à accorder l'affaire ^^ */ }
/* Pour les images contenues dans les éléments de classe limitation-signature */ .limitation-signature img { max-width: 550px; /*hauteur et largeur maximales définies à 550px */ max-height: 550px; }
/*Pour les éléments de classe mystats_fa*/ .mystats_fa{ padding: 5px; /*marge intérieur de 5px dans tous les sens */ float:right; /* alignement à droite */ font-family: verdana; /* police verdana pour le texte */ font-size: 10px; /* taille 10px en police */ font-weight: bold; /* en gras */ }
/*Pour les éléments de classe table_ma*/ .table_ma { border-collapse: collapse; /* permet de "coller" les cellules d'un tableau, qu'il n'y ait qu'une seule bordure entre les celulles */ font-size: 10px; /* taille de la police à 10px */ }
/*Pour les éléments de classe titre_bah contenus dans les éléments de classe table_ma */ .table_ma .titre_bah { height:24px !important; /* hauteur de 24px en important : je trouve ça bizarre que tu aies besoin de mettre un important là, après, faut voir la configuration du truc, mais bon ^^ */ background-color: #B96F13; /* couleur de fond */ font-size: 20px; /* taille de la police 20px */ border: 5px solid #EDA54E; /* bordure : épaisseur de 5px, ligne simple, couleur */ background-image: none !important; /*pas d'image en background en important, là encore, je trouve ça bizarre que tu en aies besoin */ color: black; /* couleur de la police : noir */ font-weight: normal; /* pas de gras */ font-family: arial; /* police : arial */ }
/*Pour les éléments de classe td_ma*/ .td_ma { width: 280px; /* largeur : 280px */ border: 2px solid #EDA54E; /* bordure à l'épaisseur de 2px, ligne normale, couleur */ background-color: #EDA54E; /* couleur de fond */ vertical-align: top; /* aligne les éléments à l'intérieur de la cellule en haut */ }
/* à supprimer ? ^^ */ .tr_ma { }
/*Pour les éléments de classe texte_barre*/ .texte_barre { overflow-y: auto; /* barre de défilement horizontale en automatique = apparait quand y a besoin, sinon cachée */ overflow-x: visible; /* barre de défilement verticale toujours visible */ height:160px; /* hauteur 160px */ }
/*Pour les éléments de classe texte_barre2 : idem que précédent */ .texte_barre2 { overflow-y: auto; overflow-x: visible; height:250px; }
/*Pour les éléments de classe a_navig "à l'état normal", c'est de toi :) */ .a_navig /* les liens à l'état normal */ { display: block; /* force a devenir un block */ width: 270px; /* largeur */ height: 15px; /* hauteur */ background-color:#B96F13; /* couleur de fond */ margin: auto; /*marges externes en automatique, te permet probablement de gérer le centrage horizontal puisque la largeur est définie */ text-align: center; /* centre le texte */ color: black; /* couleur du texte des liens */ border-left: 5px solid #B96F13; /*bordure à gauche de 5px, ligne droite et couleur */ border-right: 5px solid #B96F13; /* idem à droite */ }
/*Pour les éléments de classe a_navig au survol */ .a_navig:hover /* les liens survolé */ { background-color: #EDA54E; /* couleur de fond */ border-left: 5px solid #B96F13; /* bordure à gauche de 5px, ligne droite et couleur */ border-right: 5px solid #B96F13; /* idem à droite */ }
/*Pour les éléments de classe kwicks */ .kwicks { /* recommended styles for kwicks ul container */ list-style: none; /* pas de puces à tes listes */ position: relative; /*positionnement en relatif */ margin: 0; /* pas de marges externes */ padding: 0; /* pas de marges internes */ }
/*Pour les li contenus dans les éléments de classe kwicks */ .kwicks li { /* these are required, but the values are up to you (must be pixel) */ width: 30px; /* largeur */ height: 100px; /* hauteur */
/*do not change these */ display: block; /* force à devenir un block */ overflow: hidden; /* cache les éventuelles barres de défilement */ padding: 0; /* marges internes à 0 || if you need padding, do so with an inner div (or implement your own box-model hack) */ }
/*Pour les li contenus dans les éléments de classes kwicks ET horizontal */ .kwicks.horizontal li { /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */ margin-right: 5px; /*marge externe à droite de 5px || Set to same as spacing option. */ float: right; /* alignement à droite */ }
/*Pour les li contenus dans les éléments de classes kwicks ET vertical */ .kwicks.vertical li { /* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */ margin-bottom: 5px; /*marge externe en bas de 5px || Set to same as spacing option. */ }
/* Pour les 2 CSS précédents, si tu choisis de faire qu'un truc horizontal, tu peux virer le vertical et vice versa ^^ */
/* pour l'élément ayant l'id kwick_1 */ #kwick_1 { background-color: #713F38; background-image : url("http://www.hostingpics.net/thumbs/mini_123225P.png"); /* une image en fond */ background-repeat: no-repeat; /* pas de répétition du fond, pas d'effet "mosaique" */ }
/* pour celui-là jusqu'à 5, la même que le 1 */ #kwick_2 { background-color: #E2976F; background-image : url("http://www.hostingpics.net/thumbs/mini_230973R.png"); background-repeat: no-repeat; }
#kwick_3 { background-color: #C3C4C9; background-image : url("http://www.hostingpics.net/thumbs/mini_662795H.png"); background-repeat: no-repeat; }
#kwick_4 { background-color: #333333; background-image : url("http://www.hostingpics.net/thumbs/mini_899473N.png"); background-repeat: no-repeat; }
#kwick_5 { background-color: #EDA323; background-image : url("http://www.hostingpics.net/thumbs/51/01/58/mini_510158Sanstitre1bmp.png"); background-repeat: no-repeat; }
/* Pour l'élément ayant l'id kwick_5 et contenu dans un élément de classe kwicks et horizontal */ .kwicks.horizontal #kwick_5 { margin-right: none; /* pas de marge à droite || cancel margin on last kiwck (if you set a margin above) */ }
/* Pour l'élément ayant l'id kwick_5 et contenu dans un élément de classe kwicks et vertical */ .kwicks.vertical #kwick_5 { margin-bottom: none; /* pas de marge en bas || cancel margin on last kiwck (if you set a margin above) */ }
/* Idem, pour les 2 CSS précédents, si tu choisis de faire qu'un truc horizontal, tu peux virer le vertical et vice versa ^^ */
/* Pour les éléments de classe haut_droite */ .haut_droite { float: right; /* alignement à droite */ width: 420px; /* largeur */ background-color: #EDA54E; /* couleur de fond */ height: 290px; /* hauteur */ }
/* Pour les éléments de classe image_ma */ .image_ma { float: left; /* alignement à gauche*/ width: 398px; /* largeur */ background-color: black; /* couleur de fond : noir */ height: 290px; /* hauteur */ }
/* Pour les éléments de classe top_titre */ .top_titre { width: 410px; /* largeur */ height: 24px; /* hauteur */ background-color: #B96F13; /* couleur de fond */ margin: 2px; /* marges extérieures de 2px en haut, bas, droite et gauche */ margin-left: auto; /* marge gauche en automatique */ margin-right: auto; /* marge droite en automatique */ /*les trois dernières lignes auraient pu se résumer : margin:2px auto; */ } Voilà, j'espère avoir pu t'aider, bon courage pour la suite ! Kiwi | | |
|
Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Hello Ton problème est-il toujours d'actualité? S'il a été résolu je te prie d'éditer ton premier message et de cocher l'icône Merci d'avance | | |
|
Murtagh
{ Modérateur }
Messages : 1492
| Bonjour, Le problème n'ayant pas reçu de réponse depuis la dernière relance d'un modérateur, je considère celui-ci comme résolu ou abandonné. Je déplace, et verrouille. Si par ailleurs le problème n'était pas résolu, merci de bien vouloir ouvrir un nouveau sujet en respectant les règles de l'entraide. A bientôt sur { CSS Actif}. | | |
|