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

[Âze]

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

[KeRR_@]

Bonsoir ÂZE

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

[Âze]

Ouais, mais je vois pas trop comment en fait ^^'

[KeRR_@]

Mais ÂZE, tu veux rire là hein ??

Alors ton fichier externe de Boostrap Donne que je regarde

[Âze]

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

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%;
}

[KeRR_@]

S'il te plait, tu sais très bien que ça fonctionne en duo là, Le HTML ??? Merci ÂZE

[Âze]

Oui, mais le myCSScss prend le dessus normalement

[KeRR_@]

Mais ÂZE, m'en fiche ton html s'il te plait

[Âze]

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 ?

[KeRR_@]

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

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>

[Âze]

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

[KeRR_@]

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;
}

[Âze]

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...

[KeRR_@]

Â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 "

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>		

[Âze]

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

[KeRR_@]

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

[Âze]

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 ?

[Âze]

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... :/

[KeRR_@]

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.

[Âze]

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

[KeRR_@]

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



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







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; 
 
}

[Âze]

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...

[KeRR_@]

Bonjour ÂZE

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

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

@ +

[Âze]

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 ^^'

[KeRR_@]

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*/
} 
  

[Âze]

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 )

[KeRR_@]

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;
} 

[Âze]

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

[KeRR_@]

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/

[Âze]

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 !