CSS = Code propre ?

Question

yank

8 Jun 2006 à 19:34

Bonsoir à tous,

Ayant bientôt fini mon premier site internet en css et xhtml, je me demande si mon code (le css en tout cas) est propre et SURTOUT s'il n'y a pas d'éléments INUTILE... Smiley rolleyes

Par exemple au niveau des polices, couleurs, je crois que j'en ai mis un peu trop partout, enfin il me semble mais si quelqu'un de plus expérimenté sur la chose veut bien passer 2 minutes à lire mon code css pour voir s'il n'y aurait pas un peu de ménage à faire, ce serait génial Smiley confused


body {
	margin: 0;
	text-align: center;
	background-color: #402D20;
	color: #FFFFFF;
}
#global {
	position:absolute;
	left: 50%;
	top: 50%;
	width: 750px;
	height: 550px;
	margin-top: -275px;
	margin-left: -375px;
	background-color: #BFA38F;
	color: #FFFFFF;
}
.header {
	height: 100px;
	color: #ffffff;
	background-color: #BFA38F;
	background-image:  url(visuels/png/a.png);
}
.menu {
	left: 0px;
	width: 200px;
	position: absolute;
	height: 400px;
	color: #ffffff;
	background-color: #BFA38F;
	background-image:  url(visuels/png/b.png);
}
.menu:hover {
	background-color: #BFA38F;
	background-image:  url(visuels/png/_menuhover.png);
}
.frame {
	margin-left: 200px;
	overflow: auto;
	width: 530px;
	height: 400px;
	color: #FFFFFF;
	margin-right: 20px;
	background-color: #BFA38F;
}
.right {
	right: 0px;
	width: 20px;
	position: absolute;
	height: 400px;
	color: #ffffff;
	background-color: #BFA38F;
	background-image:  url(visuels/png/c.png);
}
#footer {
	height: 50px;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #BFA38F;
	background-image:  url(visuels/png/d.png);
}
.foot_left {
	float: left;
	margin-left: 5px;
}
.foot_right {
	float: none;
}
a {
	text-decoration: none;
	color: #FFFFFF;
}
a:visited {
	text-decoration: none;
	color: #FFB580;
}
a:hover {
	text-decoration: none;
	color: #FF8F40;
	background: url(none); /* correction d'un bug IE */
}
a:active/*ie*/ {
	text-decoration: none;
	color: #FF6A00;
}
a:focus/*gecko*/ {
	text-decoration: none;
	color: #FF6A00;
}
.frame a {
	color: #402410;
}
.frame a:hover {
	color: #FF8F40;
}
h1 {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	color: #402D20;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	margin-top: 20px;
}
h1:hover {
	color: #402410;
}
h2 {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	color: #402D20;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	margin-right: 20px;
	margin-left: 15px;
	margin-top: 20px;
}
h2:hover {
	color: #402410;
}
p {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	color: #402D20;
	font-size: 0.9em;
	font-weight: normal;
	text-align: justify;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 15px;
	margin-top: 20px;
}
p:hover {
	color: #402410;
}
.menugauche {
	margin: 20px 0px 0px 20px;
	list-style-type: none;
	text-align: left;
	padding: 0px;
	color: #ffffff;
}
.menugauche li {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 5px;
}
.menugauche a {
	margin: 0px;
	color: #402410;
	text-decoration: none;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
}
.menugauche a:visited {
	margin: 0px;
	color: #FFB580;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:hover {
	margin: 0px;
	color: #FF8F40;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:active/*ie*/ {
	margin: 0px;
	color: #FF6A00;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:focus/*gecko*/ {
	margin: 0px;
	color: #FF6A00;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.legend {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	margin-top: 15px;
}
.form {
	border: none;
	padding: 0px;
	width: 180px;
	margin-bottom: 20px;
	margin-top: 10px;
}
.select {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	border: 1px solid #ffffff;
	background-color: #402D20;
}
.select:hover {
	background-color: #FF6A00;
	color: #FFFFFF;
}

Merçi de votre aide Smiley smile

