Menu couleur

Résolu
boolat Messages postés 231 Statut Membre -  
boolat Messages postés 231 Statut Membre -
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
A voir également:

17 réponses

Réponse 1 / 17
Dalida Messages postés 7114 Statut Contributeur 923
 
salut,

en premier il te faut un html plus propre, pour les css, je t'ai mis les sélecteurs, il faut les garder dans cet ordre. 
<!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=ISO-8859-1" />
		<meta name="author" content="McPeter" />
		<style type="text/css">
div#menu a:link
{
color:#f00;
}
div#menu a:visited
{
color:#0f0;
}
div#menu a:hover
{
color:#00f;
}
div#menu a:active
{
color:#ff0;
}
		</style>

	</head>

	<body>
		<div id="menu">
			<p>Hobby Aéromodélisme</p>
			<ul>
				<li><a target="_top" href="http://users.skynet.be/fb530984/avionelec.html" title="">Avion &Eacute;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&eacute;licopt&egrave;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="">Magasin internationale</a></li>
			</ul>
			<p>Linux Ubuntu</p>
			<ul>
				<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 d'&Eacute;cran</a></li>
			</ul>
			<p>Contactez-Moi</p>
			<ul>
				<li><a target="_top" href="http://users.skynet.be/fb530984/msn.html" title="">Messenger WLM</a></li>
				<li><a target="_top" href="http://users.skynet.be/fb530984/mail.html" title="">E-Mail</a></li>
			</ul>
			<p>Livre d'or</p>
			<ul>
				<li><a target="_top" href="http://users.skynet.be/fb530984/livre.html" title="">Livre d'or</a></li>
			</ul>
		</div>
	</body>

</html>
0
Réponse 2 / 17
boolat Messages postés 231 Statut Membre 3
 
rien qui va :(

je veux un truc comme ceci :

http://demo.cmsmadesimple.fr/

quand je survole les liens que sa change de couleurs
0
Réponse 3 / 17
Dalida Messages postés 7114 Statut Contributeur 923
 
rien qui va :(
que veux-tu dire exactement ?
en théorie les liens changent de couleur.

pour le reste, c'est bien joli de vouloir courir mais il faut commencer par apprendre à marcher !!!
le menu que tu montres est joli et surtout semble très bien fait mais avant cela il faut que tu comprennes les bases de css.
et apprendre à changer la couleur du lien ça me semblait être un bon début !

regarde ces menus et essaie de comprendre comment ça fonctionne ou demande nous quand tu bloques.
0
Réponse 4 / 17
boolat Messages postés 231 Statut Membre 3
 
petite question :

dans mon css le code pour le menu c'est de ou a ou ?

html {min-height: 100%;}

* {
margin: 0;
padding: 0;
}

a {color: #048;}
a:hover {color: #06C;}

body {
background: #E7E7E2 url('img/body.jpg') no-repeat center top;
color: #444;
font: normal 62.5% Tahoma,sans-serif;
padding-top: 64px;
}

p,code,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {font: normal 1.8em Tahoma,sans-serif;}
h2 {font: bold 1.4em sans-serif;}
h3 {font: bold 1em Tahoma,sans-serif;}

form,input {margin: 0; padding: 0; display: inline;}

code {
background: #FFF;
border: 1px solid #EEE;
border-left: 6px solid #CCC;
color: #666;
display: block;
font: normal 1em Tahoma,sans-serif;
line-height: 1.6em;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}

blockquote {
background: url(img/quote.gif) no-repeat;
display: block;
font-weight: bold;
padding-left: 28px;
}

h1,h2,h3 {padding-top: 6px; color: #553; margin-bottom: 4px;}

/* misc */
.clearer {clear: both; font-size: 0;}
.left {float: left;}
.right {float: right;}[/b]

/* structure */
.inner-container {
border: 2px solid #D7D7D2;
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 10px;
width: 780px;
}

.outer-container {
background: url('img/container.jpg') no-repeat center bottom;
padding-bottom: 64px;
}

/* headere & title */
.header {
background: #222 url('img/header.jpg') no-repeat;
height: 160px;
margin-bottom: 5px;
text-align: center;
}
.header .title {
color: #FFF;
padding-top: 50px;
}
.header .title .sitename a {
border-bottom: 1px dashed #657382;
color: #FFF;
font: normal 3em sans-serif;
padding-bottom: 2px;
text-decoration: none;
}
.header .title a:hover {border-color: #F60;}
.header .title .slogan {
font: normal 1.1em Verdana,sans-serif;
padding-top: 6px;
}

/* path */
.path {
background: #949490;
color: #FFF;
font: normal 1.1em Verdana,sans-serif;
padding: 8px 12px;
}
.path a {
color: #FAFAFA;
text-decoration: none;
}
.path a:hover {
color: #FFE;
text-decoration: underline;
}

/* main */
.main {
background: url(img/main.gif) repeat-y;
border-top: 4px solid #FFF;
padding: 8px 12px 0 0;
}

/* content */
.content {
float: right;
width: 538px;
}
.content .descr {
color: #664;
font-size: 0.9em;
margin-bottom: 6px;
}
.content li {
list-style: url(img/li.gif);
margin-left: 18px;
}
.content p {font-family: "Lucida Sans Unicode",sans-serif;}

/* navigation */
.navigation {
float: left;
width: 152px;
}
.navigation h2 {
color: #5A5A43;
font: bold 1.1em Tahoma,sans-serif;
line-height: 30px;
margin: 0;
padding-left: 12px;
}
.navigation ul {
padding: 0;
border-top: 1px solid #EAEADA;
}
.navigation li {border-bottom: 1px solid #EAEADA;}
.navigation li a {
font-size: 1.1em;
color: #554;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.navigation li a:hover {
background: #F0F0EB;
color: #654;
}

/* footer */
.footer {
background: #949490;
color: #F7F7F2;
font: bold 1em sans-serif;
margin-top: 5px;
padding: 10px 12px;
}
.footer a {
color: #F7F7F2;
text-decoration: none;
}
.footer a:hover {color: #FFC;}
#menu { height: 400px; }

c'est les codes en noirs gras ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
Dalida Messages postés 7114 Statut Contributeur 923
 
tu le sors d'où ça ?
parce que aucun style n'est attaché à ton document html.

c'est dans un fichier '.css' à côté ?
0
Réponse 6 / 17
boolat Messages postés 231 Statut Membre 3
 
un fichier defaul.css
0
Réponse 7 / 17
Dalida Messages postés 7114 Statut Contributeur 923
 
ce n'est pas 'default.css' ?
si oui, tu corrigeras.

si le fichier CSS est dans le même dossier que 'index' (sinon modifie l'url) ajoute ça dans le '<head>' pour que le style s'applique : 
<script type="text/css" src="defaul.css"></script>
0
Réponse 8 / 17
boolat Messages postés 231 Statut Membre 3
 
oui le 'default.css' et bien dans le même dossier !
avec le code cela ne change rien !


j'ai déjà un code qui ressemble au tiens :

<link rel="stylesheet" type="text/css" href="default.css" media="screen"><title>Bienvenue sur www.boolat.net</title>
0
Réponse 9 / 17
boolat Messages postés 231 Statut Membre 3
 
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 ..... mais je ne trouve pas !

merci
0
Réponse 10 / 17
Dalida Messages postés 7114 Statut Contributeur 923
 
salut,

le code pour le menu doit être celui là : 
/* navigation */
.navigation {
float: left;
width: 152px;
}
.navigation h2 {
color: #5A5A43;
font: bold 1.1em Tahoma,sans-serif;
line-height: 30px;
margin: 0;
padding-left: 12px;
}
.navigation ul {
padding: 0;
border-top: 1px solid #EAEADA;
}
.navigation li {border-bottom: 1px solid #EAEADA;}
.navigation li a {
font-size: 1.1em;
color: #554;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.navigation li a:hover {
background: #F0F0EB;
color: #654;
}

mais il manque une classe "navigation" dans ta page pour qu'il puisse la sélectionner.
sur l'originale, c'était dans un '<div>'. 
		<div class="navigation">

			<h2>test</h2>
			<ul>
				<li><a href="index.html">test</a></li>
				<li><a href="index.html">test</a></li>
				<li><a href="index.html">test</a></li>
				<li><a href="index.html">test</a></li>
			</ul>

			<h2>test 001</h2>
			<ul>
				<li><a href="index.html">test</a></li>
				<li><a href="index.html">test</a></li>
				<li><a href="index.html">test</a></li>
				<li><a href="index.html">test</a></li>
			</ul>

			<h2>test 002</h2>
			<ul>
				<li><a href="index.html">test</a></li>
				<li><a href="index.html">test</a></li>
				<li><a href="index.html">test</a></li>
				<li><a href="index.html">test</a></li>
			</ul>

		</div>

si tu peux utiliser php, avec un simple 
<?php include(navigation.php); ?>

tu t'embêterais beaucoup moins.
0
Réponse 11 / 17
boolat Messages postés 231 Statut Membre 3
 
j'ai pas droit au php :(

cela encore ne change rien ! avec le <div class="navigation"> !
0
Réponse 12 / 17
Dalida Messages postés 7114 Statut Contributeur 923
 
dans ce cas, mets le style du menu dans le '<head>' de 'navigation.html', ça va bien finir par passer !
0
Réponse 13 / 17
boolat Messages postés 231 Statut Membre 3
 
j'ai pas de 'navigation.html' ?

j'ai :

index.html
menu.html
default.css

et un dossier img avec 3 image dedans !
0
Réponse 14 / 17
Dalida Messages postés 7114 Statut Contributeur 923
 
'menu.html ' !!!
menu ~ navigation …
0
Réponse 15 / 17
boolat Messages postés 231 Statut Membre 3
 
ENFIN :)

http://www.boolat.net/


je doit maintenant changer la police,supprimer le scroll et sa devrais être bon :)
0
Réponse 16 / 17
Dalida Messages postés 7114 Statut Contributeur 923
 
juste une remarque en passant, sur mon moniteur on ne voit quasiment pas la différence de couleur (de #ffffff à #f0f0eb y a vraiment pas grand chose !), il faudrait contraster un peu.

et bon courage pour la suite !
0
Réponse 17 / 17
boolat Messages postés 231 Statut Membre 3
 
merci Dalida
0

Discussions similaires

sertissage des cables rj45
lekludo -
brupala -

7 réponses
pipette dans word 365
isabellef -
m@rina -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
Changer la couleur de fond d'un en-tête
Adamantine -
Karine -

5 réponses
Couleur transparente
ando26 -
Turtlee -

25 réponses