FORUM D’ENTRAIDE INFORMATIQUE (FEI)
Site d’assistance et de sécurité informatique

HTML/CSS : changer couleur bouton actif <nav>

Règles du forum : Entraide concernant la programmation informatique en général, tous langages : recherche ou correction d'un code ou d'une fonction, aide à la réalisation d'un projet...
Pour la programmation web (HTML, CSS, PHP, MySQL...), il est conseillé de s'orienter dans le forum Webmastering.
Merci de lire et de respecter la charte générale du forum.

Répondre

Afin d’empêcher la création automatisée de comptes, nous vous demandons de réussir le défi ci-contre.
Smileys
:D :) :-) ;) :| :( :cry: :cheers: :hourra: :mv: :lol: :mdr: :bonjour: :hello: :jap: :siffle: :bisou: :P :o :x :roll: :good: :bad: :super: :reflexion: :suspect: :? :oops: :peur: :zen: :boude: :bug:

Revue du sujet : HTML/CSS : changer couleur bouton actif <nav> Étendre la vue

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » ven. 10 avr. 2015 21:37
ALLÉLUIA !!!

Grâce à ton lien, j'ai enfin trouvé ! x)
-> Celui-ci !

Je mets mon code et mon CSS... Ça peut toujours aider d'autres personnes ! ;)

HTML :
Code : Tout sélectionner
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Porte feuille de competences">
        <meta name="author" content="LAURENT Anthony">
        <title>Accueil - Anthony LAURENT</title>
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="css/myCss.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
<!-->
<!-->
    <body>
        <div class="container" >
            <header class="row">
                <!-- Navigation -->                    
                <nav class="col-md-offset-1 col-md-10"> 
                   <ul class="nav nav-pills">
                      <li> <a href="index.html"> <span class="glyphicon glyphicon-home"></span> Accueil </a> </li>
                      <li> <a href="porteFeuille.html"> <span class="glyphicon glyphicon-list-alt"></span> Compétences </a> </li>
                      <li class="active"> <a href="memento.html"> <span class="glyphicon glyphicon-folder-open"></span> Memento </a> </li>
                      <li> <a href="meContacter.html"> <span class="glyphicon glyphicon-envelope"></span> Me contacter </a> </li>
                    </ul>
                </nav>
            </header>
    <!-->
    <!-->
            <h1>Liens utiles</h1>
            <ul>    
                <li><a href="http://forum.joomla.fr/showthread.php?178676-La-partie-css-de-bootstrap">Forum</a></li>
                <li><a href="http://www.bootply.com/new">Voir son code sur le net</a></li>
                <li><a href="http://openclassrooms.com/courses/prenez-en-main-bootstrap/configurer-bootstrap">OpenClassRoom</a></li>
                <li><a href="http://www.bootply.com/new">Voir son code sur le net</a></li>
            </ul>
        </div>
      </body>   
   </html>      
</html>
CSS :
Code : Tout sélectionner
/*!
 * Start Bootstrap - Heroic Features HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 10px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    background-color: #000000; /*couleur de fond de la page*/
    color: #33ff33; /*Couleur autres (boutons <li>, ...)*/
    font-size: 18px; /*Taille gloable du site (police, tableau, ...)*/
    line-height: 25px; /*Hauteur des lignes (Espace entre les lignes)*/
}

a {
    color : #028; /*Couleur des liens <a>*/
}

footer{
    text-align: center;
}

nav{
    background-color: #ffff00; /*la couleur de fond du bandeau de navigation*/
    border-radius: 8px; /*Arrondit les angles*/
    padding: 0; /*Important*/
    border: 5px solid #ffffff; /*Largeur du contour - - Couleur du contour*/
}

section{
    padding-right: 0; /*Important*/
}
/*
.nav > li > a:hover, .nav > li > a:focus {
  background-color: #33ff33; 
}
*/

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
  color: #000000; /*Couleur du texte ACTIF*/
  background-color: #ffffff; /*Couleur de fond de l'onglet ACTIF*/
  border-radius: 8px;
}

Merci à toi et en ta patience incroyable ! :o

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » ven. 10 avr. 2015 20:45
Bonsoir ÂZE

