Menu couleur
Résolu
boolat
Messages postés
225
Date d'inscription
Statut
Membre
Dernière intervention
-
boolat Messages postés 225 Date d'inscription Statut Membre Dernière intervention -
boolat Messages postés 225 Date d'inscription Statut Membre Dernière intervention -
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
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:
- Menu couleur
- Menu déroulant excel - Guide
- Excel cellule couleur si condition texte - Guide
- Boite a couleur - Télécharger - Divers Photo & Graphisme
- Somme si couleur - Guide
- Canon quick menu - Télécharger - Utilitaires
17 réponses
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.
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 É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="">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'É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>
rien qui va :(
je veux un truc comme ceci :
http://demo.cmsmadesimple.fr/
quand je survole les liens que sa change de couleurs
je veux un truc comme ceci :
http://demo.cmsmadesimple.fr/
quand je survole les liens que sa change de couleurs
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.
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.
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 ?
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 ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
tu le sors d'où ça ?
parce que aucun style n'est attaché à ton document html.
c'est dans un fichier '.css' à côté ?
parce que aucun style n'est attaché à ton document html.
c'est dans un fichier '.css' à côté ?
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 :
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>
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>
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>
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
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
salut,
le code pour le menu doit être celui là :
mais il manque une classe "navigation" dans ta page pour qu'il puisse la sélectionner.
sur l'originale, c'était dans un '<div>'.
si tu peux utiliser php, avec un simple
tu t'embêterais beaucoup moins.
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.
dans ce cas, mets le style du menu dans le '<head>' de 'navigation.html', ça va bien finir par passer !
j'ai pas de 'navigation.html' ?
j'ai :
index.html
menu.html
default.css
et un dossier img avec 3 image dedans !
j'ai :
index.html
menu.html
default.css
et un dossier img avec 3 image dedans !
ENFIN :)
http://www.boolat.net/
je doit maintenant changer la police,supprimer le scroll et sa devrais être bon :)
http://www.boolat.net/
je doit maintenant changer la police,supprimer le scroll et sa devrais être bon :)
