Allégement de code

Bonjour ! Je viens de m'inscrire sur le Forum et je vous sollicite pour un peu d'aide. Je débute en matière de CSS et je pense que mon code est trop lourd et qu'il est possible de l'alléger. Dès que j'essaye ca ne fonctionne qu'à moitié. Merci d'avance pour vos réponses.

/* CSS Document */

body { margin: 0 0 0 0; background: #FFFFFF;}

/* Polices */
a { font-family:Verdana, sans-serif ; font-size:10px ; text-decoration: none ; color: #FFFFFF ; }
a:hover { font-family:Verdana, sans-serif ; font-size:10px ; text-decoration: underline ; color: #FFFFFF; }
a.change { font-family:Verdana, sans-serif ; font-size:10px ; text-decoration: none ; color: #FFFFFF ; }
a.change:hover { font-family:Verdana, sans-serif ; font-size:10px ; text-decoration: underline ; color: #FFFFFF; }
h3 { display:none ; }

/* basic elements */
#header { position:absolute ; top:0px ; left:0px ; width:760px ; height:100px ; background:url(../img/headerbleu.gif) ; }
#main01 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu01.gif) ; }
#main02 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu02.gif) ; }
#main03 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu03.gif) ; }
#main04 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu04.gif) ; }
#main05 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu05.gif) ; }

/*switch */
#blocswitch { position:absolute ; top:0px ; right:20px ; font-family:Verdana, sans-serif ; font-size:10px ; text-decoration: none ;font-weight: bold ; color: #000 ; }
ul#switch { margin: 0 ; padding: 0 ; list-style-type: none ; }
ul#switch li { float: left ; text-align: center ; display: block; width: 40px; line-height: 20px; color: #000; }
ul#switch li a { text-decoration: none; font-size: 10px; font-weight: bold; color:#000000 ; }
ul#switch li a:hover { text-decoration:underline ; }

/* boutons */
#blocmenu { position:absolute ; top:50px ; left:365px ; width:375px ; height:40px ; }
ul#menu { margin: 0 ; padding: 0 ;	list-style-type: none ; }
ul#menu li { float: left ; text-align: center ; }
ul#menu li a { display: block; width: 75px; line-height: 40px; color: #000;	text-decoration: none; background: url(../img/btmenu_bleu.gif) no-repeat 0 0;	border: 0px; font-size: 10px; font-weight: bold; vertical-align: bottom; }
ul#menu li a:hover { background: url(../img/btmenu_bleu.gif) no-repeat 0 -40px ; border: 0px ; }

/* spécifiques éléments */
#apropos { position:absolute ; top:20px ; left:20px ; width:720px ; height:120px ; font-family:Verdana, Arial, Helvetica, sans-serif ; font-size:12px ; font-weight: bold; color:#FFFFFF ; }
#news {	position:absolute;	top:160px;	left:20px;	width:320px; height: 280px;	background:url(../img/newsbleu.gif) no-repeat; }
#news p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px ; color:#333333 }
#containernews { position:absolute; top:25px; left:10px; width:300px; }
#containerworks { position:absolute; top:25px; left:10px; width:360px; }
#lastwork { position:absolute ; top:160px ; left:360px ; width:380px; height: 280px; background:url(../img/lastworkbleu.gif) no-repeat ; }
a.lastwork { font-family:Verdana, sans-serif ; font-size:10px ; text-decoration: none ; color: #000 ; }
a.lastwork:hover { font-family:Verdana, sans-serif ; font-size:10px ; text-decoration: underline ; color: #000; }

/* Galerie */
#galerie_auteur { position:absolute ; top:20px; left:0px ; width:330px ; height:32px ; background:url(../img/galeriebleu01.gif) no-repeat 0 0; }
#galerie { position:absolute ; top:52px; left:20px ; width:310px ; height:408px ; text-align: center ; }
ul#galerie_menu { margin: 0 ;	padding: 0 ;	list-style-type: none ; }
ul#galerie_menu li { float: left ; }
ul#galerie_menu li a img {	margin: 5px 5px ; border: 0px ; }
dl#photo { clear: both ;	margin: 0 auto ; }
dl#photo dt { font: Verdana, sans-serif ; font-size:10px ; color:#000000 ; }
dl#photo dd { margin: 0 ;}
dl#photo img {	border: 0px ; }
#galerie_affichage { position:absolute;	top:20px; left:350px; width:380px; height:370px; background:url(../img/galeriebleu02.gif) no-repeat; text-align: center; }
#galerie_titre { position:absolute ; top:390px; left:330px ; width:430px; height:70px; background:url(../img/galeriebleu03.gif) no-repeat 0 0; }

/* Formulaire */
#formulaire { position:absolute ; top:20px;  left:350px; width:390px ; height:430px ; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; font-weight: bold ; }
LABEL { DISPLAY: inline ; FLOAT: left ; WIDTH: 120px ; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; font-weight: bold ; margin-left: 20px ; }
.INPUT { background-color:#FFFFFF ; font-family: Arial, Helvetica, sans-serif ; color: red ; }
.OPTION { background-color:#FFFFFF ; }
.SELECT { background-color:#FFFFFF ; }
.TEXTAREA { background-color:#FFFFFF ; color:#000000; }
.BUTTON { font-family: arial, helvetica, sans-serif ; border-width: 2pt ; font-size: 10pt ; color: black ; } 

Modifié par BahiaTierra (14 Nov 2006 - 13:37)

Salut,

Peux-tu stp éditer ton message pour encadrer ton code avec les balises appropriées, comme indiqué dans les règles du forum ?

J'espère que c'est mieux comme ça, je débute, désolé

BahiaTierra a écrit :
J'espère que c'est mieux comme ça, je débute, désolé

Parfait, merci
Et bonne chance

BahiaTierra a écrit :

/* basic elements */
#header { position:absolute ; top:0px ; left:0px ; width:760px ; height:100px ; background:url(../img/headerbleu.gif) ; }
#main01 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu01.gif) ; }
#main02 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu02.gif) ; }
#main03 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu03.gif) ; }
#main04 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu04.gif) ; }
#main05 { position:absolute ; top:100px ; left:0px ; width:760px ; height:460px ; background:url(../img/bgbleu05.gif) ; }

On peut le refactoriser en :

#header, #main01, #main02, #main 03, #main04, #main05 { position:absolute ; left:0px ; width:760px ; }
#header { top:0px ; height:100px; background:url(../img/headerbleu.gif); }
#main01, #main02, #main 03, #main04, #main05 { top:100px; height:460px; }
#main01 {  background:url(../img/bgbleu01.gif) ; }
#main02 {  background:url(../img/bgbleu02.gif) ; }
#main03 {  background:url(../img/bgbleu03.gif) ; }
#main04 {  background:url(../img/bgbleu04.gif) ; }
#main05 {  background:url(../img/bgbleu05.gif) ; }

Modifié par FlorentG (14 Nov 2006 - 15:16)

Merci beaucoup. Grâce à toi, je comprends un peu mieux. Merci encore

Bonjour,

margin: 0 0 0 0;

=

margin: 0;

Pour tes liens, la balise a englobe tous les dérivés (a:hover, a:active, etc) tu n'as donc pas besoin de répéter certains éléments :

a { font-family: Verdana, sans-serif; font-size:10px; text-decoration: none; color: #FFFFFF; }
a:hover { text-decoration: underline; }

(je vois pas l'utilité de la classe .change ?)

Merci corinne pour ta réponse. En ce concerne la .change, cela me sert à faire des liens différents. Par exemple, tous les liens directs dans mes pages, je l'ai met en bleu et les liens vers d'autres site en blanc.

J'espère que je suis suffisamment clair.

Re à tous,
J'ai essayé d'alléger le code et de la modifier légérement. Cela fonctionne parfaitement sous Firefox mais pas sur IE. Je pense que c'est un problème d'intégration de marge.

Voila le code, merci d'avance pour votre aide

/* CSS Document */
* { margin:0 ; padding:0 ; }
img { border:none ; margin:0 ; float:left ; }
div { font: 12px Arial, Helvetica, sans-serif; }
#header { margin:0 auto ; width:760px ;  height:100px ; background:url(../img/bheader.gif) ; }
#home, #portfolio, #liens, #contacts { margin:0 auto ; width:760px ; height:460px ; }
h1, h2, h3 {display:none;}

/* Header */
#skinbloc { position:absolute ; top:0px ; right:20px ; }
ul#skin { padding: 0 ; list-style-type: none ; }
ul#skin li { float:left ; margin: 0 0 0 5px ; }
#menubloc { position:absolute ; top:40px ; right:20px ; }
ul#menu li { padding: 0 ; list-style-type:none ; float: left  ; }
ul#menu li span { display:none ; }
ul#menu li a { display:block ; width:60px; height:50px ; }
a.bthome { background:url(../img/bbthome.gif) no-repeat 0 0 ; }
a.bthome:hover { background:url(../img/bbthome.gif) no-repeat 0 -50px ; }
a.btportfolio { background:url(../img/bbtportfolio.gif) no-repeat 0 0 ; }
a.btportfolio:hover { background:url(../img/bbtportfolio.gif) no-repeat 0 -50px ; }
a.btliens { background:url(../img/bbtliens.gif) no-repeat 0 0 ; }
a.btliens:hover { background:url(../img/bbtliens.gif) no-repeat 0 -50px ; }
a.btcontacts { background:url(../img/bbtcontacts.gif) no-repeat 0 0 ; }
a.btcontacts:hover { background:url(../img/bbtcontacts.gif) no-repeat 0 -50px ; }

/* Main */
#home { background:url(../img/bbghome.gif) no-repeat ; }
#bienvenue { float:left; width:240px; height:420px;	background:url(../img/bbienvenue.gif) no-repeat; margin: 20px 30px 20px 30px ; }
#news { float:left ; width:400px ; height:230px ; background:url(../img/bnews.gif) no-repeat; margin: 20px 30px 10px 30px ; }
#newssite { float:left ; width:400px ; height:180px ; background:url(../img/bnewssite.gif) no-repeat; margin: 0 30px 20px 30px ; }
.newssitext { float:left ; width:320px ; height:120px; margin:45px 20px 0px 60px ; overflow:auto ;}
.newssitext a { display:block;width:300px;border-bottom:1px dotted #9D9D9D;padding:10px 0 0 0;color:#9D9D9D; text-decoration:none ;}
.newssitext a:hover {color:#58809D;background:url(../img/fondtransparent.gif);}
.bienvenue-tx, .news-tx { margin:45px 20px 10px 20px ; }
.bienvenue-tx p { margin:10px 0 0 0 ; }

/* Portfolio */
#portfolio { background:url(../img/bbgportfolio.gif) no-repeat ; }
#artistes { float:left ; width:400px ; height:290px; background:url(../img/bartistes.gif) ; margin: 20px 30px 20px 30px ; }
#lastwork { float:left ; width:400px ; height:110px; background:url(../img/blastwork.gif) ; margin: 0px 30px 20px 30px ; }
#galeries { position:absolute ; top:100px ; left:460px ; width:240px ; height:420px; background:url(../img/bgaleries.gif) ; margin: 20px 30px 20px 30px ; }
.galerie-list { float:left ; width:220px ; height:325px ; margin: 45px 10px 10px 10px ; overflow:auto ; }
.artiste-list img, #lastwork-detail img { margin:2px ; }
.galerie-list a { display:block; width:210px ; border-bottom:1px dotted #9D9D9D;padding:10px 0 0 0;color:#9D9D9D; text-decoration:none ; }
.galerie-list a:hover, .lastwork-detail a:hover {color:#58809D;background:url(../img/fondtransparent.gif) repeat; }
.artiste-list { float:left ; width:340px ; height:225px ; margin: 45px 20px 20px 40px ; overflow:auto ; }
.artiste-list li { display:block ; width:320px; height:55px ; margin-top:5px ; border-bottom:1px dotted #9D9D9D; color:#9d9d9d; text-decoration:none ; }
.artiste-nom, .lastwork-nom { color:#58809D; font-weight:bold ; }
.lastwork-detail { width:360px; height:55px ; margin:45px 20px 10px 20px ; }
.lastwork-detail a { display:block ; text-decoration:none ; color:#9d9d9d ; }

/* Liens */
#liens { background:url(../img/bbgliens.gif) no-repeat ; }
#ecologie { float:left ; width:320px ; height:420px; background:url(../img/becologie.gif) ; margin:20px 20px 20px 30px ; }
#art { float:left ; width:340px ; height:260px ; background:url(../img/bart.gif) ; margin :20px 30px 20px 20px ; }
#designcss { float:left ; width:340px; height:140px ; background:url(../img/bdesigncss.gif) ; margin:0 30px 20px 20px ; }
.ecologie-tx, .art-tx, .designcss-tx { margin:45px 20px 10px 20px ; overflow:auto ; }
.designcss-tx { height:85px; }
.art-tx { height:205px ; }
.ecologie-tx { height:365px ; }
.designcss-tx a { display:block ; width:95% ; height:15px ; border-bottom:1px dotted #9D9D9D; color:#9d9d9d; text-decoration:none ; }
.designcss-tx a:hover {color:#58809D;background:url(../img/fondtransparent.gif);}
.designcss-tt { font-weight:bold ; }

/* Contacts */
#contacts { background:url(../img/bbgcontacts.gif) no-repeat ; }

Modifié par BahiaTierra (21 Nov 2006 - 10:16)