PROBLEME CSS

[ysmedia]

Bonjour à tous et merci par avance pour votre aide !!!
J'ai créé un fichier css qui défini le style de mon menu (tout marche sur ce point)
Je vous le copie pour savoir où j'en suis :
----------------------------------------------------------------------------------------------------
.pro_line4 {
height:36px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
z-index:500;
}

.pro_line4 .select {

padding:0 0 0 20px;
list-style:none;
white-space:nowrap;
}

.pro_line4 li {
float:left;
background:url(line/blank_over_sepia2.gif);
}

.pro_line4 .select a {
display:block;
height:36px;
float:left;
background: url(line/blank_sepia2.gif);
padding:0 0 0 15px;
text-decoration:none;
line-height:25px;
white-space:nowrap;
color:#FFCC99;
}

.pro_line4 .select a b {
display:block;
padding:0 30px 10px 15px;
background:url(line/blank_sepia2.gif) right top;
}

.pro_line4 .select a:hover,
.pro_line4 .select li:hover a {
background: url(line/blank_over_sepia2.gif);
padding:0 0 0 15px;
line-height:26px;
cursorointer;
color:#ff9933;
}

.pro_line4 .select a:hover b,
.pro_line4 .select li:hover a b {
display:block;
padding:0 30px 9px 15px;
background:url(line/blank_over_sepia2.gif) right top;
cursorointer;
}

.pro_line4 .sub {
display:none;
}

/* IE6 only */
.pro_line4 table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.pro_line4 .sub {
margin:0;
padding:0 0 0 60px;
list-style:none;
}
.pro_line4 .sub li {background:transparent;}

.pro_line4 .select :hover .sub {
height:18px;
display:block;
position:absolute;
float:left;
width:750px;top:28px;
left:0;
text-align:center;
}

.pro_line4 .select :hover .sub li a
{display:block; height:18px; line-height:16px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:10px; white-space:nowrap; border:1px solid #000; border-color:#ffcc99 #ffcc99 #ffcc99 #ffcc99; color:#ffcc99;font-size:11px;}

.pro_line4 .select :hover .sub li a:hover
{color:#ffcc99; background:#773300; border-color: #ffcc99 #ffcc99 #ffcc99 #ffcc99; line-height:15px;}

A { color:#FFCC99; text-decoration:none; }
A:hover { color:#FF0000;text-decoration:underline;}
----------------------------------------------------------------------------------------------------------------------------------
Je fais donc appel à ce fichier sur ma page html. Pour le contenu de ce menu, j'ai, toujours sur ma page html :
----------------------------------------------------------------------------------------------------------------------------------
<div class="pro_line4">
<ul class="select"><li><a href="http://www.creatweb.com/LAMA/index.htm"><b>Accueil</b></a>
<li><a href="#nogo"><b>Karma Kagyüd</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="lignee.htm">Lignée Karma Kagyüd</a></li>
<li><a href="maitres.htm">Principaux maîtres détenteurs de la lignée</a></li>
<li><a href="lamanorbourepa.htm">Lama Norbou Repa</a></li>
<li><a href="agenda.htm">Agenda</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Bouddhisme</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="edharma.htm">E_Dharma</a></li>
<li><a href="#nogo">A voir</a></li>
<li><a href="#nogo">A voir</a></li>
<li><a href="#nogo">A voir</a></li>
<li><a href="#nogo">A voir</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Le centre TNG</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="centretng.htm">Le centre TNG</a></li>
<li><a href="agenda.htm">Séminaires</a></li>
<li><a href="bibliotheque.htm">Bibliothèque</a></li>
<li><a href="konchog.htm">Konchog Tsegpa</a></li>
<li><a href="sangha.htm">Sangha</a></li>
<li><a href="actibet.htm">Activités au Tibet</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Contact</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="contact.htm">Nous contacter - voir le plan d'accès</a></li>
<li><a href="dons.htm">Soutenir le centre et ses activités à but humanitaires</a></li>
<li><a href="dratagpa.htm">Dra Tagpa Ritru</a></li>
<li><a href="liens.htm">Liens</a></li>
</li>
</ul>
</div>
----------------------------------------------
sachant que ce menu va revenir sur toutes mes pages, est-il possible de l'inclure sur un fichier css, et comment ?
Merci d'avance à tous les pros qui prendront la peine de me lire )

 

[Babylon]

Salut,

Pour inclure ton fichier css dans toute tes pages tu dois :
-créer un fichier .css (ex: styles.css) où tu copie/colle le css de ton menu ( et le reste des styles de ta page aussi si tu veux ...)
- puis pour chaque page ou tu veux faire appel à tes styles css tu met dans ton header ( entre les balise <head></head>) ce bout de code qui appel ton fichier css
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" /> (le href est le chemin où se trouve ton fichier styles.css)

Bye

 

[Celtic Girl]

Si j'ai tout compris, tu veux que le style de ton menu se retrouve dans toutes tes pages.
Pour cela, il te suffit donc de mettre ton code css dans une feuille externe, et de l'appeler
dans toutes les pages à l'aide ce code :

<link type="text/css" rel="stylesheet" media="screen href="style.css">

Ensuite, si tu parles du code html, je te conseille de faire un include en php sur chaque page... :wink:

 

[bg62]

et lorsque tu auras fait tout cela, télécharge le plugin "firebug" pour firefox, tu verras cela t'aideras énormément pour tester et corriger
b g