Tu sais la barre de navigation et les icones télécharger prennent automatiquement la couleur par defaut donc c'est à toi de donner la couleur que tu veux.

J'ai ce lien très pratique pour les essaies ->> http://www.bootply.com/new

et un tuto pour configurer et t'inspirer ->> http://openclassrooms.com/courses/prene ... -bootstrap

Pour ton inspiration ÂZE ->> http://monbootstrap.fr/creer-un-call-to ... bootstrap/

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » ven. 10 avr. 2015 17:34
Le fait de changer lorsque la souris passe dessus, je trouve ça sympa ^^
Merci :p

Mais c'est le fond gris qui est encadré sur l'image de mon dernier post que je veux changer :p

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » jeu. 9 avr. 2015 16:28
Bonjour ÂZE :)

C'est de cela que tu veux parler ?
Code : Tout sélectionner
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Porte feuille de competences">
        <meta name="author" content="LAURENT Anthony">
        <title>Me contacter - Anthony LAURENT</title>
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="css/myCss.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
<!-->
    <body>
        <!-- Navigation -->
        <nav class="navbar navbar-default">
            <div class="container" >
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barre-de-navigation">
                        <span id="titreBlanc1" class="glyphicon glyphicon-home"></span>
                        <span id="titreBlanc2" class="glyphicon glyphicon-sort"></span>
                        <span id="titreBlanc3" class="glyphicon glyphicon-list-alt"></span>
                        <span id="titreBlanc4" class="glyphicon glyphicon-envelope"></span>
                    </button>
                
                </div>
                <div class="collapse navbar-collapse" id="barre-de-navigation">
                    <ul class="nav navbar-nav">
                            <li ><a class="navbar-brand" href="index.html" id="titreBlanc0"><p class="glyphicon glyphicon-home"> Accueil</p></a>
                        <li ><a class="glyphicon glyphicon-folder-open" href="porteFeuille.html" id="titreBlanc5"> Porte-feuilles</a></li>
                        <li ><a class="glyphicon glyphicon-list-alt" href="cv.html" id="titreBlanc6"> Curiculum Vitae</a></li>
                        <li ><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titreBlanc7"> Me contacter</a></li>
                    </ul>
                </div>
            </div>
        </nav>
Code : Tout sélectionner
/* CSS used here will be applied after bootstrap.css */


/*!
 * Start Bootstrap - Heroic Features HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 10px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.navbar {
    margin-left: 210px;
    margin-right:450px;
   background-color: yellow;
  
 }   

.navbar :hover ul > li > a {
    background-color: green;
    text-transform:uppercase;
    border-radius :0px;
   
    
}
      
.navbar navbar-nav:hover li > a {
       border-radius :50px;
   border-radius :0px;
    border: 2px solid black; 
        color:#ff00ff;   
}
    
   
#titreBlanc,#titreBlanc0,#titreBlanc1,#titreBlanc2,#titreBlanc3,#titreBlanc4,#titreBlanc5,#titreBlanc6,#titreBlanc7,#titreBlanc8 {

 font-size:22px; 
  color:blue;
}

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » mer. 8 avr. 2015 22:39
Bah quand je mets un underscore ("_") à la place d'un tréma ("-"), ça me rajoute un bouton, qui ne m'est pas utile en fait (ça me ferais faire un script en plus !)

Je ne sais pas si on est parti sur le même but ^^
Je réexplique au cas où :

Sur cette image, l'onglet actif est celui que j'ai encadré (grâce au css :p), et en fait, c'est l'intérieur de cet encadrement où je souhaite modifié en couleur. (ça me permettrait d'enlever l'encadrement justement, à moins que ce soit pas mal)

Plus on avance, et plus je me demande si c'est réellement possible en fait x)

(promis, j'irais voir tes liens ce week-end :p )

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » mer. 8 avr. 2015 18:52
Bonjour ÂZE :)

Regarde ce que j'ai modifier chez moi ^^
Code : Tout sélectionner
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Porte feuille de competences">
        <meta name="author" content="LAURENT Anthony">
        <title>Accueil - Anthony LAURENT</title>
        <!-- Bootstrap Core CSS -->
        <link href="bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="css/myCss.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
<!-->
<!-->
    <body>
        <!-- Navigation -->
        <nav class="navbar navbar-default">
            <div class="container" >
                <div class="navbar_header">
                    <button type="button" class="navbar_toggle" data-toggle="collapse" data-target="#barre-de-navigation">
                       <span id="titre" class="glyphicon glyphicon-home"></span>
                       <span id="titre1" class="glyphicon glyphicon-list-alt"></span>
                       <span id="titre0" class="glyphicon glyphicon-folder-open"></span> 
                      <span id="titre2" class="glyphicon glyphicon-envelope"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="barre-de-navigation">
                    <ul class="nav navbar-nav" id="navPage">
                        <li><a class="glyphicon glyphicon-home" href="index.html" id="titre3"> Accueil</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="porteFeuille.html" id="titre4"> Compétences</a></li>
                        <li><a class="glyphicon glyphicon-folder-open" href="memento.html" id="titre5"> Memento</a></li>
                        <li><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titre6"> Me contacter</a></li>
                    </ul>
                </div>
            </div>
        </nav>
                <div class="collapse navbar-collapse" id="barre_de_navigation">
                    <ul class="nav navbar-nav" id="navPage1">
                        <li><a class="glyphicon glyphicon-home" href="index.html" id="titre3"> Accueil</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="porteFeuille.html" id="titre4"> Compétences</a></li>
                        <li><a class="glyphicon glyphicon-folder-open" href="memento.html" id="titre5"> Memento</a></li>
                        <li><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titre6"> Me contacter</a></li>
                    </ul>
                </div>


      </body>   
   </html>     
</html>
Code : Tout sélectionner
#navPage  li {
    background-color: #00ff00;
color: white; /* couleur des puces ÂZE*/
} 


  #navPage1   li {
    background-color: #ff00aa;
	color: #ff0000; /* couleur des puces ÂZE*/
}

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » mer. 8 avr. 2015 17:32
Ah nan mais t'embête pas avec cette partie là du code, elle est présente que lorsque c'est sur téléphone...

