Menu survole couleur

Version imprimable

06/11/2007, 21h13
boolat

Menu survole couleur

bonjour,

sur ce menu http://www.boolat.net/menu.html ,
je voudrais mettre du couleur !
c'est a dire quand je survole les liens,
avoir de la couleur !
c'est possible ?

par exemple la couleur bleu claires transparent !

merci
07/11/2007, 08h06
MasterOfChakhaL

Salut,

Tu peux faire ceci en css.
Si tu as besoin de tuto pour acquérir les bases, direction les cours css ...
07/11/2007, 09h41
boolat

merci pour le lien :king:

je m'explique !

je ne savais pas par quoi commencer et j'ai chercher un template html,après que j'ai trouver j'ai du modifié quelque truc !
c'est a dire déjà modifié le menu pour avoir un menu a par de la page index.
pourquoi a par ..... parce que si je devais ajouter un lien dans le menu ou supprimer un lien j'aurais besoin seulement de la page menu.html pour changer et pas commencer a changer les 100 pages ;)

mais en modifiant j'ai perdue les fond couleur des liens !

je vous montre la page original :
c'est la page inclus avec les fonds couleurs dans le menu
http://users.skynet.be/fb530984/test/

j'ai seulement ajouter un menu a par de la page index.html ceci :
http://users.skynet.be/fb530984/menu.html
et sa donne ceci en résultat : http://www.boolat.net/
résultat : j'ai pas les fonds couleurs !

donc j'ai bon a chercher ou j'ai fais l'erreur ..... :arf: mais je ne trouve pas !

merci
07/11/2007, 11h44
boolat

enfin !

j'ai réussi en mettant le code css navigation dans la page menu.html !

si vous regarder sur ma page www.boolat.net vous aller voir des ligne extra long qui dépasse le menu !

j'ai bon a chercher.... mais je ne trouve pas le code pour changer la longueur !

merci
08/11/2007, 10h23
Bisûnûrs

Le problème a été résolu ? Si non je ne vois pas où il se trouve.
08/11/2007, 12h30
boolat

Résolu non ! mais j'ai enlever se code :

Code:

