Aller au contenu

optimiser ma feuille de styles

nizouille

Par nizouille
dans (X)HTML et CSS

 Partager

Sujets conseillés

nizouille

nizouille

Posté
Posté

Hello,

Je trouve ma feuille de styles un peu lourde, et peu optimisée (elle date de mes débuts en css).

Quelqu'un pourrait m'aider ? 

/***** CSS by Nizet Benjamin*****/ 
/*conteneur*/
#holder { 
	position: absolute; 
	top: 0; 
	left: 0;
} 
/*header*/
#header { 
height: 115px;
border: medium none;
background:  url('images/fond-header.gif') repeat-x 0 0;
}
html, body, #holder { 
	min-height: 100%; 
	height: 100%;
} 
html>body #holder { 
	height: auto;
} 
/*available for all the website*/
body, html { 
	margin: 0; 
	padding:0; 
	background: #F2E7DB; 
 	 font-family: verdana, sans-serif; 
 	 font-size: 13.5px; 
}
/*navigation menu*/
/*  Feuille css par Raphaël Wils
	Email : antispamraphaelwils_AT_hotmail.com
	Enlevez "antispam" pour m'écrire
 */


#menu{
	position:absolute;
	top:15px;
	left:4px;
	background:white;
	color:black;
}
#menu ul{  /* affichage de la hiérarchie si javascript inactif */
	padding:0;
	list-style-position:inside;
}
/* ------  dimensions ------ */
#menu .me, #menu .me *{
	margin:0;
	width:110px; /* LARGEUR DU MENU */
}
.me a, #menu p{padding:2px 5px; } /* valeur en pixel pour affichage correct dans Gecko
       	 la valeur 12px est égale à la largeur des fleches */
#menu .me ul{
	position:absolute;
	visibility:hidden;
	border: 1px dashed #79C; /*bordure des boites */
	background-color: #FFF;
	padding: 0px;
	left: 110px;    /* LARGEUR DU MENU */
	margin-top:-1px;  /* opposé de la valeur de la bordure de cette même boite */
	voice-family: "\"}\"";  /* Hack de Tantek Celik pour le positionnement des sous menus dans ie5.x avec margin-left */
	voice-family:inherit;
	margin-left:10px;  /* standard : 2 x padding en largeur de ".me a" + 2 x bord de ".me a" */
}
html>body #menu .me ul{
	margin-left:10px;  /* compensation pour Opera */
}
html>body #menu .me,
html>body #menu .me ul,
html>body #menu .me li  {
	padding:0 10px 0 0;  /* pour le modele de boite standard */
}
#menu .me, #menu .me ul{list-style:none;}

#menu .me li{
	float:left;
	clear:both;

}
.me a{
	float:left;
	border:1px solid white;    /* épaisseur identique a la bordure de .me a hover ci dessous */
	text-decoration:none;
}
.me a:hover, .me a:focus, .me a:active {/* couleurs au passage de la souris */
	background:#B6C5D6;
	color:white;
}
#menu li.fleche{background: url(/fleche1.gif) right no-repeat;}
#menu ul.subsubmenu {
background-color: #E1E9F0;
font-size: 11.5px;
}
ul.submenu {
width: 150px;
background-color: #FFF;
font-size: 11.5px;
}

#menu a.fleche:hover{background:#B6C5D6 right no-repeat;}

/*tally round*/
#content {
	position: relative; 
	margin-left: 160px; 
	margin-top: 14px; 
	margin-bottom: 10px; 
	background-color:#FFF;
} 


.haut {        
  height: 46px; 
  background-image: url(images/cadre/haut.gif); 
} 
.hautd {        
  height: 46px; 
  width: 80px; 
  background-image: url(images/cadre/hautd.gif); 
  float: right;
  } 
.bas {        
  height: 68px; 
  background-image: url(images/cadre/bas.gif); 
  font-size: 0;
} 
.basd {        
  height: 68px; 
  width: 80px; 
  background-image: url(images/cadre/basd.gif); 
  float: right; 
  font-size: 0;
  } 
.centre {  /* bloc centre : bord gauche qui ne se répète qu'en hauteur */ 
  background-image: url(images/cadre/gauche.gif); 
  background-repeat: repeat-y;
  } 


.contenu {   /* bloc contenu : bord droit qui ne se répète qu'en hauteur */ 
  font-size: 0.9em; 
  text-align:justify; 
  background-image:  url(images/cadre/droite.gif); 
  background-repeat: repeat-y; 
  background-position:  right; 
  height: 1%;
 	 overflow: visible; /* POur IE 5.5+ */
  padding-left:30px; padding-right:55px; padding-top:5px; padding-bottom:1px;
  } 