En gros, c'est sur ça qu'il faut travailler :
Code : Tout sélectionner
<nav class="navbar navbar-default">
            <div class="container" >                
                <div class="collapse navbar-collapse" id="barre-de-navigation">
                    <ul class="nav navbar-nav" id="navPage">
                        <li><a class="glyphicon glyphicon-home" href="index.html" id="titre3"> Accueil</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="porteFeuille.html" id="titre4"> Compétences</a></li>
                        <li class="active"><a class="glyphicon glyphicon-folder-open" href="memento.html" id="titre5"> Memento</a></li>
                        <li><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titre6"> Me contacter</a></li>
                    </ul>
                </div>
            </div>
        </nav>

PS : Je n'ai pas encore vu tes liens, je les regarderais vendredi soir, j'ai pas beaucoup de temps à moi en semaine ^^'

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » mer. 8 avr. 2015 13:53
Bonjour ÂZE :)

Bien sûr que non :lol: car je n'ai pas bootstrap sur mon PC :roll:

As-tu changer la couleur de ton <button> , Ne me dis pas que ça fonctionne pas hein ? :(

Le bouton cliquable n'avais pas de titre donc chez moi il est minuscule j'ai dû ajouter à tes balises <span> le titre " Un1, Un2...."

Un autre lien ->> http://www.w3schools.com/bootstrap/default.asp

@ +

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » mer. 8 avr. 2015 13:20
Ah mais en fait, on a pas du tout la même chose...

Voici ce que j'ai : Ici !

Je ne vois pas pourquoi c'est différent si tu utilise aussi bootstrap...

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » mar. 7 avr. 2015 20:59
Bonjour ÂZE

Deux liens ÂZE

1->> http://lesscss.org/

2->> http://forum.joomla.fr/showthread.php?1 ... -bootstrap Une discussion qui pourrait te donner une inspiration bon à prendre

Voilà ce que j'ai comme affichage un navbar

Image

Voilà ce j'ai changer dans le code pour afficher le bouton cliquable

Image

Image

Image

Tu peux modifier ton bouton en fin la couleur ÂZE ^^

le code html très peu modifier sauf le tiret bas touche 8 au lieu du tiret - touche 6 .
Le .CSS je te mets rien que sur quoi j'ai modifier le reste ne correspond pas au menu de navbar.

Le .HTML
Code : Tout sélectionner
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Porte feuille de competences">
        <meta name="author" content="LAURENT Anthony">
        <title>Accueil - Anthony LAURENT</title>
        <!-- Bootstrap Core CSS -->
        <link href="bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="css/myCss.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
<!-->
<!-->
    <body>
        <!-- Navigation -->
        <nav class="navbar navbar-default">
            <div class="container" >
                <div class="navbar_header">
                    <button type="button" class="navbar_toggle" data-toggle="collapse" data-target="#barre-de-navigation">
                        <ul><li><span id="titre" class="glyphicon glyphicon-home">un</span></li>
                        <li><span id="titre1" class="glyphicon glyphicon-list-alt">un1</span></li>
                        <li><span id="titre0" class="glyphicon glyphicon-folder-open">un2</span></li>   
                        <li><span id="titre2" class="glyphicon glyphicon-envelope">un3</span></li></ul>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="barre-de-navigation">
                    <ul class="nav navbar-nav" id="navPage">
                        <li><a class="glyphicon glyphicon-home" href="index.html" id="titre3"> Accueil</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="porteFeuille.html" id="titre4"> Compétences</a></li>
                        <li class="active"><a class="glyphicon glyphicon-folder-open" href="memento.html" id="titre5"> Memento</a></li>
                        <li><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titre6"> Me contacter</a></li>
                    </ul>
                </div>
            </div>
        </nav>
<!-->
<!-->
     
      </body>   
   </html>     
</html>

Le .CSS
Code : Tout sélectionner
/*!
 * Start Bootstrap - Heroic Features HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 10px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
	background-color: #ececec;
  
}

.navbar {
    margin-left: 50px;
    margin-right: 50px;
    background-color: #000000;

   font-size :20px; 
  }

.navbar_toggle{

border : 5px solid yellow;
 background-color: #ff0000; 
 
}

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » mar. 7 avr. 2015 17:37
Je prog sous l'IDE NetBeans ^^

Pour ce qui est du lien du CSS,ne t'inquiète pas, je suis pas un débutant non plus x)

Voilà mon code exact avec les CCS qui vont avec :
HTML :
Code : Tout sélectionner
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Porte feuille de competences">
        <meta name="author" content="LAURENT Anthony">
        <title>Accueil - Anthony LAURENT</title>
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="css/myCss.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
<!-->
<!-->
    <body>
        <!-- Navigation -->
        <nav class="navbar navbar-default">
            <div class="container" >
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barre-de-navigation">
                        <span id="titre" class="glyphicon glyphicon-home"></span>
                        <span id="titre1" class="glyphicon glyphicon-list-alt"></span>
                        <span id="titre0" class="glyphicon glyphicon-folder-open"></span>   
                        <span id="titre2" class="glyphicon glyphicon-envelope"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="barre-de-navigation">
                    <ul class="nav navbar-nav" id="navPage">
                        <li><a class="glyphicon glyphicon-home" href="index.html" id="titre3"> Accueil</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="porteFeuille.html" id="titre4"> Compétences</a></li>
                        <li class="active"><a class="glyphicon glyphicon-folder-open" href="memento.html" id="titre5"> Memento</a></li>
                        <li><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titre6"> Me contacter</a></li>
                    </ul>
                </div>
            </div>
        </nav>
<!-->
<!-->
      
      </body>   
   </html>      
</html>
bootstrap.css : Ici !

bootstrap.min.css : Ici !

Si je ne dis pas de connerie, le bootstrap.min.css reprend le bootstrap.css, non ? Et ces deux fichiers, je les ai importé lorsque j'ai télécharger le thème (que j'ai bien modifié par la suite)
Toute les modifications que j'effectue sont sur myCss.css

L'arbre de mes fichier :
porteFeuille de compétence
-> css -> bootstrap.css ; bootstrap.min.css ; myCss.css
-> docs -> Les documents que je vais utilisé (image, .pdf, ...)
-> fonts -> Différents fichier glyphicons
-> include -> Rien pour l'instant
-> js -> bootstrap.js ; bootstrap.min.js ; jquery.js
-> index.html ; meContacter.html ; memento.html ; porteFeuille.html

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » lun. 6 avr. 2015 17:21
Bonjour ÂZE

Un background =>>c'est le fond neutre du fichier HTML que tu pourras modifier par la suite
- Le fond qui permet de savoir sur quelle page on est, il change pas de couleur... Si ?
Chacunes de tes pages peut avoir un fond different, faut spécifier quel page.

N'oublies pas un Fichier .CSS pour le désigne donc le lien ->>
Code : Tout sélectionner
<link href="bootstrap.min.css" rel="stylesheet">
dans toutes tes pages.

Si dans ton fichier .CSS tu modifies la couleurs ou font-size et rien ne s'affiche tu dois revérifier le chemin et le titre du .CSS dans le fichiers HTML car il ne le trouve pas.

Dans Notepad++ tu as en haut à gauche le chemin de ton fichier .html et .CSS assures toi que le Link href correspond
au chemin fais des tests le .CSS ne bougera pas tant qu'il n'aura pas le bon chemin bref dans body mets un background-color ou color ça doit fonctionner.

Autre chose si tu copie colle un code pour faire des tests et rien ne change là il faut vérifier le " # " ou " . " ça peut coincer aussi.

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » lun. 6 avr. 2015 00:15
Bon, j'ai trouvé quelque chose...
Code : Tout sélectionner
<ul class="nav navbar-nav" id="navPage">
                        <li class="active"><a class="glyphicon glyphicon-folder-open" href="porteFeuille.html" id="titre4"> Porte-feuilles</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="memento.html" id="titre5"> Memento</a></li>
                        <li><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titre6"> Me contacter</a></li>
                    </ul>
Je donne un "id" à mon <ul>, et dans le css :
Code : Tout sélectionner
#navPage li.active {
    background-color: #00ff00;
}
Bon par contre, la couleur n’apparaît que au-dessus du texte (genre une mini barre, pas tout le fond...) Du coup là je fais des tests, je vous retiens au courant ;)

J'ai trouvé la solution en fouinant les sites et en regardant leurs codes et CSS... Mais dans le css, le background est une image, et non une couleur... :/

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » dim. 5 avr. 2015 23:32
Ah ouais, j'ai juste repris ce qui était entre <script> dans un nouveau CSS, et c'est pas mal ;)

Je suis en train de tester les différentes options (couleurs, etc...), je te redis ça :p


Question :

- Dans navbar, le color : black; sert à quoi ? -> Je le change, mais ça fait rien :/
- Le fond qui permet de savoir sur quelle page on est, il change pas de couleur... Si ?

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » sam. 4 avr. 2015 18:38
Je n'ai mis que des couleur FLASH pas de modification html et même pas ton .CSS

Tu peux reprendre tes valeurs initiales et les adapter à ta convenace n'est ce pas ÂZE :siffle:

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » sam. 4 avr. 2015 18:33
Bah la ça me fait une page dégueulasse... Le nav ne ressemble pas à celui que j'ai actuellement... C'est bizarre, vu que l'html ressemble

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » sam. 4 avr. 2015 16:54
ÂZE attends, tu n'as aucune modification de changer même pas le background ?

Le titre de ton fichier .CSS doit correspondre au lien dans le head " Href="Bootstrap.min.css" que j'ai adapter a ton fichier .css et HTML car il ne le trouve pas.

regarde bien ceci ouvre toi un fichier nouveau et mets dedans
J'ai modifier ceci regarde bien et oui sinon le .CSS ne bougera pas d'un micron ÂZE :lol: "
Code : Tout sélectionner
<link href="bootstrap.min.css" rel="stylesheet">
"
Code : Tout sélectionner
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Porte feuille de competences">
        <meta name="author" content="LAURENT Anthony">
        <title>Me contacter - Anthony LAURENT</title>
        <!-- Bootstrap Core CSS -->
        <link href="bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
      
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
			<style type="text/css">
		/*!
 * Start Bootstrap - Heroic Features HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 10px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
	  background-color: lime;
}

.navbar {
    margin-left: 50px;
    margin-right: 50px;
    background-color: orange;
    color: black;
   
}

.container .jumbotron, .container-fluid .jumbotron {
    padding-left: 20px;
    padding-right: 20px;
}

header {
    background-color: yellow;
}

section {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

article {
    padding-bottom: 510px;
}

div.jumbotron {
    background-color: pink;
}

#titreBlanc,#titreBlanc0,#titreBlanc1,#titreBlanc2,#titreBlanc3,#titreBlanc4,#titreBlanc5,#titreBlanc6,#titreBlanc7,#titreBlanc8 {
    color:maroon; 
	font-size:29px;
	
}

#section0 {
    background-color: pink;
}

#section1,#section2,#section3,#section4,#section5 {
    background-color: fushia;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 50px;
}

tt {
    padding-top: 20px;
    padding-bottom: 20px;
}

.hero-spacer {
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.hero-feature {
    margin-bottom: 20px;
}


		
			</style>
    </head>
<!-->
    <body>
        <!-- Navigation -->
        <nav class="navbar navbar-default">
            <div class="container" >
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barre-de-navigation">
                        <span id="titreBlanc1" class="glyphicon glyphicon-home"></span>
                        <span id="titreBlanc2" class="glyphicon glyphicon-sort"></span>
                        <span id="titreBlanc3" class="glyphicon glyphicon-list-alt"></span>
                        <span id="titreBlanc4" class="glyphicon glyphicon-envelope"></span>
                    </button>
                    <a class="navbar-brand" href="index.html" id="titreBlanc0"><p class="glyphicon glyphicon-home"> Accueil</p></a>
                </div>
                <div class="collapse navbar-collapse" id="barre-de-navigation">
                    <ul class="nav navbar-nav">
                        <li><a class="glyphicon glyphicon-folder-open" href="porteFeuille.html" id="titreBlanc5"> Porte-feuilles</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="cv.html" id="titreBlanc6"> Curiculum Vitae</a></li>
                        <li class="active"><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titreBlanc7"> Me contacter</a></li>
                    </ul>
                </div>
            </div>
        </nav>
<!-->
        <!-- Page Content -->
        <div class="container">
		
	   </body>	
   </html>

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » sam. 4 avr. 2015 16:38
J'ai beau essayer de rajouter des "class" ou "id" ou "name", ça ne fait rien via le CSS...
J'ai essayé dans certains endroits les success (couleur verte), mais idem...

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » sam. 4 avr. 2015 16:16
Le HTML rien n'a était modifier et ce .CSS de la couleur
Là, j'ai changé que de la couleur ÂZE hein essais et dis moi tu peux changer ce que tu veux donc cible ta class.
Code : Tout sélectionner
/*!
 * Start Bootstrap - Heroic Features HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 10px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
	  background-color: lime;
}

.navbar {
    margin-left: 50px;
    margin-right: 50px;
    background-color: orange;
    color: black;
   
}

.container .jumbotron, .container-fluid .jumbotron {
    padding-left: 20px;
    padding-right: 20px;
}

header {
    background-color: yellow;
}

section {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

article {
    padding-bottom: 510px;
}

div.jumbotron {
    background-color: pink;
}

#titreBlanc,#titreBlanc0,#titreBlanc1,#titreBlanc2,#titreBlanc3,#titreBlanc4,#titreBlanc5,#titreBlanc6,#titreBlanc7,#titreBlanc8 {
    color:maroon; 
	font-size:29px;
	
}

#section0 {
    background-color: pink;
}

#section1,#section2,#section3,#section4,#section5 {
    background-color: fushia;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 50px;
}

tt {
    padding-top: 20px;
    padding-bottom: 20px;
}

.hero-spacer {
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.hero-feature {
    margin-bottom: 20px;
}

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » sam. 4 avr. 2015 15:28
Si je ne m'abuse, tu n'as rien changé (à part un ajout de commentaires dans le CSS, mais j'ai beau changé "color", rien ne change...)
Dans le HTML aussi tu n'as rien modifié... Si ? (parce que je n'ai rien trouvé...)

Merci pour les liens, je vais allé voir ça ;)

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » sam. 4 avr. 2015 13:18
Bonjour ÂZE

Bootstrap est déjà d'emblé configurer mais dans le .css tu repère ta class et tu modifie ce que tu veux ^^(Je vais l'installer plus tard merci beaucoup ÄZE)

Tu sais je vais te donner une video tu vas addooorer jamais inspirer et toujours aussi rapide ->> http://www.grafikart.fr/tutoriels/html- ... witter-182

ici c'est les color ^^ ->> http://www.color-hex.com/

Ton fichier css il faut faire des essaies direct dedand hein pour voir le changement
Code : Tout sélectionner
/*!
 * Start Bootstrap - Heroic Features HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 10px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.navbar {
    margin-left: 50px;
    margin-right: 50px;
    background-color: #ff8888; /*le fond orange du bandeau de navigation*/
    color: #b672b8 ; /*les puces*/
   
}
avec ton html ^^ trouve ce que j'ai modifier ^^. arf, pas grand chose :lol:
Code : Tout sélectionner
<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <link href="bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
        <nav class="navbar navbar-default">
            <div class="container" >
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barre-de-navigation">
                        <span id="titreBlanc1" class="glyphicon glyphicon-home"></span>
                        <span id="titreBlanc2" class="glyphicon glyphicon-sort"></span>
                        <span id="titreBlanc3" class="glyphicon glyphicon-list-alt"></span>
                        <span id="titreBlanc4" class="glyphicon glyphicon-envelope"></span>
                    </button>
                    <a class="navbar-brand" href="index.html" id="titreBlanc0"><p class="glyphicon glyphicon-home"> Accueil</p></a>
                </div>
                <div class="collapse navbar-collapse" id="barre-de-navigation">
                    <ul class="nav navbar-nav">
                        <li><a class="glyphicon glyphicon-folder-open" href="porteFeuille.html" id="titreBlanc5"> Porte-feuilles</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="cv.html" id="titreBlanc6"> Curiculum Vitae</a></li>
                        <li class="active"><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titreBlanc7"> Me contacter</a></li>
                    </ul>
                </div>
            </div>
        </nav>
  </body>
