Nettoyage de feuille de style CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Nettoyage de feuille de style CSS

Message par SweetGumiho le Dim 1 Mar 2015 - 22:33

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://thewitcher.jdrforum.com/

Description du problème

Bonjour/bonsoir,
J'aurais besoin d'un petit nettoyage et d'une réorganisation de ma feuille de style CSS (cela pourrait être la cause de blocage de certains scripts).

La voici :

Code:
#wrap {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: 0 solid #FFFFFF;
}
body {
   background-position: top center;
   background-attachment: scroll;
        background-repeat: no-repeat;
  }
.inputbox {
   background-color: #3c3c3c;
   border: 1px solid #BCBCBC;
   color: #ffffff;
   padding: 2px;
   cursor: text;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
dl.codebox {
   padding: 3px;
   background-color: #FFFFFF;
   border: 1px solid #C9D2D8;
   font-size: 1em;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   border: 1px solid #101010;
}
.forabg {
   background-color: #262627;
   margin-bottom: 4px;
   clear: both;
   border: 2px solid #;
   padding: 0px 5px;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   border: 1px solid #101010;
   background-image: url(http://imageshack.com/a/img838/9827/fsga.png);
   -o-transition: background-color 0.2s linear; 
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.panel {
   margin-bottom: 4px;
   padding: 0px 10px;
   background-image: url(\'\');
   border: 1px solid #101010;   
   background-repeat: repeat-x;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   background-color: #262627;
   border: 1px solid #101010;
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.post {
   padding: 0 10px;
   margin-bottom: 4px;
   background-repeat: no-repeat;
   background-position: 100% 0;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   background-color: #262627;
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.postbody /*justification automatique des posts*/ {
display: block;
text-align: justify;
padding: 10px;
}
.postprofile {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important;
    border-radius: 5px 5px 5px 5px;
    color: #999;
    display: inline;
    margin: 5px 0 0;
    min-height: 80px;
    position: relative;
    text-align: center;
    width: 17%;
    word-wrap: break-word;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 5px;
}
dl.codebox {
    background-color: #1E1D1B;
    border: 1px solid #878787;
}
ul.profile-icons {
   margin-top: 10px;
   list-style: none;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.module {
   background-image: url(http://i60.servimg.com/u/f60/14/70/09/25/gradie22.png);
   border: 1px solid #101010;   
   background-repeat: repeat-x;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   background-color: #262627;
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;
}
.signature {
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
   border-color: #111010;
}
.row2 {
    background-color: #0D0C0B;
    background-image: url("http://imageshack.com/a/img690/452/q962.png");
    background-position: center top;
    background-repeat: repeat-x;
}
.row1 {
    background-color: #0D0C0B;
    background-image: url("http://imageshack.com/a/img690/452/q962.png");
    background-position: center top;
    background-repeat: repeat-x;
}
blockquote {
    background: url("http://imageshack.com/a/img809/2250/voys.png") no-repeat scroll 0 0 #C1A780;
    border: 0 none #4C402D;
    border-radius: 10px;
    padding-right: 25px;
}
.panel {
    background-color: #000000;
    background-image: url("");
    background-repeat: repeat-x;
    border-radius: 10px;
    margin-bottom: 4px;
    padding: 0 10px;
}
a.button1, a.button2, button.button2, input.button1, input.button2 {
    background-color: #1E1D1B;
    background-image: url("http://imageshack.com/a/img849/7503/zow4.png");
    border: 0 none;
    color: #B89E7D;
}
#search-box input {
display: none;
}
#search-box input.button1 {
display: none;
}
input.search {
display: none;
}
#smiley-box{
  display:none;
}
 
.slidesmile{
  position:relative;
  top:39px; left:705px;
  z-index:4;
}
.forabg .lastpost { width:25% }
.forabg .dterm { width:70% !important }
.navig {
    position: fixed;
    top:0;
    width:100%
    background: black; /*couleur de fond de la barre de navigation*/
    box-shadow: 0 2px 10px black;  /*effet d'ombre sous la barre de navigation*/
}
.navig a {
    font-family: 'Alegreya SC'; /*police des liens*/
    font-size: 14px; /*taille police des liens*/
    color: #6F7D7D;  /*couleur des liens*/
}
.navig a:hover {
    color: #4D7999;  /*couleur des liens au survol*/
    letter-spacing: 1px;  /*espacement des lettres au survol (0=normal)*/
}
.navig li {
    display: inline-block;
    padding: 12px;  /*marge autour des liens*/
  .gauche {
    float:left;
}
.linklist {
    text-align: center; /*pour centrer les liens au dessus des catégories*/
    color: #222325;
}
.linklist a {
    color: #222325; /*couleur des liens au dessus des catégories*/
}

Merci d'avance.


Dernière édition par SweetGumiho le Dim 1 Mar 2015 - 23:34, édité 1 fois

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyage de feuille de style CSS

Message par MlleAlys le Dim 1 Mar 2015 - 23:10

Il existe plusieurs sites en ligne qui permettent de remettre en forme et corriger des feuilles de style css ^^
J'utilise facilement http://jsfiddle.net/ , en collant le code dans la partie css, puis en cliquant sur "tidy up", mais son désavantage et qu'il remet tous les commentaires à la ligne ^^"

Voilà corrigé :
Code:
#wrap {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: 0 solid #FFFFFF;
}
body {
    background-position: top center;
    background-attachment: scroll;
    background-repeat: no-repeat;
}
.inputbox {
    background-color: #3c3c3c;
    border: 1px solid #BCBCBC;
    color: #ffffff;
    padding: 2px;
    cursor: text;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
dl.codebox {
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #C9D2D8;
    font-size: 1em;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #101010;
}
.forabg {
    background-color: #262627;
    margin-bottom: 4px;
    clear: both;
    border: 2px solid #;
    padding: 0px 5px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #101010;
    background-image: url(http://imageshack.com/a/img838/9827/fsga.png);
    -o-transition: background-color 0.2s linear;
    -moz-box-shadow : 0 0 9px #000000;
    -webkit-box-shadow : 0 0 9px #000000;
}
.panel {
    margin-bottom: 4px;
    padding: 0px 10px;
    background-image: url(\'\');
 border: 1px solid #101010;
    background-repeat: repeat-x;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    background-color: #262627;
    border: 1px solid #101010;
    -moz-box-shadow : 0 0 9px #000000;
    -webkit-box-shadow : 0 0 9px #000000;
}
.post {
    padding: 0 10px;
    margin-bottom: 4px;
    background-repeat: no-repeat;
    background-position: 100% 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    background-color: #262627;
    -moz-box-shadow : 0 0 9px #000000;
    -webkit-box-shadow : 0 0 9px #000000;
}
.postbody {
    display: block;
    text-align: justify; /*justification automatique des posts*/
    padding: 10px;
}
.postprofile {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important;
    border-radius: 5px 5px 5px 5px;
    color: #999;
    display: inline;
    margin: 5px 0 0;
    min-height: 80px;
    position: relative;
    text-align: center;
    width: 17%;
    word-wrap: break-word;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 5px;
}
dl.codebox {
    background-color: #1E1D1B;
    border: 1px solid #878787;
}
ul.profile-icons {
    margin-top: 10px;
    list-style: none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}
.module {
    background-image: url(http://i60.servimg.com/u/f60/14/70/09/25/gradie22.png);
    border: 1px solid #101010;
    background-repeat: repeat-x;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    background-color: #262627;
    -moz-box-shadow : 0 0 9px #000000;
    -webkit-box-shadow : 0 0 9px #000000;
}
.signature {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border-color: #111010;
}
.row2 {
    background-color: #0D0C0B;
    background-image: url("http://imageshack.com/a/img690/452/q962.png");
    background-position: center top;
    background-repeat: repeat-x;
}
.row1 {
    background-color: #0D0C0B;
    background-image: url("http://imageshack.com/a/img690/452/q962.png");
    background-position: center top;
    background-repeat: repeat-x;
}
blockquote {
    background: url("http://imageshack.com/a/img809/2250/voys.png") no-repeat scroll 0 0 #C1A780;
    border: 0 none #4C402D;
    border-radius: 10px;
    padding-right: 25px;
}
.panel {
    background-color: #000000;
    background-image: url("");
    background-repeat: repeat-x;
    border-radius: 10px;
    margin-bottom: 4px;
    padding: 0 10px;
}
a.button1, a.button2, button.button2, input.button1, input.button2 {
    background-color: #1E1D1B;
    background-image: url("http://imageshack.com/a/img849/7503/zow4.png");
    border: 0 none;
    color: #B89E7D;
}
#search-box input {
    display: none;
}
#search-box input.button1 {
    display: none;
}
input.search {
    display: none;
}
#smiley-box {
    display:none;
}
.slidesmile {
    position:relative;
    top:39px;
    left:705px;
    z-index:4;
}
.forabg .lastpost {
    width:25%
}
.forabg .dterm {
    width:70% !important
}


/*BARRE DE NAVIGATION*/

.navig {
    position: fixed;
    top:0;
    width:100%;
    background: black; /*couleur de fond de la barre de navigation*/
    box-shadow: 0 2px 10px black; /*effet d'ombre sous la barre de navigation*/
}
.navig a {
    font-family:'Alegreya SC'; /*police des liens*/
    font-size: 14px; /*taille police des liens*/
    color: #6F7D7D; /*couleur des liens*/
}
.navig a:hover {
    color: #4D7999; /*couleur des liens au survol*/
    letter-spacing: 1px; /*espacement des lettres au survol (0=normal)*/
}
.navig li {
    display: inline-block;
    padding: 12px; /*marge autour des liens*/
}

/*FIN BARRE DE NAVIGATION*/


.gauche {
    float:left;
}
.linklist {
    text-align: center; /*pour centrer les liens au dessus des catégories*/
    color: #222325;
}
.linklist a {
    color: #222325; /*couleur des liens au dessus des catégories*/
}


Dernière édition par MlleAlys le Dim 1 Mar 2015 - 23:23, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyage de feuille de style CSS

Message par SweetGumiho le Dim 1 Mar 2015 - 23:13

Oui, merci j'ai testé mais ce n'est pas vraiment ce que je souhaite. Apparemment il ne range pas l'ordre des différentes "catégories", etc., en plus de tout remettre à la ligne. Je préférerais vraiment qu'un volontaire m'aide à la main (ça me paraît plus fiable), surtout que pour l'instant il n'est pas trop long encore... :/

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyage de feuille de style CSS

Message par MlleAlys le Dim 1 Mar 2015 - 23:17

comment ça, "ranger l'ordre des catégories" ? xD
(et en attendant ça permet de retrouver facilement des accolades manquantes quand la mise en page se décale alors qu'elle ne devrait pas, ce qui était le cas ici Wink )

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyage de feuille de style CSS

Message par SweetGumiho le Dim 1 Mar 2015 - 23:24

J'entendais par là mettre les différents éléments du CSS dans l'ordre le plus efficace.
Et je ne sais pas comment faire les espaces correctement, ça va tout me déstructurer alors ce que je voudrais c'est que cela soit clairement organisé aussi (que je vois bien les différentes parties et qu'elles soient "nommées" par exemple), pas que nettoyé avec les accolades qui manquent. Wink

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyage de feuille de style CSS

Message par Alzufen le Dim 1 Mar 2015 - 23:25

R'soir

J'ai corrigé au mieux les trucs inutiles, en enlevant ce qui semblait servir à rien, les préfixes qui ne servent plus, et les propriétés un peu étrange qui n'ont pas de grande utilité comme ça pour les réduire. (Du genre : "background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important;" où j'ai pas trop compris l'intérêt). Par contre, il y a peut-être des class/id ou des propriétés qui te servent à rien, pour ça je ne peux pas vraiment savoir, il faudrait que je vérifie les balises et tout une par une, ce serait vachement long, mais théoriquement, tu peux tenter de supprimer les trucs un par un et de voir si ça change quelque chose sur ton forum, si ça change rien ça peut être retiré je pense ^^ Mais vérifie bien partout, c'est ça le soucis, parfois les codes influencent sur des tout petit trucs et on s'en rencontre que longtemps après l'avoir retiré XD

J'ai aussi rangé un maximum de chose dans un ordre plus compréhensible, bien que chaque code à son propre style et son propre ordre, il faudra faire le tiens de préférence Wink Et j'ai aussi enlevé les class/id qui étaient en double et donc la première ne servait à rien, seule la deuxième était pris en compte.

Code:
/****** GENERAL ******/

#wrap {
   border:0;
}
body {
   background-position:top center;
   background-attachment:scroll;
   background-repeat:no-repeat;
}

.inputbox {
   background:#3c3c3c;
   color:#ffffff;
   padding:2px;
   border:1px solid #BCBCBC;
   border-radius:10px;
   cursor:text;
}

dl.codebox {
   background:#1E1D1B;
   font-size:1em;
   padding:3px;
   border:1px solid #878787;
   border-radius:10px;
}

.forabg {
   background:url(http://imageshack.com/a/img838/9827/fsga.png) #262627;
   margin-bottom:4px;
   padding:0px 5px;
   border-radius:10px;
   border:1px solid #101010;
   box-shadow:0 0 9px #000000;
   clear:both;
}

.forabg .lastpost {
   width:25%;
}
div.forabg ul.topiclist dd.dterm {
   width: 70%;
}

.panel {
   background:#000000;
   padding:0px 10px;
   margin-bottom:4px;
   border-radius:10px;
   border:1px solid #101010;
   box-shadow:0 0 9px #000000;
}

#search-box input,#search-box input.button1,input.search,#smiley-box {
   display:none;
}

.slidesmile {
   position:relative;
   top:39px;
   left:705px;
   z-index:4;
}

/****** NAVIGATION *******/

.navig {
   position:fixed;
   background:#000;
   width:100%; /*couleur de fond de la barre de navigation*/
   top:0;
   box-shadow:0 2px 10px #000; /*effet d'ombre sous la barre de navigation*/
}
.navig a {
   font-family:'Alegreya SC'; /*police des liens*/
   font-size:14px; /*taille police des liens*/
   color:#6F7D7D; /*couleur des liens*/
}
.navig a:hover {
   color:#4D7999; /*couleur des liens au survol*/
   letter-spacing:1px;/*espacement des lettres au survol (0=normal)*/
}
.navig li {
   display:inline-block;
   padding:12px; /*marge autour des liens*/
}

/****** PAGE DES SUJETS ******/

.post {
   background:#262627;
   padding:0 10px;
   margin-bottom:4px;
   border-radius:10px;
   box-shadow:0 0 9px #000000;
}
.postbody /*justification automatique des posts*/ {
   display:block;
   text-align:justify;
   padding:10px;
}
.postprofile {
   position:relative;
   min-height:80px;
   width:17%;
   background:rgba(0,0,0,0.4);
   margin:5px 0 0;
   padding:5px;
   color:#999;
   text-align:center;
   word-wrap:break-word;
   border:1px solid rgba(0,0,0,0.25);
   border-radius:5px;
   box-shadow:0 1px 3px rgba(0,0,0,0.6) inset,0 0 0 1px rgba(255,255,255,0.05),0 1px 0 rgba(255,255,255,0.1);
}

ul.profile-icons {
   margin-top:10px;
   list-style:none;
   border-radius:10px;
}

.module {
   background:url(http://i60.servimg.com/u/f60/14/70/09/25/gradie22.png) repeat-x #262627;
   border:1px solid #101010;
   border-radius:10px;
   box-shadow:0 0 9px #000000;
}
.signature {
   border-radius:10px;
}

/****** CASE DES TABLEAUX DE FORUMACTIF ******/

.row2,.row1 {
   background:url(http://imageshack.com/a/img690/452/q962.png) center top repeat-x #0D0C0B;
}

/***** BALISE BLOCKQUOTE ******/

blockquote {
   background:url(http://imageshack.com/a/img809/2250/voys.png) no-repeat scroll 0 0 #C1A780;
   border:0;
   border-radius:10px;
   padding-right:25px;
}

/****** BUTTON ET INPUT *******/

a.button1,a.button2,button.button2,input.button1,input.button2 {
   background:url(http://imageshack.com/a/img849/7503/zow4.png) #1E1D1B;
   border:0;
   color:#B89E7D;
}


/****** CATEGORIE ******/

.gauche {
   float:left;
}
.linklist {
   text-align:center; /*pour centrer les liens au dessus des catégories*/
}
.linklist a {
   color: #222325; /*couleur des liens au dessus des catégories*/
}

Sans Espace:
Et parce que sous FA j'aime pas avoir des espaces en début de code CSS parce que FA fait pas la même taille d'espace quand on fait tabulation, voici une version sans les espaces :

Code:
/****** GENERAL ******/

#wrap {
border:0;
}
body {
background-position:top center;
background-attachment:scroll;
background-repeat:no-repeat;
}

.inputbox {
background:#3c3c3c;
color:#ffffff;
padding:2px;
border:1px solid #BCBCBC;
border-radius:10px;
cursor:text;
}

dl.codebox {
background:#1E1D1B;
font-size:1em;
padding:3px;
border:1px solid #878787;
border-radius:10px;
}

.forabg {
background:url(http://imageshack.com/a/img838/9827/fsga.png) #262627;
margin-bottom:4px;
padding:0px 5px;
border-radius:10px;
border:1px solid #101010;
box-shadow:0 0 9px #000000;
clear:both;
}

.forabg .lastpost {
width:25%;
}
div.forabg ul.topiclist dd.dterm {
width: 70%;
}

.panel {
background:#000000;
padding:0px 10px;
margin-bottom:4px;
border-radius:10px;
border:1px solid #101010;
box-shadow:0 0 9px #000000;
}

#search-box input,#search-box input.button1,input.search,#smiley-box {
display:none;
}

.slidesmile {
position:relative;
top:39px;
left:705px;
z-index:4;
}

/****** NAVIGATION *******/

.navig {
position:fixed;
background:#000;
width:100%; /*couleur de fond de la barre de navigation*/
top:0;
box-shadow:0 2px 10px #000; /*effet d'ombre sous la barre de navigation*/
}
.navig a {
font-family:'Alegreya SC'; /*police des liens*/
font-size:14px; /*taille police des liens*/
color:#6F7D7D; /*couleur des liens*/
}
.navig a:hover {
color:#4D7999; /*couleur des liens au survol*/
letter-spacing:1px;/*espacement des lettres au survol (0=normal)*/
}
.navig li {
display:inline-block;
padding:12px; /*marge autour des liens*/
}

/****** PAGE DES SUJETS ******/

.post {
background:#262627;
padding:0 10px;
margin-bottom:4px;
border-radius:10px;
box-shadow:0 0 9px #000000;
}
.postbody /*justification automatique des posts*/ {
display:block;
text-align:justify;
padding:10px;
}
.postprofile {
position:relative;
min-height:80px;
width:17%;
background:rgba(0,0,0,0.4);
margin:5px 0 0;
padding:5px;
color:#999;
text-align:center;
word-wrap:break-word;
border:1px solid rgba(0,0,0,0.25);
border-radius:5px;
box-shadow:0 1px 3px rgba(0,0,0,0.6) inset,0 0 0 1px rgba(255,255,255,0.05),0 1px 0 rgba(255,255,255,0.1);
}

ul.profile-icons {
margin-top:10px;
list-style:none;
border-radius:10px;
}

.module {
background:url(http://i60.servimg.com/u/f60/14/70/09/25/gradie22.png) repeat-x #262627;
border:1px solid #101010;
border-radius:10px;
box-shadow:0 0 9px #000000;
}
.signature {
border-radius:10px;
}

/****** CASE DES TABLEAUX DE FORUMACTIF ******/

.row2,.row1 {
background:url(http://imageshack.com/a/img690/452/q962.png) center top repeat-x #0D0C0B;
}

/***** BALISE BLOCKQUOTE ******/

blockquote {
background:url(http://imageshack.com/a/img809/2250/voys.png) no-repeat scroll 0 0 #C1A780;
border:0;
border-radius:10px;
padding-right:25px;
}

/****** BUTTON ET INPUT *******/

a.button1,a.button2,button.button2,input.button1,input.button2 {
background:url(http://imageshack.com/a/img849/7503/zow4.png) #1E1D1B;
border:0;
color:#B89E7D;
}


/****** CATEGORIE ******/

.gauche {
float:left;
}
.linklist {
text-align:center; /*pour centrer les liens au dessus des catégories*/
}
.linklist a {
color: #222325; /*couleur des liens au dessus des catégories*/
}

Edit : MlleAlys a été plus rapide que moi, mais elle n'a pas enlevée les préfixes inutiles, ni même les propriétés inutiles tel que "border: 0 solid #FFFFFF" inutile de lui attribuer la propriété "solid" et la couleur, si la bordure n'existe pas (0). Et sinon, pour être complémentaire à jsfiddle pour trier le code correctement il y a : http://tools.arantius.com/tabifier qui marche aussi avec le HTML et le JS Wink

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyage de feuille de style CSS

Message par MlleAlys le Dim 1 Mar 2015 - 23:32

Non c'est vrai, je n'ai corrigé d'un premier abord que les "graves" en l'occurrence ici une accolade manquante, les autres étant des propriétés qui effectivement "ne servent à rien" mais n'empêche pas l'application du reste, mais c'est vrai que j'aurais pu être plus attentive ^^"

Quand à l'organisation d'une feuille de style, le mieux est encore de le faire soi même au fur et à mesure, puisque vous être la lus à même de savoir à quoi servent les codes, et donc de les mettre dans la bonne "catégorie" ^^
Et vous pouvez vous même ajouter des commentaires pour organiser votre css de cette façon :
Code:
/* COMMENTAIRE */

Il n'y a effectivement rien de pire que de se retrouver avec une feuille de styles "en bazar" alors qu'elle fait déjà des dizaines et des dizaines de ligne ! xD
Mais avec un peu d'attention, on évite facilement cela en le faisant soi même au fur et à mesure...

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyage de feuille de style CSS

Message par SweetGumiho le Dim 1 Mar 2015 - 23:34

Un grand merci à vous deux. J'ai marqué la page pour les deux sites que vous m'avez proposé. Sinon pour le nettoyage de la feuille de style CSS, c'est exactement ce que je voulais, merci beaucoup ! ♥ J'ai beaucoup apprécié tes explications en plus Kidkiller37, même si je n'ai vraiment que des bases en codage, c'est sûrement comme ça que cela finira par rentrer... Problème résolu ! Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyage de feuille de style CSS

Message par Alzufen le Dim 1 Mar 2015 - 23:38

J'ai l'habitude de faire ce genre de choses donc bon Razz

C'est vrai que le cas le plus grave était une accolade manquant, mais bon, le reste était quand même assez gênant et étrange bien que ça ne pénalisait pas le code, qui sait si une mise à jour des navigateurs ne va pas tout faire planter XD C'est ce que je dis toujours à ceux qui font des trucs qui ne sont pas dans les normes HTML... Comme par exemple les ID qui se répètent plusieurs fois sur une page.

Et oui, le mieux est de faire les commentaires par soi-même, j'en ai fait un peu mais beaucoup de choses se retrouvent dans "Général" car je ne savais pas à quoi ça correspondait Razz Et perso moi un code CSS en bordel j'arrive à m'y retrouver, c'est l'art de classer bien les choses dès le début sans mettre de commentaire et avec des class qui sont bien nommées Razz

Au plaisir de t'avoir aidé ^^

Alzufen
***

Masculin
Messages : 172
Inscrit(e) le : 31/07/2011

http://ysias.forumactif.org/
Alzufen a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Nettoyage de feuille de style CSS

Message par SweetGumiho le Dim 1 Mar 2015 - 23:40

Le problème était en effet que j'ai récupéré le thème de base d'Hitskin et que même avec mes faibles connaissances en codage j'avais pu remarquer que le CSS était "sale" (et bordélique). C'est dommage, surtout que c'est apparemment un des thèmes les plus utilisés... Confused

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum