taille de vos fichiers css?

taille de vos fichiers css? - HTML/CSS - Programmation

Marsh Posté le 13-10-2005 à 22:14:15    

bonjour,  
 
étant looser apprenti en css, j'ai appris récemment qu'il faut définir le css dans un fichier séparé (c'est préférable).  
Mais apres qq petits exercices, je m'apercois que même en utilisant tres peu le css, ce fichier commence a répertorier pas mal de choses :heink: . J'aimerais savoir quelle est la taille de vos fichiers css, en nombres de lignes  :)  
 
merci d'avance  :)


---------------
OST Anime
Reply

Marsh Posté le 13-10-2005 à 22:14:15   

Reply

Marsh Posté le 13-10-2005 à 23:01:42    

Bonsoir,
étant moi aussi en phase d'apprentissage de xhtml 1.0 et des css, mon premier css fait seulement une 50aine de ligne vu qu'il doit uniquement être appliqué sur ma page d'accueil. Enfin c'est régulièrement revu au fil de mes cours ;).


Message édité par Johnc 3 le 13-10-2005 à 23:02:08
Reply

Marsh Posté le 13-10-2005 à 23:07:01    

Le mieux c'est de découper en plusieurs parties le fichier CSS pour mieux s'y retrouver. Par exemple une CSS avec juste la mise en page, une autre avec que les couleurs, etc... Je trouve ça beaucoup plus pratique.
De toute façon, la plupart du temps, que ce soit avec une ou plusieurs CSS, c'est quand même assez volumineux ;)


Message édité par onizuka_sensei le 13-10-2005 à 23:07:20
Reply

Marsh Posté le 13-10-2005 à 23:08:21    

http://www.martiusweb.net/html/css/style.css
Si tu as envie de compter :D


---------------
Martin
Reply

Marsh Posté le 13-10-2005 à 23:17:15    

merci Martius, c'est sympa d'avoir mis le lien de ton propre css  :) . Enfin je peux voir un vrai fichier. La ca va, 262 lignes, c'est pas si grand que ca finalement  :pt1cable: . Il sert seulement a la page d'accueil? parce que pour une page seulement, oui ca commence a faire bcp   :sweat:  
 
Onizuka_sensei: ca m'a jamais traversé l'esprit de faire en plusieurs fichiers. Seulement si je veux mettre a la disposition du visiteur plusieurs skins possibles pour le site. Sinon, avec une bonne présentation et qq commentaires, ca doit aller je pense.  :)

Message cité 1 fois

---------------
OST Anime
Reply

Marsh Posté le 13-10-2005 à 23:24:46    

Citation :

/*
-------------------
PROPRIETES GLOBALES  
-------------------
*/
 
 
* {
 font-family: Verdana, sans-serif;
 padding: 0;
 margin: 0;
}
 
 
/*
----------------
BLOCS PRINCIPAUX
----------------
*/
 
 
body {
 background: url(/images/background.jpg) fixed no-repeat top left;
 text-align: center; /* bug de centrage sous IE */
}
 
#conteneur {
 width: 100%;
}
 
#main {
 background: rgb(160,159,152);
 border: 1px black solid;
 margin: 0 auto;
 width: 90%;
}
 
 
/*
-----------
HEADERS 1-6
-----------
*/
 
 
h1,h2,h3 {
 border-bottom: 1px black solid;
 font-weight: bold;
 text-align: left;
 padding: 1em 0;
}
 
h1 {
 background: url(/images/header1_gradient.jpg) repeat-x top left;
 font-size: 25px;
 padding: 0;
}
 
h2 {
 background: rgb(190,190,190);
 text-indent: 30px;
 font-size: 16px;
}
 
h3 {
 border-bottom-style: none;
 text-align: center;
 font-size: 11px;
}
 
h4,h5,h6 {
 background: rgb(183,190,198) url(/images/header_gradient.jpg) repeat-y top right;
 border-bottom: 1px black solid;
 vertical-align: middle;
 color: rgb(45,63,85);
 line-height: 20px;
 font-weight: bold;
 font-size: 10px;
 text-indent: 30px;
 text-align: left;
}
 
h5 {
 border-top: 1px black solid;
}
 
h6 {
 clear: both;
 background: rgb(100,100,100) url(/images/w3c.gif) no-repeat center left;
 color: rgb(200,200,200);
 border-top: 1px black solid;
 border-bottom: none;
 text-align: center;
 text-indent: 0;
}
 
 
/*
-----------
PARAGRAPHES
-----------
*/
 
 
p {
 padding: 0.5em 0;
}
 
 
/*
-------------------------
CONTENEUR MENU NAVIGATION
-------------------------
*/
 
 
#conteneur_menu_nav {
 float: left;
 width: 19%;
}
 
 
/*
-------------------
MENUS DE NAVIGATION
-------------------
*/
 
 
#menu_public,#menu_admin {
 background: rgb(220,220,220) url(/images/liens_gauche.gif) repeat-y top left;
 border: 1px black solid;
 border-left: none;
 font-weight: bold;
 font-size: 12px;
 padding: 3px 0;
}
 