</html>

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » sam. 4 avr. 2015 10:40
Ah, "donne ton boottrap" pour moi cétait le css du template x)
Code : Tout sélectionner
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Porte feuille de competences">
        <meta name="author" content="LAURENT Anthony">
        <title>Me contacter - Anthony LAURENT</title>
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="css/myCss.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
<!-->
    <body>
        <!-- Navigation -->
        <nav class="navbar navbar-default">
            <div class="container" >
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barre-de-navigation">
                        <span id="titreBlanc1" class="glyphicon glyphicon-home"></span>
                        <span id="titreBlanc2" class="glyphicon glyphicon-sort"></span>
                        <span id="titreBlanc3" class="glyphicon glyphicon-list-alt"></span>
                        <span id="titreBlanc4" class="glyphicon glyphicon-envelope"></span>
                    </button>
                    <a class="navbar-brand" href="index.html" id="titreBlanc0"><p class="glyphicon glyphicon-home"> Accueil</p></a>
                </div>
                <div class="collapse navbar-collapse" id="barre-de-navigation">
                    <ul class="nav navbar-nav">
                        <li><a class="glyphicon glyphicon-folder-open" href="porteFeuille.html" id="titreBlanc5"> Porte-feuilles</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="cv.html" id="titreBlanc6"> Curiculum Vitae</a></li>
                        <li class="active"><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titreBlanc7"> Me contacter</a></li>
                    </ul>
                </div>
            </div>
        </nav>