.navigation li {border-bottom: 1px solid #EAEADA;}

r

pour ne pas voir les lignes ! bon c'est pas jolie mais bon !

j'ai remis le code pour revoir le problème !

merci
08/11/2007, 13h56
Bisûnûrs

Ok, je vois meux. Essaie de donner une largeur à ta balise object.
08/11/2007, 16h12
boolat

comment integré le code pour le largeur ?

merci
08/11/2007, 16h13
Bisûnûrs

Code:

<object width="200" ...>

Et tu remplaces 200 par la largeur (en px) que doit faire ton menu dans ta page.

sur la page menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="AUTHOR" content="McPeter" />
<style type="text/css">
/* navigation */
.navigation {
}
.navigation h2 {
color: #000099;
font: bold 0.9em Tahoma,sans-serif;
line-height: 15px;
margin: 0;
padding-left: 4px;
}
.navigation ul {
padding: 0;
border-top: 1px solid #EAEADA;
}
.navigation li {border-bottom: 1px solid #EAEADA;}
.navigation li a {
font-size: 0.8 em;
color: #554;
display: block;
padding: 1px 0 1px 2%;
text-decoration: none;
width: 70%;
}
.navigation li a:hover {
background: #80a0ff;
color: #000000;
}
</style></head>
<body>
<div style="width: 285px;" class="navigation">
<h2>Hobby</h2>
<li><a target="_top" href="http://users.skynet.be/fb530984/avionelec.html" title="">Avion Électrique</a></li>
<li><a target="_top" href="http://users.skynet.be/fb530984/avionther.html" title="">Avion Thermique</a></li>
<li><a target="_top" href="http://users.skynet.be/fb530984/helico.html" title="">Hélicoptère</a></li>
<li><a target="_top" href="http://users.skynet.be/fb530984/kaanpicooz.html" title="">Kaan Pilote Picooz</a></li>
<li><a target="_top" href="http://users.skynet.be/fb530984/airbrush.html" title="">Airbrush</a></li>
<li><a target="_top" href="http://users.skynet.be/fb530984/lipo.html" title="">Lipo Danger</a></li>
<li><a target="_top" href="http://users.skynet.be/fb530984/forum.html" title="">Forum</a></li>
<li><a target="_top" href="http://users.skynet.be/fb530984/magasin.html" title="">Shop Modelisme</a></li>
<br />
<h2>Linux Ubuntu</h2>
<li><a target="_top" href="http://users.skynet.be/fb530984/ubuntulien.html" title="">Liens Utiles</a></li>
<li><a target="_top" href="http://users.skynet.be/fb530984/captureimageubuntu.html" title="">Captures Images</a></li>
<br />
<h2>Contacter-Moi</h2>
<li><a target="_top" href="http://users.skynet.be/fb530984/msn.html" title="">Messenger Msn</a></li>
<li><a target="_top" href="http://users.skynet.be/fb530984/mail.html" title="">E-Mail</a></li>
<br />
<h2>Livre d'or</h2>
<li><a target="_top" href="http://users.skynet.be/fb530984/livre.html" title="">Livre d'or</a></li>
</div></body></html>

j'ai essayé quelque manip mais je n'arrive pas !

08/11/2007, 16h24
Bisûnûrs

Pas sur cette page là, sur la page dans laquelle tu appelles le menu avec la balise object.

ca va mieux :)

mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<a href="#top">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="description">
<meta name="keywords" content="keywords">
<meta name="author" content="author">
<link rel="stylesheet" type="text/css" href="default.css" media="screen"><title>Bienvenue sur www.boolat.net</title>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="header">
<div class="title"> <span class="sitename"><a href="index.html"><br>
</a></span></div>
</div>
<div class="path"> <a target="_top" href="index.html">Home</a> </div>
<div class="main">
<div style="text-align: center;"></div>
<div style="text-align: center;" class="content">Bienvenue
Sur mon site !<br>
<br>
Je parle de tout et de rien :)<br>
<br>
Bon Surf .....<br>
<br>
--------------------<br>
<br>
<br>
je viens de terminer les liens pour avion électrique,mail,msn,airbrush,hélico,kaan pilote !<br>
la suite pour demain ...<br>
<br>
si vous avez des idées a donner je suis dispo par mail : <br>
<br>
merci<br>
</div>
<div class="navigation">
<object width="175" scrolling="NO" data="menu.html" type="text/html" id="menu"></object></div>
<div style="text-align: center;" class="clearer">&nbsp;</div>
<div style="text-align: center;"></div>
</div>
<div style="text-align: center;"></div>
<div class="footer">
<div style="text-align: center;">
 <a href="javascript:history.go(-1)"><img src="go-previous.png"  alt="Page précédente" width="15" height="15" border="0"></a> 
 <a href="javascript:location.reload()"><img src="view-refresh.png" alt="Actualisez" width="15" height="15" border="0"></a>
 <a href="index.html"><img src="go-home.png"  alt="Accueil" width="15" height="15" border="0"></a> 
 
 <a href="javascript:history.go(+1)"><img src="go-next.png"  alt="Page suivante" width="15" height="15" border="0"></a>
<a href="#top"><img src="go-top.png"  alt="Page top" width="15" height="15" border="0"></a>
<div style="text-align: center;" class="clearer"></div>
</div>
</div>
</div>
</body></html>

sur la page vous allez voir un scroll !

j'ai rajouter scrolling="NO" mais le scroll et toujours la !

sur se code :

Code:

<object width="200" scrolling="NO" data="menu.html" type="text/html" id="menu"></object></div>

merci

08/11/2007, 16h42
Bisûnûrs
La taille de ta balise object fait 175 comme tu l'as précisé, sauf que ton menu, dans ta page menu fait 285px, cf :
Code:

1 2 <div style="width: 285px;" class="navigation"> <h2>Hobby</h2>
Ce qui fait apparaître un scroll parce que l'intérieur est plus large que l'extérieur.
08/11/2007, 18h19
boolat

oufffff c'est vraiment un casse de tête quand c'est pas codé manuellement !
je croie que je fais commencer a coder moi même !

parce que chipoter dans des page déjà codé y a de quoi se perdre !

merciiiii pour l'aide Bisûnûrs

résultat : www.boolat.net