Initializr et son menu

Bonjour,

J'ai quelques notions de CSS (ou du moins j'ai des reste de programmation).
J'essaye de passer en CSS pour crée mon nouveau site intenet. J'ai donc essayé initializr et le mode responsive. (http://www.initializr.com/try)

Je me retrouve avec deux difficulté, la première est le nombre d'item dans le menu, je ne peux pas augmenter le nombre, si je le fait mon header passe sur deux ligne (ou plus en fonction du besoin).

Ma seconde difficulté concerne aussi le menu, je voudrai que lorsque je passe au dessu du menu, l'onglet change de couleur, actuellement il y a juste un surlignage.

Merci de votre aide.

Hervé

Bonjour et Bienvenue,

C'est toujours assez difficile de trouver une solution sans code...

Oui en effet

Comme je n'ai pas encore modifier l'architecture d'orginie je ne voulais pas surgarger le poste.

C'est vraiment le code source de la page http://www.initializr.com/try
Voila le code CSS:

/* ==========================================================================
HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
========================================================================== */

html,
button,
input,
select,
textarea {
color: #222;
}

body {
font-size: 1em;
line-height: 1.4;
background: #B1FF00;
}

::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}

::selection {
background: #b3d4fc;
text-shadow: none;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

img {
vertical-align: middle;
}

fieldset {
border: 0;
margin: 0;
padding: 0;
}

textarea {
resize: vertical;
}

.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
========================================================================== */

body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

.wrapper {
width: 90%;
margin: 0 5%;
}

/* ===================
ALL: Orange Theme
=================== */

.header-container {
border-bottom: 20px solid #77008E;
}

.footer-container,
.main aside {
border-top: 20px solid #77008E;
}

.header-container,
.footer-container,
.main aside {
background: #BB18DB;
}

.title {
color: white;
}

/* ==============
MOBILE: Menu
============== */

nav ul {
margin: 0;
padding: 0;
}

nav a {
display: block;
margin-bottom: 10px;
padding: 15px 0;

text-align: center;
text-decoration: none;
font-weight: bold;

color: white;
background: #77008E;
}

nav a:hover,
nav a:visited {
color: white;
}

nav a:hover {
text-decoration: underline;
}

/* ==============
MOBILE: Main
============== */

.main {
padding: 30px 0;
}

.main article h1 {
font-size: 2em;
}

.main aside {
color: white;
padding: 0px 5% 10px;
}

.footer-container footer {
color: white;
padding: 20px 0;
}

/* ===============
ALL: IE Fixes
=============== */

.ie7 .title {
padding-top: 20px;
}

/* ==========================================================================
Author's custom styles
========================================================================== */








[je n'ai pas la mis la partie media Queries]

Merci en pour regarder et le bienvenue
Modifié par _Herve_ (13 Apr 2013 - 20:03)

Pour le changement de couleur:

nav a:hover {
   background-color:red; /*couleur à choisir*/
}

/*supprimer color:white;*/

Pour l'item supplémentaire du menu il faut jouer avec les width de NAV et de NAV a, en faisant comme ça par exemple:

nav {
  width:60%;
}
nav a{
  width:17%;
}

Merci pour ton aide.

Pour le changement de couleur, cela fonctionne lorsque je met le nom d'une couleur, mais pas quand je l'ecrit et hex (cela fonctionne en GreenYellow mais pas en #ADFF2F).

Pour les width, j'ai du rater un coche, cela ne change absolument rien, même si je me des paramètres auto, px ou %.

Dans le fichier main.css:

nav a:hover,
nav a:visited {
color: white; /*à enlever*/
background-color:#ADFF2F; /*à ajouter*/
}
nav a:hover {
text-decoration: underline;  /*à enlever*/
} 

Pour votre menu lorsque vous ajoutez, à votre code Html

<li><a href="#">nav ul li a</a></li>

Vous modifiez votre code Css (main.css) de la manière suivante:

nav {
float: right;
width: 38%; /* changer en 60%*/
}
nav a {
    float: left;
    margin-bottom: 0;
    margin-right: 1.7%;
    margin-top: 0;
    padding-bottom: 25px;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 25px;
    width: 27%; /* changer en 17%*/
}

Modifié par rodolpheb (14 Apr 2013 - 08:51)

Merci, pour l'aide, je teste sa et je et résolu.

**edit**

Pour la couleur cela fonctionne, merci.
Malheureusement, pour mon menu, toujours pas, au dela de 3 onglet, ils s'empillent le sun sur les autres sur 2 colonnes.
Modifié par _Herve_ (16 Apr 2013 - 01:17)