#footer {
	clear: both;
	height: 1.3em;
	position: absolute; 
	bottom:0px; 
	background:#006699; 
	text-align:right; 
	color: #F2E7DB;
	font-weight: normal;   
	border: none; 
	width: 100%;
}
a { 
    color: #006699; 
	text-decoration: none;
	font-weight: bold;
 	 background: none; 
} 
a:hover { 
    color: #FECB33; 
 	 background: none; 
}
ul{ 
  margin: 0;
  padding: 0;
  list-style-type: none; 
} 
ul.fleche{
 list-style: url('images/h3.gif') outside;
margin-left: 5em; 
 }
ol{
list-style-type: decimal; 
}

/* les 3 boutons du header*/ 
.bt1 { 
  position: absolute; 
	top: 18px; 
  left: 470px; 
  font-size: 13px;
} 
.bt2 { 
  position: absolute; 
  top: 38px; 
  left: 440px; 
  font-size: 13px;
} 
.bt3 { 
  position: absolute; 
  top: 58px; 
  left: 415px; 
  font-size: 13px;
} 
/*breadcrumbs*/
#plan { 
 	 position: absolute; 
 	 right: 0px; 
 	 top: 0px; 
 	 color: #F2E7DB; 
} 
#plan a { 
 	 margin: 0; 
 	 padding: 0;  
    color: #FECB33; 
    text-decoration: none; 
} 
#plan a:hover { 
    color: #F2E7DB; 

} 

/*navigation tally round*/ 
#background { 
 	 position: absolute; 
 	 left: 25px; 
 	 top: 129px; 
 	 height: 339px; 
 	 width: 138px; 
 	 background:  url('images/cadretitre/cadre.gif') no-repeat; 
 } 
/*formulaire*/ 
form { 
  width: 75%;
	margin-left: auto;
    margin-right: auto;
    text-align: left; /* on rétablit l'alignement normal du texte */ 
  font-family: Verdana, Arial, sans-serif; 
  font-size: 1.1em; 
 } 
form.normal {
width: 99%; 
}
fieldset{ 
    border: 1px dashed #79C; 
    padding: 10px; 
	background-color: #FFF;
} 
legend{ 
	background-color: white; 
	padding: 1px 4px;
	color: #B6C5D6; 
	font-weight:bold;
} 
form div{ 
	padding: 6px 8px; 
} 
div.bloc label { 
	display: block;
	float: left; 
	width: 50%;
} 
form div.center { 
	text-align: center; 
} 
p.message{ 
	text-align: center; 
}    
label { 
	font-family: Verdana, Arial, sans-serif; 
	font-weight:bold;
	font-size: 0.9em;
} 
colonne {
	display: block;
	float: left; 
	width: 50%;
}
input { 
	background-color: #DEE6EE; 
	color:#000; 
  font-size:12px; 
} 

select, option { 
	background-color: #DEE6EE; 
} 
textarea { 
	border:1px solid black; 
	background-color: #DEE6EE; 
	font-size: 1.1em; 
} 
input.bouton { 
	border:2px outset #DEE6EE; 
	font-weight:bold; 
	cursor:pointer; 
} 
input.bouton:hover { 
	background-color:white; 
	color: #000; 
}
.legende {	/*** Mise en forme des aides contextuelles ***/
	font-style: italic;
	color: #666;
	background: transparent;
	margin: 0;
	padding: 0;
}

.focus {	/*** Mise en avant des champs en cours d'utilisation ***/
	background: #B6C5D6;
	color: black;
}

/*fin du formulaire */ 
/* différentes mises en forme de texte*/ 

.gras { 
 	 font-weight : bold;
	color: #000;
} 
.gch { 
	display: block; 
	float: left; 
	text-align: left;
} 
.center {
	text-align:center;
}
.dte { 
	display: block; 
	float: right; 
	text-align: right;
} 
.liens { 
	color: #FECB33; 
    text-decoration: none; 
	font-weight: normal;
  } 
.liens:hover { 
	color: #F2E7DB; 
} 
.bgdgris {
	background-color:#DADADA;
}
.bordure {
 border: 1px dashed #79C; 
 padding: 3px; 
}
.gauche{
float: left;
}
.droite {
float: left; 
}
.espace {
clear: both; 
}
.aligndroite {
text-align:right; 
}
.different{
color: #FF3333;
font-weight: bold;
}

/* titres */ 
h1, h2, h3, h4 { 
 	 padding-left: 3em;    
} 
h1 {
font-size: 1.3em;
line-height: 1.9em;
background:  url('images/h1.jpg') no-repeat 0px 50%; 
}
h2 { 
 	 margin-left: 1em; 
	font-size : 1.1em; 
	line-height: 1.9em;
 	 background:  url('images/h2.jpg') no-repeat 0px 50%; 
} 
h3 { 
 	 margin-left: 2em; 
	font-size : 1em; 
 	 background:  url('images/h3.gif') no-repeat 0px 50%; 
} 
h4 { 
 	 margin-left: 5em; 
	font-size : 0.9em; 
	}
p { 
 	 text-indent: 2em; 
} 
p.noindent {
 	 text-indent: 0em; 
}
.image {
border: 0;
background : none; 
}
.colonne {
width: 150 px;
margin-left: 20px;
}

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...