tant'bets

8 Jun 2006 à 19:52

Bonjour,
à mon avis tu peux déjà coller ton

font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
font-style: normal;

dans le body et le supprimer partout ailleurs... il est tout de même très récurant !
Voilà, quelque lignes en moins c'est toujours ça de gagné...
J' ai regardé très rapidement, je repasserais + tard Smiley smile

yank

8 Jun 2006 à 20:01

tant'bets a écrit :

Voilà, quelque lignes en moins c'est toujours ça de gagné...
J' ai regardé très rapidement, je repasserais + tard

Merçi !

Oui c'est ce que je veux justement, supprimer l'inutile qui ne fait qu'alourdir et qui ne facilite pas la relecture... et tant qu'à finir mon 1er site css autant qu'il soit "propre" Smiley ravi

Fini les framesets Smiley bawling

euh...

yank

8 Jun 2006 à 20:11

Par contre des que je mets

font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;

font-style: normal;

dans body, sous ie mon site na plus la même apparence, plus d'eccart au niveau des liens du menu...

fvsch

8 Jun 2006 à 20:48

Globalement il faut que te renseigne sur les règles de la cascade et de l'héritage des propriétés CSS entre éléments parents et enfants. CSS = Cascading Style Sheets, non ?

Je te compresse le style de tes liens, pour exemple :

a {
	text-decoration: none;
	color: #FFFFFF;
}
a:visited {
	text-decoration: none;
	color: #FFB580;
}
a:hover {
	text-decoration: none;
	color: #FF8F40;
	background: url(none); /* correction d'un bug IE */
}
a:active/*ie*/ {
	text-decoration: none;
	color: #FF6A00;
}
a:focus/*gecko*/ {
	text-decoration: none;
	color: #FF6A00;
}

peut s'écrire aussi :

a {
	text-decoration: none;
	color: white;
}
a:visited {
	color: #ffb580;
}
a:hover {
	color: #ff8f40;
	background: url(none); /* correction d'un bug IE */
}
a:active, a:focus {
	color: #ff6a00;
}

Ah oui, j'ai mis des minuscules à la place des majuscules dans les déclarations de couleurs, et j'ai remplacé #FFFFFF par white (pour faire plus court on aurait pu faire #fff), juste parce que j'avais envie.

gege71

8 Jun 2006 à 21:01

Salut

Tu répète aussi le background-color: #BFA38F; il faut vérifier si il n’est pas suffisant de le mettre que dans #global

A+

yank

9 Jun 2006 à 09:54

mpop a écrit :
Globalement il faut que te renseigne sur les règles de la cascade et de l'héritage des propriétés CSS entre éléments parents et enfants. CSS = Cascading Style Sheets, non ?

Ah oui, j'ai mis des minuscules à la place des majuscules dans les déclarations de couleurs, et j'ai remplacé #FFFFFF par white (pour faire plus court on aurait pu faire #fff), juste parce que j'avais envie.

Merçi pour le conseil

Oui moi aussi je prefere les minuscules Smiley smile

je compte les mettre après c'est juste que la j'en suis encore à tester les couleurs et dream les mets en majuscule le salaud Smiley biggrin

yank

9 Jun 2006 à 09:57

gege71 a écrit :
Salut
Tu répète aussi le background-color: #BFA38F; il faut vérifier si il n’est pas suffisant de le mettre que dans #global
A+

Salut, Oui je me pose la question, mais vu que je débute je ne sais pas trop s'il faut mettre les couleurs partout Smiley biggol

Global est l'element principal (en dehors de body bien sur) il contient tous mes autres éléments... donc ça ne poserait pas probleme de mettre uniquement une couleur de fond à global (pour les navigateurs non graphiques ?) et pas de couleurs de fond aux autres elements ?

yank

9 Jun 2006 à 16:17

Voila j'ai fait un peu de ménage dans tout ce fouilli et j'ai regroupé pas mal de doublons (voir plus plutot Smiley lol

)

Si vous voyez d'autres choses à enlever ou regrouper ... Smiley cligne