* ul {
 list-style: none;
 border: none;
}
 
* li {
 text-indent: 30px;
 text-align: left;
}
 
* li a {
 background: rgb(220,220,220) url(/images/liens_gauche.gif) repeat-y top left;
 color: rgb(120,120,120);
 vertical-align: middle;
 text-decoration: none;
 line-height: 32px;
 display: block;
 width: 100%;
}
 
html>body * li a {
 width: auto;
}
 
* li a:hover {
 background: rgb(205,205,205) url(/images/liens_hover.gif) no-repeat center left;
 color: black;
}
 
 
/*
-----------
PAGE DROITE
-----------
*/
 
 
#page_droite,#page_droite_noir,#page_droite_erreur {
 border: 1px black solid;
 border-right: none;
 margin-bottom: 10px;
 float: right;
 width: 79%;
}
 
#page_droite {
 background: rgb(200,200,200) url(/images/texte_gradient.jpg) repeat-y top right;
}
 
#page_droite_noir {
 background: black url(/images/background_noir.jpg) repeat-y top center;
 text-align: center;
 padding: 80px 0;
}
 
 
/* PAGES D'ERREURS */
 
 
#page_droite_erreur {
 background: rgb(200,200,200);
}
 
#header_page_erreur {
 border-bottom: 1px black solid;
 background: rgb(220,220,220);
 padding: 50px 80px;
 text-align: left;
}
 
#details_page_erreur {
 padding: 15px 80px;
 text-align: left;
 font-weight: bold;
 font-size: 12px;
}
 
 
/* TEXTE PAGE DROITE */
 
 
.texte_page,.texte_page_noir {
 text-align: left;
}
 
/* ---------- */
 
.texte_page,.texte_page a {
 color: rgb(20,20,20);
 margin: 10px 30px;
 font-size: 14px;
}
 
.texte_page a {
 text-decoration: none;
 margin: 0;
}
 
.texte_page a:link,.texte_page a:visited {
 border: 1px rgb(200,200,200) solid;
}
 
.texte_page a:hover {
 background-color: Gainsboro; /* cf. table des couleurs CSS */
 color: rgb(39,60,82);
 border-color: black;
}
 
/* ---------- */
 
.texte_page_noir,.texte_page_noir a {
 color: rgb(120,120,120);
 padding: 20px 15%;
 font-size: 12px;
}
 
.texte_page_noir a {
 text-decoration: underline;
 padding: 0;
}
 
 
/*
-------------
BLOCS ANNEXES
-------------
*/
 
 
#menu_admin_header {
 background: rgb(190,190,190);
 border: 1px black solid;
 border-left: none;
 font-weight: bold;
 font-size: 16px;
 text-indent: 30px;
 text-align: left;
 margin: 10px 0;
}
 
#astl_logo {
 background: rgb(190,190,190);
 border: 1px black solid;
 border-left: none;
 padding: 15px 0;
 margin: 10px 0;
}
 
 
/*
------------------------
PRECHARGEMENT DES IMAGES
------------------------
*/
 
 
#cache {
 position: absolute;
 top: -5000px;
}


 
Hop une de mes feuilles CSS.
Tu remarqueras que pour optimiser le code, je me serts des définitions de propriétés multiples, ce qui est largement mieux que les css générées par les éditeurs, avec 300 lignes de redondance

Message cité 1 fois
Reply

Marsh Posté le 13-10-2005 à 23:32:31    

ANViL a écrit :

Hop une de mes feuilles CSS.


alala, comme ca doit être long de faire un site, purée......... :pfff:  
et sinon t'aurais pas pu mettre un lien comme Martius?  :D


Message édité par kensei le 13-10-2005 à 23:33:19

---------------
OST Anime
Reply

Marsh Posté le 14-10-2005 à 00:06:35    

kensei a écrit :

merci Martius, c'est sympa d'avoir mis le lien de ton propre css  :) . Enfin je peux voir un vrai fichier. La ca va, 262 lignes, c'est pas si grand que ca finalement  :pt1cable: . Il sert seulement a la page d'accueil? parce que pour une page seulement, oui ca commence a faire bcp   :sweat:


L'adresse que j'ai donné est la feuille de style globale, sinon j'ai :
http://www.martiusweb.net/html/css/accueil.css pour la page d'accueil uniquement
http://www.martiusweb.net/html/css/article.css pour la section articles/réalisations
http://www.martiusweb.net/html/css/tutoriaux.css pour la section tutoriaux
http://www.martiusweb.net/html/css/dl.css pour la page des téléchargements
 
entre article.css et tutoriaux.css on retrouve la même chose pour les menus, ça diffère dans la mise en forme de certaines balises comme <p>, <pre> ou <code>...


---------------
Martin
Reply

Marsh Posté le 14-10-2005 à 01:02:52    

200 lignes pour ma part.
 
mais c est un fichier simple.
ca grossit très vites ces petites betes la :D

Reply

Marsh Posté le 14-10-2005 à 02:03:40    

dans des gros projets ou le graphiste s'est laché un peu dans chacun des pages tu atteints de longues très longues CSS, d'ou l'interet de toujours bocou commenter  
 

Code :
  1. /**************************************************
  2. * Dimensions du Site
  3. *      Height Width   Padding Margin
  4. * Cadre Global 100%  880px    x   x (Skyscrapper compris)
  5. *  Bandeau   135px  760px    x   x
  6. *  Partiegauche  x  150px    x   x
  7. *  Centre    x  490px   15px 5px  x (Cadre Global - skyscrapper - PartieGauche - Partiedroite - 30px padding centre)
  8.        (dont 30px padding)  
  9. *  PartieDroite  x  135px    x   x
  10. * Pied de Page 20px  760px    x   x
  11. * Skyscrapper   x  120px;   x   x
  12. *
  13. * /!\ Quand vous modifiez une largeur bien v�rifier que  en largeur:  
  14. *  PartieGauche + Centre + PartieDroite = Bandeau
  15. *  PartieGauche + Centre + PartieDroite + Skyscrapper = Cadre Global
  16. *
  17. * Si ce n'est pas le cas il faut modifier la largeur de la partie centrale.
  18. ***************************************************/
  20. /************************************************
  21. * Styles G�n�riques
  22. *************************************************/
  23. body, html{
  24. margin:0;
  25. padding:0;
  26. text-align: center;
  27. }
  30. * {/*Tous les �l�ments*/
  31. font-family: Verdana, Arial, Helvetica, sans-serif;
  32. font-size : 8pt;
  33. }
  35. A {
  36. text-decoration: none;
  37. }
  39. A:hover {
  40. text-decoration: underline;
  41. }
  43. P {
  44. margin: 5px 0px;
  45. }
  47. form.noform{
  48. display: none;
  49. }
  51. /*Lien*/
  52. a{ color:#8D051D;}
  53. /*Titres*/
  54. h1{
  55. background : url("../Images/FauteuilRougeBlancDroite.gif" ) no-repeat left bottom;
  56. font-size: 12pt;
  57. font-weight:bold;
  58. color:#8D051D;
  59. border-bottom: #8d051d 1px solid;
  60. text-align: left;
  61. padding: 2px 0px 3px 20px;
  62. }
  64. h1.type2{
  65. background : none;
  66. font-size: 13pt;
  67. font-weight:bold;
  68. color: GrayText;
  69. text-align: left;
  70. padding: 2px;
  71. border:none;
  72. }
  74. h2{
  75. font: bold 10pt;
  76. color: #8d051d;
  77. border-bottom: #8d051d 1px solid;
  78. text-align: left;
  79. padding: 2px 0px 3px 0px;
  80. margin-bottom:5px;
  81. }
  83. h3
  84. {
  85.     font-size: 10pt;
  86.     margin-bottom: 5px;
  87.     border-bottom: silver 2px dotted
  88. }
  90. h4{
  91. color:#8D051D;
  92. font-weight: bold;
  93. margin-bottom:4px;
  94. }
  97. /*Liste � puces*/
  98. UL{ list-style: none; margin-left:15px;}
  100. UL LI{
  101. background: url("../Images/PuceJaune.gif" ) no-repeat 0px 5px;
  102. margin-left:0px;
  103. padding-left:15px;
  104. }
  106. TABLE { border-collapse: collapse; border-spacing: 0px;}
  108. INPUT, TEXTAREA{
  109. border:1px solid #8D051D;
  110. margin-top: 2px;
  111. }
  113. FORM SELECT {
  114. margin-top: 3px;
  115. }
  117. INPUT {
  118. clear:right;
  119. vertical-align: middle;
  120. }
  122. INPUT.radio {
  123. border:none;
  124. }
  126. INPUT.checkbox {
  127. border:none;
  128. }
  131. FORM LABEL{
  132. clear:left;
  133. float:left;
  134. width:120px;
  135. font-weight: bold;
  136. color: #8D051D;
  137. }
  139. FORM{ text-align:left; padding:0; margin:0;}
  141. TD.Cadenas {
  142. background: url("../Images/Pictos/Cadenas.gif" ) no-repeat right center;
  143. min-height: 17px;
  144. _height: 17px;
  145. width:180px;
  146. }
  148. DIV.Cadenas {
  149. margin-right: 20px;
  150. }
  154. /************************************************
  155. * Squelette
  156. *************************************************/
  159. #CSSCadreGlobal {
  160. height:auto;
  161. width:760px;
  162. min-width:760px;
  163. margin: auto;
  164. padding: 0;
  165. margin-bottom:5px;
  166. }
  167. #Bandeau {
  168. height: 150px;
  169. margin: 0;
  170. padding: 0;
  171.    background: url("../Images/Bandeau.jpg" ) no-repeat left top;
  172. position : relative;
  173. }
  175. #PartieGauche {
  176. margin: 0;
  177. padding: 0;
  178. vertical-align: top;
  179. padding-bottom:10px;/*S�paration minimum entre le menu et le pied de page, ne marche que pour IE, pour FF cf #Menu*/
  180. /*margin-bottom:10px; /*S�paration minimum entre le menu et le pied de page, ne marche que pour FF, pour IE cf #partiegauche*/
  181. background-color: #8D051D;
  182. }
  183. #PartieGauche DIV.Squelette{
  184. width:135px;
  185. }
  187. #Centre {
  188. padding: 10px 5px;
  189. margin: 0;
  190. vertical-align: top;
  191. }
  192. #Centre DIV.Squelette{ width:480px;}
  194. #PartieDroite {
  195. vertical-align: top;
  196. background-color: #8D051D;
  197. }
  199. #PartieDroite DIV.Squelette{ width:135px;}
  201. #Skyscraper  {
  202. text-align: center;
  203. width:500px;
  204. }
  207. /****************************
  208. * Corps Global  
  209. ****************************/
  211. /**************************
  212. * Menu de gauche
  213. ***************************/
  214. .MenuPrinc, .MenuPrinc *   {
  215. margin:0;
  216. padding:0;
  217. background:none;
  218. }
  219. .MenuPrinc LI SPAN, .GrandTitreMenu{
  220. display: block;
  221. text-decoration: none;
  222.    color: #ffffff;
  223. font-weight: bold;
  224. font-size: 10pt;
  225. /*min-height: 25px;
  226. _height: 25px;*/
  227. text-align: center;
  228. padding: 3px 2px;
  229. background-color: #8D051D;
  230. list-style: none;
  231. }
  232. .MenuPrinc LI UL LI{
  233.  list-style: none;
  234.  background: #fbb635;
  235. }
  236. .MenuPrinc LI UL LI A{
  237. display: block;
  238. text-align: left;
  239. font-size: 10px;
  240. color:Black;
  241. padding:1px 0px 1px 10px;
  242. background: #fbb635 url("../Images/puce_triangle.gif" ) no-repeat;
  243. background-position: 1px 2px;
  244. min-height: 15px;
  245. _height: 15px;
  246. }
  248. .MenuPrinc LI UL LI  UL LI{
  249.   background: #FEE4B4;
  250. }
  251. .MenuPrinc LI UL LI UL LI A  {
  252. padding:1px 0px 1px 10px;
  253. background: #FEE4B4 url("../Images/puce_carre.gif" ) no-repeat;
  254. background-position: 1px 2px;
  255. min-height: 15px;
  256. _height: 15px;
  257. }
  259. .MenuPrinc LI UL LI A.menuDev, .MenuPrinc LI UL LI A.menuDevOut {
  260. font-weight: bold;
  261. background: #fbb635 url("../Images/flechemenubas.gif" ) no-repeat right 4px;
  262. }
  263. .MenuPrinc LI UL LI A.menuDevOut {
  264. background-image: url("../Images/flechemenuhaut.gif" );
  265. }
  267. /******************************
  268. * Bandeau : �l�ments int�rieurs
  269. ******************************/
  270. #Bandeau #BandeInfos {
  271. background-color: #FEE4B4;
  272. width: 680px;
  273. height: 34px;
  274. border:none;
  275. margin-left:4px;
  276. margin-bottom:0px;
  277. vertical-align: middle;
  278. }
  279. /*Titre Actualit�, d�cor� de 2 ziguiguis*/
  280. #Bandeau #BandeInfos TD.Titre {
  281. background: url("../Images/BandeInfosImageGauche.gif" ) no-repeat 4px center;
  282. width:110px;
  283. }
  284. #Bandeau #BandeInfos TD.Titre SPAN{
  285. padding-left:12px;
  286. padding-right:10px;
  287. color:#8D051D;
  288. font-size:12pt;
  289. font-weight: bold;
  290. text-align:center;
  291. background: url("../Images/BandeInfosImageDroite.gif" ) no-repeat right center;
  292. }
  293. /*texte de la bande d'information*/
  294. #Bandeau #BandeInfos TD.message{
  295. text-align:center;
  296. vertical-align: middle;
  297. font-size:10px;
  298. }
  299. /*Haut du Bandeau*/
  300. #Bandeau DIV {
  301. height: 107px;
  302. position:relative;
  303. }
  304. /* LogoCliquable dans le Bandeau*/
  305. #Bandeau #LogoCliquable{
  306. display: block;
  307. position:relative;
  308. left: 6px;
  309. top: 1px;
  310. _top: 8px;
  311. width: 144px;
  312. height: 82px;
  313. text-decoration: none;
  314. }
  316. #Bandeau #LogoCliquable A{
  317. position:absolute;
  318. display: block;
  319. text-decoration:none;
  320. text-indent:-5000;
  321. }
  322. #Bandeau #LogoCliquable A.LogoLaMondiale {
  323. width: 55px;
  324. height: 32px;
  325. left: 10px;
  326. }
  327. #Bandeau #LogoCliquable A.LogoAG2R {
  328. width: 50px;
  329. height: 32px;
  330. left: 82px;
  331. }
  332. #Bandeau #LogoCliquable A.LogoSocialClub {
  333. width: 130px;
  334. height: 40px;
  335. left: 8px;
  336. top:36px
  337. }
  339. #Bandeau P.Message{
  340. position:absolute;
  341. display:block;
  342. color:white;
  343. text-align:center;
  344. top: 26px;
  345. left: 170px;
  346. width: 520px;
  347. font-weight: bold;
  348. font-size:11pt;
  349. }
  352. /******************************
  353. * Pied de Page
  354. *******************************/
  356. #PiedDePage1 {
  357. text-align:center;
  358. vertical-align: middle;
  359. background-color:  #FBB635;
  360. }
  361. #PiedDePage1 TD {
  362. padding: 4px 0;
  363. }
  365. #PiedDePage1 A {
  366. border-right: #ffffff 1px solid;
  367. padding-right: 5px;
  368. font-weight: bold;
  369. font-size: 8pt;
  370. vertical-align: middle;
  371. color: #fff;
  372. letter-spacing: -1px;
  373. }
  375. #PiedDePage1 A.Dernier{
  376. border:none;
  377. }
  379. #PiedDePage2 {
  380. background-color: #FBB635;
  381. padding: 2px 20px;
  382. text-align:center;
  383. background-color: White;
  384. COLOR: #888888;
  385. font-size: 11px;
  386. FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
  387. }
  390. #PiedDePage2 A {
  391. font-weight: normal;
  392. COLOR: #888888;
  393. font-size: 11px;
  394. FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
  395. }
  397. /******************************
  398. * Partie Droite
  399. *******************************/
  401. A.lienSocialeAttitude {
  402. FONT-WEIGHT: bold;
  403. FONT-SIZE: 16px;
  404. COLOR: #8d051d;
  405. FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
  406. TEXT-DECORATION: underline;
  407. display: block;
  408. background-color: #FBB635;
  409. margin-top: 5px;
  410. padding: 5px;
  411. }
  413. A.lienSocialeAttitude:hover {
  414. TEXT-DECORATION: none
  415. }
  417. /*Identification*/
  418. #CSSAccesMembres{  margin-left:auto; margin-right:0px;}
  420. /*Formulaire de connexion*/
  422. #CartoucheConnexion {
  423. background-color: #FBB635;
  424. color: #8D051D;
  425. margin: 0;
  426. padding: 5px;
  427. }
  430. #CartoucheConnexion FORM {
  431. margin: 0;
  432. text-align: center;
  433. }
  435. #CartoucheConnexion FORM LABEL {
  436. font-weight: bold;
  437. font-family: Arial, Helvetica, sans-serif;
  438. font-size: 9pt;
  439. }
  441. #CartoucheConnexion FORM INPUT {
  442. border: 1px solid #8D051D;
  443. width: 100px;
  444. margin: 0;
  445. }
  447. #CartoucheConnexion IMG {
  448. border: none;
  449. }
  451. #CartoucheConnexion A   {
  452. font-size: 7pt;
  453. font-weight:bold;
  454. text-decoration: underline;
  455. }
  457. #PartieDroite FORM {
  458. margin: 0;
  460. }
  462. /****************************
  463. * Bloc Membre Connect�
  464. ****************************/
  465. DIV#CSSAccesMembresConnecte {
  466. border-left:1px solid #8D051D;
  467. border-right:1px solid #8D051D;
  468. margin-left:auto;
  469. margin-right:0px;
  470. }
  472. DIV#CSSAccesMembresConnecte * {
  473. font-size:10px;
  474. font-family: Verdana, Arial, Helvetica, sans-serif;
  475. }
  476. /*Titre*/
  477. DIV#CSSAccesMembresConnecte H1 { 
  478. background:none;
  479. background-color: #8D051D;
  480. margin:0px;
  481. color: white;
  482. padding:2px 0px 2px 2px;
  483. }
  484. /*Liens*/
  485. DIV#CSSAccesMembresConnecte A {
  486. display: block;
  487. border-bottom:1px solid #8D051D;
  488. background-color: White;
  489. padding:2px;
  490. color: #8D051D;
  491. text-decoration: none;
  492. }
  494. DIV#CSSAccesMembresConnecte A:hover {
  495. text-decoration: underline;
  496. }
  498. DIV#CSSAccesMembresConnecte A.Deco {
  499. font-weight: bold;
  500. text-decoration: underline;
  501. } /*Lien D�connexion*/
  505. /******************************
  506. * Styles Sp�ciaux
  507. ********************************/
  508. /*boutons*/
  509. /*Styles G�n�riques*/
  510. .bouton1, .bouton2{
  511. padding:1px 2px 0px 18px;
  512. font-weight: bold;
  513. border:1px solid #8D051D;
  514. text-decoration: none;
  515. line-height: 25px;
  516. }
  517. .bouton1{/*Bouton fond rouge*/
  518. background: #8D051D url("../Images/FauteuilMiniBRGauche.gif" ) no-repeat left bottom;
  519. color:white;
  520. }
  521. .bouton2{/*Bouton Fond blanc cadre rouge*/
  522. background: #FFF url("../Images/FauteuilMiniRBGauche.gif" ) no-repeat left bottom;
  523. color:#8D051D;
  524. }
  526. .CadreCadenas, .CadreCadenas2{ background : url("../Images/Pictocadenas.gif" ) no-repeat right top; padding:2px 20px 2px 2px;}
  527. .CadreCadenas, .Cadre1{/*Cadre fond rouge avec Cadenas HautDroite*/
  528. color: white; background-color: #8D051D;
  529. }
  530. .CadreCadenas2, .Cadre2{
  531. background-color: transparent;
  532. color: #8D051D;
  533. border:1px solid #8D051D;
  534. }
  536. /*Cadres sans Cadenas*/
  537. .Cadre1, Cadre2{ padding:2px; }
  539. /*Tableau de type 1*/
  540. table.tableau1 {width:100%}
  541. table.tableau1 TH  { background-color : #8D051D; color:white; text-decoration: none; padding:2px; text-align:center;}
  542. table.tableau1 th a{ color:white; text-decoration: underline;}
  543. table.tableau1 TD {border:1px solid #8D051D; background-color : #FEE4B4; padding:1px 5px;}
  544. .croissant A, .decroissant A { padding-left:20px; background-repeat: no-repeat; background-position: 2px center; }
  545. .croissant A {background-image: url(../Images/triangleCroissant.gif);}
  546. .decroissant A{background-image: url(../Images/triangleDecroissant.gif);}
  548. /*Centrer Tous les �l�ments d'un tableau, en hauteur et en largeur*/
  549. .centreV, table.centreV td {vertical-align: middle;}
  550. .centreH, table.centreH TD {text-align: center;}
  551. /*.centreV, .centreH, */
  554. .ActionsTelechargement{ margin-left:15px;}
  555. .ActionsTelechargement IMG,.ActionsTelechargement A  { vertical-align: middle;}
  556. .ActionsTelechargement IMG { margin-right:15px;}
  558. /*Annonces - Appels d'offres*/
  559. .DescAnnonce {
  560. border-right:1px solid #8D051D;
  561. color: #8D051D;
  562. font-weight:bold;
  563. display:block;
  564. padding-right:5px;
  565. padding-bottom:10px;
  566. text-align:right;
  567. width:170px;
  568. height: 100%;
  569. border-collapse: collapse;
  570. vertical-align: top;
  571. }
  573. .LibAnnonce{
  574. border-collapse: collapse;
  575. padding-left:10px;
  576. padding-bottom:10px;
  577. }
  578. .LibAnnonce UL {
  579. margin-left:0px;
  580. padding-left:0px;
  581. }
  582. .LibAnnonce UL LI{
  583. padding-left:25px;
  584. background-position: 8px 5px;
  585. }
  586. .LibAnnonce UL LI.Alerte{
  587. background-position: left top;
  588. _height:24px;/*Pour IE*/
  589. min-height:24px;/*pour les navigateurs respectueux des standards*/
  590. line-height: 110%;
  591. vertical-align: middle;
  592. }
  594. .Alerte{
  595. text-align:left;
  596. padding-left:25px;
  597. background:url(../Images/Pictos/Alerte.jpg) no-repeat left top;
  598. }
  600. H4.Alerte{
  601. line-height:26px;
  602. height:26px;
  603. vertical-align:middle;
  604. padding-right:20px;
  605. }
  607. /*Style pour une ligne pour afficher un partenaire*/
  608. .lignepartenaire{margin-bottom:10px; border-bottom:1px solid #8D051D;}
  609. .lignepartenaire TD { padding-bottom:10px;}
  610. .lignepartenaire TD.NomPrenomPart { width:130px;}
  611. .lignepartenaire TD.boutons {  text-align:right;
  612. width:130px;}
  615. .lignepartenaire TD.boutons A.bouton2{
  616. display: block;
  617. height: 18px;
  618. line-height: normal;
  619. text-align:left;
  620. }
  622. .Pagination{ text-align:center;margin-top:5px;}
  623. .Pagination span { color : black}
  624. .Pagination p {margin-top:2px; }
  625. .Pagination p b {}
  628. /*Marges Horizontales pour un objet*/
  629. .MargesH1{ margin-top:10px; margin-bottom:10px;}
  631. /*Styles pour polices*/
  632. .gras{ font-weight:bold;}
  633. .italic{ font-style: italic;}
  634. .normal{ font-weight:normal;}
  635. .nonsouligne{ text-decoration: none;}
  636. .souligne{ text-decoration: underline;}
  643. /*************************************
  644. * Squelette Admin
  645. *************************************/
  646. #CSSCadreGlobalAdmin     {
  647. height:auto;
  648. width:760px;
  649. margin: 0;
  650. padding: 0;
  651. margin-bottom:5px;
  652. /*border-collapse: collapse;*/
  653. }
  655. #CSSCadreGlobalAdmin #Bandeau  {
  656. height: 150px;
  657. width:auto;
  658. margin: 0;
  659. padding: 0;
  660.    background: url("../Images/Bandeau.jpg" ) no-repeat left top;
  661. position:relative;
  662. }
  664. #CSSCadreGlobalAdmin #PartieGauche {
  665. width:135px;
  666. margin: 0;
  667. padding: 0;
  668. vertical-align: top;
  669. _padding-bottom:10px;/*S�paration minimum entre le menu et le pied de page, ne marche que pour IE, pour FF cf #Menu*/
  670. margin-bottom:10px; /*S�paration minimum entre le menu et le pied de page, ne marche que pour FF, pour IE cf #partiegauche*/
  671. background-color: #8D051D;
  672. min-height: 100%;
  673. _height: 100%;
  674. }
  676. #CSSCadreGlobalAdmin #Centre   {
  677. height:auto;
  678. width:625px;
  679. padding: 15px 15px;
  680. margin: 0;
  681. vertical-align: top;
  682. }
  692. /*********************************************************************************************************************************************
  693. * Les lignes qui suivent correspondent aux param�tres CSS par d�faut.
  694. * Ces param�tres seront actifs seulement si les �l�ment utilis�s se trouve dans un bloc
  695. * d�fini par class="NoStyle"
  696. *********************************************************************************************************************************************/
  697. .NoStyle * {
  698. color: WindowText;
  699. border: none;
  700. background: transparent none repeat scroll left top;
  701. margin:0;
  702. padding:0;
  703. font: normal normal normal medium/normal Arial, Helvetica, sans-serif;
  704. }
  706. .NoStyle div, map, dt, isindex {
  707.   display: block;
  708. }
  710. .NoStyle h1 {
  711. display: block;
  712. font-size: 2em;
  713. font-weight: bold;
  714. margin: .67em 0;
  715. }
  717. .NoStyle h2 {
  718.   display: block;
  719.   font-size: 1.5em;
  720.   font-weight: bold;
  721.   margin: .83em 0;
  722. }
  724. .NoStyle h3 {
  725.   display: block;
  726.   font-size: 1.17em;
  727.   font-weight: bold;
  728.   margin: 1em 0;
  729. }
  731. .NoStyle h4 {
  732.   display: block;
  733.   font-weight: bold;
  734.   margin: 1.33em 0;
  735. }
  737. .NoStyle h5 {
  738.   display: block;
  739.   font-size: 0.83em;
  740.   font-weight: bold;
  741.   margin: 1.67em 0;
  742. }
  744. .NoStyle h6 {
  745.   display: block;
  746.   font-size: 0.67em;
  747.   font-weight: bold;
  748.   margin: 2.33em 0;
  749. }
  751. .NoStyle UL{
  752.   display: block;
  753.   list-style-type: disc;
  754.   margin: 1em 0;
  755. }
  757. .NoStyle ol {
  758.   display: block;
  759.   list-style-type: decimal;
  760.   margin: 1em 0;
  761.   }
  763. .NoStyle li {
  764.   display: list-item;
  765. }
  767. .NoStyle table {
  768.   display: table;
  769.   border-spacing: 2px;
  770.   border-collapse: separate;
  771.   margin-top: 0;
  772.   margin-bottom: 0;
  773.   text-indent: 0;
  774. }
  776. .NoStyle tr {
  777.   display: table-row;
  778.   vertical-align: inherit;
  779. }
  781. .NoStyle tbody {
  782.   display: table-row-group;
  783.   vertical-align: middle;
  784. }
  786. /* for XHTML tables without tbody */
  787. .NoStyle table > tr {
  788.   vertical-align: middle;
  789. }
  791. .NoStyle td {
  792.   display: table-cell;
  793.   vertical-align: inherit;
  794.   text-align: inherit;
  795.   padding: 1px;
  796. }
  798. .NoStyle dd {
  799.   display: block;
  800. }
  802. .NoStyle p, dl, multicol {
  803.   display: block;
  804.   margin: 1em 0;
  805. }
  807. .NoStyle blockquote {
  808.   display: block;
  809.   margin: 1em 40px;
  810. }
  812. .NoStyle address {
  813.   display: block;
  814.   font-style: italic;
  815. }
  817. .NoStyle u, .NoStyle ins {
  818.   text-decoration: underline;
  819. }
  820. /* nested lists have no top/bottom margins */
  821. .NoStyle ul ul, .NoStyle  ul ol, .NoStyle  ul dir, .NoStyle  ul menu, .NoStyle  ul dl,
  822. .NoStyle ol ul, .NoStyle  ol ol, .NoStyle  ol dir, .NoStyle  ol menu, .NoStyle  ol dl,
  823. .NoStyle dir ul, .NoStyle dir ol, .NoStyle dir dir, .NoStyle dir menu, .NoStyle dir dl,
  824. .NoStyle menu ul, .NoStylemenu ol, .NoStylemenu dir, .NoStylemenu menu, .NoStylemenu dl,
  825. .NoStyle dl ul, .NoStyle  dl ol, .NoStyle  dl dir, .NoStyle  dl menu, .NoStyle  dl dl {
  826.   margin-top: 0;
  827.   margin-bottom: 0;
  828. }
  830. /* 2 deep unordered lists use a circle */
  831. .NoStyle ol ul, .NoStyle  ul ul, .NoStyle  menu ul, .NoStyle  dir ul,
  832. .NoStyle ol menu, .NoStyleul menu, .NoStylemenu menu, .NoStyledir menu,
  833. .NoStyle ol dir, .NoStyle ul dir, .NoStyle menu dir, .NoStyle dir dir {
  834.   list-style-type: circle;
  835. }
  837. /* 3 deep (or more) unordered lists use a square */
  838. .NoStyle ol ol ul, .NoStyle    ol ul ul, .NoStyle    ol menu ul, .NoStyle    ol dir ul,
  839. .NoStyle ol ol menu, .NoStyle  ol ul menu, .NoStyle  ol menu menu, .NoStyle  ol dir menu,
  840. .NoStyle ol ol dir, .NoStyle   ol ul dir, .NoStyle   ol menu dir, .NoStyle   ol dir dir,
  841. .NoStyle ul ol ul, .NoStyle    ul ul ul, .NoStyle    ul menu ul, .NoStyle    ul dir ul,
  842. .NoStyle ul ol menu, .NoStyle  ul ul menu, .NoStyle  ul menu menu, .NoStyle  ul dir menu,
  843. .NoStyle ul ol dir, .NoStyle   ul ul dir, .NoStyle   ul menu dir, .NoStyle   ul dir dir,
  844. .NoStyle menu ol ul, .NoStyle  menu ul ul, .NoStyle  menu menu ul, .NoStyle  menu dir ul,
  845. .NoStyle menu ol menu, .NoStylemenu ul menu, .NoStylemenu menu menu, .NoStyle menu dir menu,
  846. .NoStyle menu ol dir, .NoStyle menu ul dir, .NoStyle menu menu dir, .NoStyle menu dir dir,
  847. .NoStyle dir ol ul, .NoStyle   dir ul ul, .NoStyle   dir menu ul, .NoStyle   dir dir ul,
  848. .NoStyle dir ol menu, .NoStyle dir ul menu, .NoStyle dir menu menu, .NoStyle dir dir menu,
  849. .NoStyle dir ol dir, .NoStyle  dir ul dir, .NoStyle  dir menu dir, .NoStyle  dir dir dir {
  850.   list-style-type: square;
  851. }
  853. .NoStyle hr {
  854.   display: block;
  855.   height: 2px;
  856.   border: 1px;
  857.   margin: 0.5em auto 0.5em auto;
  858. }
  860. .NoStyle b, .NoStyle strong {
  861.   font-weight: bolder;
  862. }
  864. .NoStyle i, .NoStyle cite, .NoStyle em{
  865.   font-style: italic;
  866. }
  868. .NoStyle u, .NoStyle ins {
  869.   text-decoration: underline;
  870. }
  872. .NoStyle s, .NoStyle strike, .NoStyle del {
  873.   text-decoration: line-through;
  874. }
  876. .NoStyle blink {
  877.   text-decoration: blink;
  878. }
  880. .NoStyle big {
  881.   font-size: larger;
  882. }
  884. .NoStyle small {
  885.   font-size: smaller;
  886. }
  888. .NoStyle sub {
  889.   vertical-align: sub;
  890.   font-size: smaller;
  891.   line-height: normal;
  892. }
  894. .NoStyle sup {
  895.   vertical-align: super;
  896.   font-size: smaller;
  897.   line-height: normal;
  898. }
  900. .NoStyle nobr {
  901.   white-space: nowrap;
  902. }


