Deux feuilles de Styles

abelazi · 30 Janvier 2010

Bonjour,

j'utilise pour mon site deux feuille de style une pour un menu en CSS et une autre pour le reste: lien, text etc..

Merci me dire comment faire un appelle a deux feuille de style sans l'une fait un colision avec l'autre car quand je fait comme ça , ça marche mais il y a des décalage sur la structure de site et dans le menu CSS.

voici le code que j'ai mis pour les deux feuille de style entre <head> et </head>.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre</title>
<meta name="Description" content="xxx" />
<meta name="Keywords" content="xxxxxx" />
<meta name="Identifier-URL" content="http://www.monsite.com" />
<meta name="Language" content="fr" />
<meta name="Revisit-after" content="7 day" />
<meta name="robots" content="Index,follow,all" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>

Mille merci a vous d'avance

Dan_A · 30 Janvier 2010

Re: Deux feuille de Style

Utiliser 2 feuilles de style n'est pas une bonne idée.
Toute propriété redéfinie remplace la précédente et le seul moyen d'éviter un remplacement c'est de ne pas utiliser un même nom pour deux attributs ou deux identificateurs ou de redéfinir de manière vague un sélecteur.
On peut aussi jouer sur le poids en indiquant que les instructions ne s'appliquent qu'à un identificateur (pour le menu par exemple ) afin de ne pas surcharger les définitions précédentes.

abelazi · 30 Janvier 2010

Re: Deux feuille de Style

Merci Dan_A pour ta réponse. Oui ça sera super si on peux jouer sur le poids en indiquant que les instructions ne s'appliquent qu'à un identificateur ça sera bien pour le menu comme tu as dis. Mais le problème je ne sais pas comment faire ça. Tu peux m'aider STP comment doit être le code. Mille merci, j'attends ta réponse.

abelazi · 30 Janvier 2010

Voici aussi les deux style.

1 :menu.css utiliser pour faire fonctionner un menu déroulan en CSS

Code:

<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #941C21;width:987px; border:solid 1px #740706;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01  a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:normal;
font-size:12px;
color: #FFFFFF;
background-color: #941C21;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #740706; border-left:solid 1px #740706;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #941C21;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #941C21; width:1px}
.pd_menu_01 ul li:hover a {background-color:#941C21; text-decoration:none; color:#FAC72E;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #740706; border-bottom: solid 1px #740706; background-color:#941C21;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#74070B; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#941C21; text-decoration:none;color:#FAC72E;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#941C21;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #740706; border-bottom: solid 1px #740706; background-color:#941C21;  color:#FFFFFF;} 
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#74070B; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
</style>



<style type="text/css">

.h_mnu_01{
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}

.h_mnu_01 ul{
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	background: #E9E9E9;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000
}

.h_mnu_01 ul li{
display: inline;
}

.h_mnu_01 ul li a{
	float: left;
	color: #808080;
	padding: 5px 11px;
	text-decoration: none;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #C0C0C0;
}

.h_mnu_01 ul li a:visited{
color: #808080;
}

.h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{
	color: #808080 !important;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #E2E2E2;
}

</style>

2 :style.css utliser pour les pages (text, liens etc...)

Code:

BODY {
	MARGIN-TOP: 10px; FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
TD {
	FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
P {
	FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.st_tbcss,.st_tdcss,.st_divcss,.st_ftcss{border:none;padding:0px;margin:0px;}

A {
	COLOR: #00759b; TEXT-DECORATION: none
}
A:hover {
	COLOR: #ff9900; TEXT-DECORATION: underline
}
A.blanc:hover {
	COLOR: #fffacd
}
A.noiro:hover {
	COLOR: #fffacd
}
A.txt:hover {
FONT-SIZE: 11px; COLOR: #993300; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.txt {
FONT-SIZE: 11px; COLOR: #ff6600; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}
A.blancns:hover {
	COLOR: #fffacd; TEXT-DECORATION: underline
}
A.detail {
	COLOR: red; WHITE-SPACE: nowrap; TEXT-DECORATION: underline
}
A.detail:visited {
	COLOR: gray; TEXT-DECORATION: none
}
A.ville {
	TEXT-DECORATION: underline
}
A.ville:visited {
	COLOR: gray; TEXT-DECORATION: none
}
.T13 {
	FONT-SIZE: 10px; COLOR: #993300; TEXT-DECORATION: none
}
.T10 {
	FONT-SIZE: 10px
}
.lien {
	FONT-SIZE: 10px; COLOR: gray; TEXT-DECORATION: none
}
#lien_footer {
	FONT-SIZE: 9px; COLOR: #999999
}
#lien_footer A {
	COLOR: #999999; TEXT-DECORATION: none
}
H1 {
	MARGIN-BOTTOM: 2px; FONT: bold 16px "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif; COLOR: #3399cc
}
H2 {
	MARGIN-BOTTOM: 5px; FONT: bold 12px "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif; COLOR: #0099cc; BORDER-BOTTOM: #0099cc 1px dotted
}
H3 {
	FONT-WEIGHT: bold; FONT-SIZE: 12px
}
H4 {
	MARGIN-BOTTOM: 5px; FONT: bold 12px "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif; COLOR: #ffa500
}


.blanc {
	COLOR: #ffffff
}
.blancns {
	COLOR: #ffffff; TEXT-DECORATION: none
}
.noir {
	COLOR: #000000
}
.noirns {
	COLOR: black; TEXT-DECORATION: none
}
.titre_form {
	FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #7e9aaf
}
A.noirns:hover {
	COLOR: #FF9900
}
.ns {
	TEXT-DECORATION: none
}
.orange {
	FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: red
}
UL {
	LIST-STYLE-TYPE: square
}
LI {
	DISPLAY: list-item; MARGIN-LEFT: -10px
}
.surligne {
	BACKGROUND-COLOR: #b0c4de
}
.complet {
	
}
.villesList {
	MARGIN-TOP: 3px; PADDING-LEFT: 0px; FONT-SIZE: 10px; MARGIN-LEFT: -20px; TEXT-TRANSFORM: capitalize; LIST-STYLE-TYPE: decimal; TEXT-DECORATION: none
}
.station {
	LIST-STYLE-IMAGE: url(http://www.bertrandvacances.com/indicateur/internet/images/fle_cya.gif); TEXT-TRANSFORM: capitalize; LINE-HEIGHT: 18px
}
A.station {
	COLOR: #000000; TEXT-DECORATION: none
}
A.station:hover {
	COLOR: #0099cc
}
UL.station {
	MARGIN-LEFT: -15px
}

FORM.css {
	MARGIN: 0px
}
FORM.css INPUT {
	BORDER-RIGHT: #7e9aaf 1px solid; BORDER-TOP: #7e9aaf 1px solid; FONT-SIZE: 10px; MARGIN: 0px; BORDER-LEFT: #7e9aaf 1px solid; COLOR: #0099cc; BORDER-BOTTOM: #7e9aaf 1px solid; FONT-FAMILY: Arial; BACKGROUND-COLOR: #dfefff
}
INPUT {
	BORDER-RIGHT: #7e9aaf 1px solid; BORDER-TOP: #7e9aaf 1px solid; FONT-SIZE: 10px; BORDER-LEFT: #7e9aaf 1px solid; BORDER-BOTTOM: #7e9aaf 1px solid; FONT-FAMILY: Arial
}
INPUT.noborder {
	MARGIN: 1px 2px 1px 1px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
SELECT {
	BORDER-RIGHT: #7e9aaf 1px solid; BORDER-TOP: #7e9aaf 1px solid; FONT-SIZE: 10px; BORDER-LEFT: #7e9aaf 1px solid; BORDER-BOTTOM: #7e9aaf 1px solid; FONT-FAMILY: Arial
}
TEXTAREA {
	BORDER-RIGHT: #7e9aaf 1px solid; BORDER-TOP: #7e9aaf 1px solid; FONT-SIZE: 10px; BORDER-LEFT: #7e9aaf 1px solid; BORDER-BOTTOM: #7e9aaf 1px solid; FONT-FAMILY: Arial
}
.popperlink {
	BORDER-RIGHT: #0099cc 1px solid; BORDER-TOP: #0099cc 1px solid; VISIBILITY: hidden; BORDER-LEFT: #0099cc 1px solid; BORDER-BOTTOM: #0099cc 1px solid; POSITION: absolute; BACKGROUND-COLOR: #99ccff
}
DIV.mirror_element P {
	BORDER-RIGHT: #add8e6 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #add8e6 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 5px 0px; BORDER-LEFT: #add8e6 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #add8e6 1px solid; BACKGROUND-COLOR: white
}
.mirror_liens {
	FONT-SIZE: 10px; COLOR: navy; TEXT-DECORATION: none
}
.texte {
	WORD-SPACING: 1px; LETTER-SPACING: 1px
}
.contenu {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: justify
}
#annonce-part {
	BORDER-RIGHT: #c5e1eb 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c5e1eb 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #c5e1eb 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #c5e1eb 1px solid; TEXT-ALIGN: justify
}
#annonce-pro {
	BORDER-RIGHT: #ffefd2 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffefd2 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #ffefd2 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #ffefd2 1px solid; TEXT-ALIGN: justify
}
#annonce-loc {
	FLOAT: left
}

#annonce-ph {
	FLOAT: left; PADDING-TOP: 5px; HEIGHT: auto; TEXT-ALIGN: center
}

#spacer {
	CLEAR: both
}
.spacer {
	CLEAR: both
}
.det {
	FONT-SIZE: 11px; FONT-FAMILY: Arial, Helvetica; COLOR: #666666;
}
.formulaire {
	   size: 2; font-size:12px; font-family:Verdana; COLOR: #666666;
}
.formul2 {
	   size: 2; font-size:12px; font-family:Verdana; COLOR: #6666FF;
}

Dan_A · 30 Janvier 2010

Le code affiché ci-dessus n'est pas valide s'il est mis dans une feuille de style.
Si l'html est bon, seul le menu doit être affecté car le poids des attributs pour le menu est supérieur à ce qui se trouve dans l'autre feuille.
Il faut enlever les balises html du fichier de style des menus, si possible tout mettre dans une seule feuille, placer behaviour dans des commentaires conditionnels pour IE <=6 et valider la feuille de style.

abelazi · 30 Janvier 2010

Merci Dan_A . je sais pas comment faire je suis un débutant et je doit lancer mon site d'ici lundi. ça sera vraiment sympa de ta part si tu arrive a me faire ça et les assembler en une seule code.

Mille merci, j'attends ta réponse

Rod la Kox · 31 Janvier 2010

Dan_A a dit:
Utiliser 2 feuilles de style n'est pas une bonne idée.

:roll:

Alors, reprenons.

2 feuilles de styles imposent 2 téléchargements, mais... si on utilise pour les 2 la balise <link>, elles se téléchargent en parallèle, et donc... pas de perte de temps.

Miantenant, pourquoi 2, ou plusieurs feuilles de styles ?
1 - Afin de ne pas mettre de hack IE dans sa feuille et en créée une spéciale pour IE
2 - Afin de ne pas mettre des bouts de codes css qui ne sont utilisé que très rarement dans la feuille principales afin de ne pas l'alourdir inutilement.

abelazi · 31 Janvier 2010

Bonjour,

Merci c'est sympa. mais comment faire tous ça ?vraiment débutant et je ne sais pas faire ça pour cela je vous demande l'aide.
ça sera très sympa si quelqu'un peux m'assembler les deux feuille en une seule et me dire je doit méttre quoi comme code entre <head> et </head> pour appeler la feuille.

Merci beaucoup. j'attends vos réponse. bonne journée