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>.
Voici aussi les deux style.
1 :menu.css utiliser pour faire fonctionner un menu déroulan en CSS
2 :style.css utliser pour les pages (text, liens etc...)
Mille merci pour votre aide
Modifié par abelazi (30 Jan 2010 - 21:39)
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>.
<!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>
Voici aussi les deux style.
1 :menu.css utiliser pour faire fonctionner un menu déroulan en CSS
<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...)
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;
}
Mille merci pour votre aide
Modifié par abelazi (30 Jan 2010 - 21:39)