<!-->
        <!-- Page Content -->
        <div class="container">
Après c'est pas utile... Si ?

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » ven. 3 avr. 2015 22:29
Mais ÂZE, m'en fiche ton html s'il te plait :D

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » ven. 3 avr. 2015 21:31
Oui, mais le myCSScss prend le dessus normalement

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » ven. 3 avr. 2015 21:26
S'il te plait, tu sais très bien que ça fonctionne en duo là, Le HTML ??? Merci ÂZE

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » ven. 3 avr. 2015 21:20
Bah c'est un template que j'ai DL. Je l'avais un peu modifié, mais voici ce que ça donne :

myCSS.cs :
Code : Tout sélectionner
/*!
 * Start Bootstrap - Heroic Features HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 10px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.navbar {
    margin-left: 50px;
    margin-right: 50px;
    background-color: #0000ff;
    color: #ffffff;
    
}

.container .jumbotron, .container-fluid .jumbotron {
    padding-left: 20px;
    padding-right: 20px;
}

header {
    background-color: #0000ff;
}

section {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

article {
    padding-bottom: 10px;
}

div.jumbotron {
    background-color: #0000ff;
}

#titreBlanc,#titreBlanc0,#titreBlanc1,#titreBlanc2,#titreBlanc3,#titreBlanc4,#titreBlanc5,#titreBlanc6,#titreBlanc7,#titreBlanc8 {
    color: #ffffff;
}

#section0 {
    background-color: #ffff00;
}

#section1,#section2,#section3,#section4,#section5 {
    background-color: #ffff00;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 50px;
}

tt {
    padding-top: 20px;
    padding-bottom: 20px;
}

.hero-spacer {
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.hero-feature {
    margin-bottom: 2px;
}

footer {
    margin: 25px 0;
}


#lbNom,#lbPrenom,#lbMail,#lbTxtEmail {
    margin-left: 10%;
}

#ztNom,#ztPrenom,#ztMail,#ztTxtEmail {
    margin-left: 2%;
}

#lbNom,#ztNom {
    display: inline-block;    
}

#lbPrenom,#ztPrenom {
    display: inline-block;
}

#ztMail,#ztTxtEmail {
    display: inline-block;
}

#lbTxtEmail {
    margin-left: 30%;
}

#ztTxtEmail {
    margin-left: 30%;
}

#btFB,#btTw {
    display: inline-block;
    margin-left: 10%;
}
bootstrap.css :
ABBC3_SPOILER_SHOW

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » ven. 3 avr. 2015 21:11
Mais ÂZE, tu veux rire là :lol: hein ??

Alors ton fichier externe de Boostrap Donne que je regarde :suspect:

Re: HTML/CSS : changer couleur bouton actif <nav>

par Âze » ven. 3 avr. 2015 20:25
Ouais, mais je vois pas trop comment en fait ^^'

Re: HTML/CSS : changer couleur bouton actif <nav>

par KeRR_@ » ven. 3 avr. 2015 19:59
Bonsoir ÂZE

Comme tu as codé avec Boostrap tu peux changer la couleur directement dans ton CSS :roll:

HTML/CSS : changer couleur bouton actif <nav>

par Âze » mar. 31 mars 2015 14:19
Bonjour à tous !

Je fais un site qui me servira après mes études, et je souhaite changer les couleurs du bouton actif et du texte dans ce bouton, si possible sans php et modification du code HTML déjà créer.

Voici mon code HTML :
Code : Tout sélectionner
<nav class="navbar navbar-default">
            <div class="container" >
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barre-de-navigation">
                        <span id="titreBlanc1" class="glyphicon glyphicon-home"></span>
                        <span id="titreBlanc2" class="glyphicon glyphicon-sort"></span>
                        <span id="titreBlanc3" class="glyphicon glyphicon-list-alt"></span>
                        <span id="titreBlanc4" class="glyphicon glyphicon-envelope"></span>
                    </button>
                    <a class="navbar-brand" href="index.html" id="titreBlanc0"><p class="glyphicon glyphicon-home"> Accueil</p></a>
                </div>
                <div class="collapse navbar-collapse" id="barre-de-navigation">
                    <ul class="nav navbar-nav">
                        <li class="active"><a class="glyphicon glyphicon-folder-open" href="porteFeuille.html" id="titreBlanc5"> Porte-feuilles</a></li>
                        <li><a class="glyphicon glyphicon-list-alt" href="cv.html" id="titreBlanc6"> Curiculum Vitae</a></li>
                        <li><a class="glyphicon glyphicon-envelope" href="meContacter.html" id="titreBlanc7"> Me contacter</a></li>
                    </ul>
                </div>
            </div>
        </nav>
Voilà, si vous ne comprenez pas exactement ce que je souhaite faire, n'hésitez pas ;)
Game

J’ai toujours aimé essayer de nouveau[…]

FLTL_READ_MORE
Game

Ce site m’a impressionné par la quali[…]

FLTL_READ_MORE
Problème d'allumage

Bonjour à tous J'ai un souci avec mon pc de[…]

FLTL_READ_MORE
Game

Je cherchais un site de jeux en ligne qui combine […]

FLTL_READ_MORE
FLTL_VIEW_MORE_TOPICS