Deux feuilles de Styles

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par abelazi, 30 Janvier 2010.

  1. abelazi
    abelazi WRInaute impliqué
    Inscrit:
    21 Février 2006
    Messages:
    695
    J'aime reçus:
    0
    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
     
  2. Dan_A
    Dan_A WRInaute discret
    Inscrit:
    21 Décembre 2005
    Messages:
    193
    J'aime reçus:
    0
    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.
     
  3. abelazi
    abelazi WRInaute impliqué
    Inscrit:
    21 Février 2006
    Messages:
    695
    J'aime reçus:
    0
    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.
     
  4. abelazi
    abelazi WRInaute impliqué
    Inscrit:
    21 Février 2006
    Messages:
    695
    J'aime reçus:
    0
    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;
    }
     
  5. Dan_A
    Dan_A WRInaute discret
    Inscrit:
    21 Décembre 2005
    Messages:
    193
    J'aime reçus:
    0
    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.
     
  6. abelazi
    abelazi WRInaute impliqué
    Inscrit:
    21 Février 2006
    Messages:
    695
    J'aime reçus:
    0
    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
     
  7. Rod la Kox
    Rod la Kox WRInaute accro
    Inscrit:
    24 Juin 2008
    Messages:
    2 803
    J'aime reçus:
    0
    :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.
     
  8. abelazi
    abelazi WRInaute impliqué
    Inscrit:
    21 Février 2006
    Messages:
    695
    J'aime reçus:
    0
    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
     
Chargement...
Similar Threads - feuilles Styles Forum Date
feuilles de styles non obtenues par Googlebot Crawl et indexation Google, sitemaps 28 Septembre 2018
Feuilles de styles CSS : pourquoi vos mailings arrivent en vrac Développement d'un site Web ou d'une appli mobile 29 Septembre 2011
feuilles de styles Débuter en référencement 29 Juillet 2009
Feuilles de style fabriquées en dynamique ? Développement d'un site Web ou d'une appli mobile 11 Août 2012
Les feuilles de style.css peuvent-elles nuire au référecnement? Débuter en référencement 20 Septembre 2010
IE 8 et feuilles de style Développement d'un site Web ou d'une appli mobile 14 Juillet 2009
Quel site pour produire les styles css d'une page ? Développement d'un site Web ou d'une appli mobile 25 Avril 2018
stylesheet dans le head ou asynchrone ? Développement d'un site Web ou d'une appli mobile 17 Septembre 2015
Comment supprimer des styles CSS et du JavaScript sur son site ? Développement d'un site Web ou d'une appli mobile 27 Novembre 2013
Plusieurs styles de tableau ? Développement d'un site Web ou d'une appli mobile 28 Juin 2012
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice