Deux feuilles de Styles

Répondre
abelazi
WRInaute impliqué
WRInaute impliqué
 
Messages: 743
Inscription: 21 Fév 2006

Deux feuilles de Styles

Message le Sam Jan 30, 2010 15:49

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: Tout sélectionner
<!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
Haut
Dan_A
WRInaute discret
WRInaute discret
 
Messages: 183
Inscription: 21 Déc 2005

Re: Deux feuille de Style

Message le Sam Jan 30, 2010 17:56

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.
Haut
abelazi
WRInaute impliqué
WRInaute impliqué
 
Messages: 743
Inscription: 21 Fév 2006

Re: Deux feuille de Style

Message le Sam Jan 30, 2010 18:53

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.
Haut
abelazi
WRInaute impliqué
WRInaute impliqué
 
Messages: 743
Inscription: 21 Fév 2006

Re: Deux feuilles de Styles

Message le Sam Jan 30, 2010 19:58

Voici aussi les deux style.



1 :menu.css utiliser pour faire fonctionner un menu déroulan en CSS
Code: Tout sélectionner
<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: Tout sélectionner
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;
}
Haut
Dan_A
WRInaute discret
WRInaute discret
 
Messages: 183
Inscription: 21 Déc 2005

Re: Deux feuilles de Styles

Message le Sam Jan 30, 2010 21:23

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.
Haut
abelazi
WRInaute impliqué
WRInaute impliqué
 
Messages: 743
Inscription: 21 Fév 2006

Re: Deux feuilles de Styles

Message le Sam Jan 30, 2010 21:35

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
Haut
Rod la Kox
WRInaute accro
WRInaute accro
 
Messages: 3253
Inscription: 24 Juin 2008

Re: Deux feuilles de Styles

Message le Dim Jan 31, 2010 6:04

Dan_A a écrit: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.
Haut
abelazi
WRInaute impliqué
WRInaute impliqué
 
Messages: 743
Inscription: 21 Fév 2006

Re: Deux feuilles de Styles

Message le Dim Jan 31, 2010 12:07

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
Haut
Répondre

Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group Traduction par: phpBB-fr.com, mod SEO par phpbb-seo.com