/* CSS yan.k */

body {
	margin: 0;
	text-align: center;
	background-color: #402D20;
}
#global {
	position:absolute;
	left: 50%;
	top: 50%;
	width: 750px;
	height: 550px;
	margin-top: -275px;
	margin-left: -375px;
	background-color: #BFA38F;
}
.header {
	height: 100px;
	background-image:  url(visuels/png/a.png);
}
.menu {
	left: 0px;
	width: 200px;
	position: absolute;
	height: 400px;
	background-image:  url(visuels/png/b.png);
}
.menu:hover {
	background-image:  url(visuels/png/_menuhover.png);
}
.frame {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	color: #402D20;
	margin-left: 200px;
	overflow: auto;
	width: 530px;
	height: 400px;
	margin-right: 20px;
}
.right {
	right: 0px;
	width: 20px;
	position: absolute;
	height: 400px;
	background-image:  url(visuels/png/c.png);
}
#footer {
	height: 50px;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	background-image:  url(visuels/png/d.png);
}
.foot_left {
	float: left;
	margin-left: 5px;
}
.foot_right {
	float: none;
}
a {
	text-decoration: none;
	color: #FFFFFF;
}
a:visited {
	color: #FFB580;
}
a:hover {
	color: #FF8F40;
	background: url(none); /* correction d'un bug IE */
}
a:active/*ie*/, a:focus/*gecko*/ {
	color: #FF6A00;
}
a span { /* définition de la balise <span> inclue dans <a> */
	display: none;
}
a:hover span { /* définition de la balise <span> au survol */
	display: inline;
	position: absolute;
	top: 200px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
	left: 300px;
	width: 200px;
	height: 100px;
	background: green;
	text-align: center;
	color: white;
}
.frame a {
	color: #402410;
}
.frame a:hover {
	color: #FF8F40;
}
h1 {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	margin-top: 20px;
}
h1:hover {
	color: #009999;
}
h2 {
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	margin-right: 20px;
	margin-left: 15px;
	margin-top: 20px;
}
h2:hover {
	color: #99FF00;
}
p {
	font-size: 0.9em;
	font-weight: normal;
	text-align: justify;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 15px;
	margin-top: 20px;
}
p:hover {
	color: #CC6633;
}
.menugauche {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	font-size: 0.9em;
	text-decoration: none;
	margin: 20px 0px 0px 20px;
	list-style-type: none;
	text-align: left;
	padding: 0px;
}
.menugauche li {
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 5px;
}
.menugauche a {
	color: #402410;
}
.menugauche a:visited {
	color: #FFB580;
}
.menugauche a:hover {
	color: #FF8F40;
}
.menugauche a:active/*ie*/, a:focus/*gecko*/ {
	color: #FF6A00;
}
.legend {
	margin-top: 15px;
}
.form {
	border: none;
	padding: 0px;
	width: 180px;
	margin-bottom: 20px;
	margin-top: 10px;
}
.select {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	border: 1px solid #ffffff;
	background-color: #402D20;
}
.select:hover {
	background-color: #FF6A00;
}

Hum

9 Jun 2006 à 16:34

Salut,

tu peux aussi dans des declarations copncernant une meme page ou partie regroupés celles qui sont communes. Tu gagnes de la place mais "ça déstructure" visuellement, attention...


#un , #deux , #trois { propriétés communes}

J'ai ce meme soucis de déclarations inutiles... Smiley biggol

yank

9 Jun 2006 à 16:45

Hum a écrit :
Salut,

tu peux aussi dans des declarations copncernant une meme page ou partie regroupés celles qui sont communes. Tu gagnes de la place mais "ça déstructure" visuellement, attention...
#un , #deux , #trois { propriétés communes}
J'ai ce meme soucis de déclarations inutiles...

Oui je viens de découvrir cette possibilité la également, c'est vrai que l'on gagne de la place mais bon je prefere que visuellement ce soit encore comprehensible pour un début Smiley lol

Merçi

Sujet clos

CSS et mise en forme, CSS3

CSS = Code propre ?