PS: la classe NoStyle, me permet de définir des boites de tests sans style. C'est un bordel un peu particulier (dont client chiant)


Message édité par gatsusat le 14-10-2005 à 02:04:04

---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 02:03:40   

Reply

Marsh Posté le 14-10-2005 à 08:33:28    

'Tain je savais pas a quel point. Faut vraiment être généreux pour passer autant de temps pour son site et les visiteurs, le tout presque bénévolement..... :ouch:  
Moi pour le moment, j'ai en tête que si le site ne me rapporte pas un minimum,je laisse tomber ou fais un autre site qui, je l'espère, marchera mieux. Mais bon avec de l'expérience, je réviserai ptêt mon point de vue   :sarcastic:


Message édité par kensei le 14-10-2005 à 08:33:44

---------------
OST Anime
Reply

Marsh Posté le 14-10-2005 à 11:25:14    

ben c'est la CSS d'un site pro.
 
c'est evident que faire un site pour le benevolat et setuer à la tache pour les autres c'est pas sympathique pour soit


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 14-10-2005 à 18:50:11    

pourquoi 902 lignes  :lol:

Reply

Marsh Posté le 14-10-2005 à 22:03:09    

ya 680 lignes utiles, même si ya eu certaines personnes a passer sur la feuille de style, elle pourrait être optimisée je te l'accorde. Mais quand tu sais que tu n'as pas que ça à faire, tu ne le fais pas malheureusement.
 
et puis 900 lignes c'est raisonnable pour une CSS je trouve :D


---------------
Les CSS c'est bon mangez-en
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed