Sujet Précédent Sujet Suivant

Deux feuille de Style ( Help ) Bo

abelazi Messages postés 13 Statut Membre -  
avion-f16 Messages postés 20367 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

j'utilise pour mon site deux feuille de style une pour deux 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
A voir également:

4 réponses

Réponse 1 / 4
rudak Messages postés 590 Date d'inscription   Statut Membre Dernière intervention   46
 
tu devrai mettre la source du site en entier aussi...
0
Réponse 2 / 4
avion-f16 Messages postés 20367 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
Il suffit d'utiliser deux balises <link />
Si tu veux éviter les problèmes, il suffit de ne pas modifier un élément déjà stylé dans l'autre feuille de style.
0
Réponse 3 / 4
abelazi Messages postés 13 Statut Membre
 
Bonjour,

Merci,. ce que j'ai fait mas ça marche pas:

<link href="style.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
0
Réponse 4 / 4
avion-f16 Messages postés 20367 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
Et lorsque tu mets tout le CSS dans la même feuille ça fonctionne ?
Si oui : tu ne mets pas le bon chemin
Si non : ton CSS est mauvais, ce n'est pas à cause des 2 fichiers.
0

Discussions similaires

Feuille de score belote
nulleeninfo -
brucine -

7 réponses
feuille excel de gestion belote
SiFaSiLa -
frank -

2 réponses
Imprimer un document paysage A3 avec deux feuilles A4
nikoss -
Lilo -

10 réponses