Bandeau avec un <div>

Bonjour,
J'ai fait un bandeau en haut de la page, avec les liens: "accueil - contact - auteur - espagne".

<div class="bandeau">
	<a class="boutonaccueil" href="index.html">Accueil</a> 
	<a class="boutoncontact" href="contact.html">Contact</a>
	<a class="boutonauteur" href="auteur.html">L'auteur</a>
	<a class="drapeauespagne" href="indice.html"><img src="drapeau_es.png" alt="" ></a>
</div>

Lorsque je mets ce Code Css, le bandeau s'affiche bien en gris:

.bandeau{background-color: grey;}
.boutonaccueil{position: fixed; top: 1%; left: 23%;}
.boutoncontact{position: fixed; top: 1%; left: 47%;}
.boutonauteur{position: fixed; top: 1%; left: 70%;}/*
.drapeauespagne{position: fixed; top: 1%; right: 2%;}

Mais si j'enlève le /* , alors le bandeau en couleur ne s'affiche plus, je ne comprends pas du tout pourquoi!

Voila, merci pour vos explications!
Modifié par abeille (26 Apr 2016 - 11:19)

Bonjour Abeille,

Es-tu sûr que ton image se trouve bien à cette url car à priori rien ne devrait empêcher le fond de s'afficher.

En fait c'est même pas à priori mais certainement !

Mais pourquoi ne pas utiliser une liste enclavée dans un NAV ? Ça paraîtrait logique.
Modifié par Greg_Lumiere (26 Apr 2016 - 11:31)

Je ne comprend spas non plus pourquoi placer les liens en fixe et non le conteneur ; cela réduirait ton code.

Voici comme je fais :

<nav role="navigation" id="primary-nav">
<ul>
<li><a href="#">lien a</a></li>
<li><a href="#">lien b</a></li>
</ul>
</nav>

#primary-nav, #primary-nav ul {
 margin: 0;
 padding: 0;
 position: fixed;
 top: 1%;/* ne vaut-il pas mieux appliquer un Top:0 et un padding interne ? */
 left:0;
 right:0;
 background: grey;
}
#primary-nav li:first-of-type {
 left: 23%;
}
#primary-nav li:nth-of-type(2) {
 left: 47%;
}

etc

Bien sûr il ne s'agit là que d'une trame mais tu vois l'idée ?
Modifié par Greg_Lumiere (26 Apr 2016 - 11:38)

abeille a écrit :
Bonjour,
Mais si j'enlève le /* , alors le bandeau en couleur ne s'affiche plus, je ne comprends pas du tout pourquoi!

C'est normal, tu positionnes tous tes éléments enfants en position: fixed; donc tu sors du flux tous les éléments qui sont dans '.bandeau' donc c'est comme si ce bloc devenait vide.
Tu peux lire cet article de Raphaël sur le positionnement pour que tu comprennes comment fonctionne cette notion fondamentale de flux en CSS. Mais lis-le vraiment, avec attention, il faut que tu comprennes ce qui est écrit...

Sinon, suis les conseils de Greg_Lumiere, ta méthode de conception de ton menu est complètement pourrie, ça ne fonctionnera pas longtemps et surtout ça n'est pas du tout flexible.
Cependant le positionnement absolute sur tes <li> n'est pas terrible, il vaudrait mieux leur donner une taille en % et les afficher en inline-block ou en float: left, ou encore faire un peu de flexbox...
Il y a plein de tutos t'expliquant comment faire un menu horizontal, pas exemple celui-ci.
Modifié par MatthieuR (26 Apr 2016 - 12:06)

Bonjour,

+1 pour l'utilisation de l'élément nav si c'est la navigation du site (sinon s'il y a déjà un nav et que ça c'est secondaire alors une liste UL)
Et pour que tout le bandeau soit fixed.

abeille a écrit :

Mais si j'enlève le /* , alors le bandeau en couleur ne s'affiche plus, je ne comprends pas du tout pourquoi!

Dans ces cas-là, que dit le validateur CSS ? http://jigsaw.w3.org/css-validator/
Il m'est arrivé d'oublier de fermer une parenthèse à un

.selecteur {
    background-image: url(chemin/nom.jpg;
}

ce qui a TOUT désactivé sur 50 ou 200 lignes jusqu'à la parenthèse fermante suivante (!) et j'ai mis un certain temps à comprendre d'où ça venait... (du temps où on avait des images de fond à découper et des CSS monolithes de 3000 lignes ) Le validateur m'aurait économisé pas mal de temps !
Modifié par Felipe (26 Apr 2016 - 12:00)

MatthieuR a écrit :
Cependant le positionnement absolute sur tes &lt;li&gt; n'est pas terrible, il vaudrait mieux leur donner une taille en % et les afficher en inline-block ou en float: left, ou encore faire un peu de flexbox...

là pour le coup; c'est toi qui ne lit pas avec attention. (normal avec tous les sujets que tu corriges). les *li* sont une idée de Greg.
Moi j'aime pas trop, mais bon je vais apprendre.
Et tu me dis que je dois aussi apprendre flexbox maintenant!
J'ai la tête qui va exploser là! Sérieux.

Merci pour les liens.
Modifié par abeille (26 Apr 2016 - 13:27)

Notre petite abeille fume du crâne ! (t'inquiète ça m'arrive 3 fois par jour )

Display: flexbox ou inline-block ?

L'une et l'autre méthode ne sont pas fausses et paraissent adaptées à cette situation.

Un mot sur flexbox : pas si compliqué qu'il n'y paraît. Essayer c'est l'adopter !
Le mieux est d'inclure dans ta recherche le mot clé "goetter" ; Raphaël G. maitrise ce pendant de css (je suis même tenté d'écrire Maîtrise au lieu de maîtrise).

Un mot sur le inline-block : attention aux espaces indésirables (il y a un tuto sur Alsas à ce propos écris par M. Goetter d'ailleurs).

Mais là ou nous sommes tous d'accord, oublie la position absolue, pour ce cas tout du moins.

Tu y es presque !

Maintenant c'est de ton conteneur dont tu dois fixer la position :

.mon_conteneur_de_lien {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
}

PS : si tu n'es pas à l'aise pour l'instant, tu verras les flexbox plus tard. Tu verras ce sera simple de remplacer ton code vu que la mécanique reste la même :
- on conditionne le conteneur
- on définie la relation des enfants au sein de ce conteneur et vis-à-vis de celui-ci
- on conditionne les enfants

abeille a écrit :
Greg me dit que les flex sont simples, toi tu me déconseilles!
Pas si simple tout ça.

J'ai utilisé

li{
  display: block;
  float: left;
}

, comme tu m'as conseillé, mais cela donne un menu horizontal qui n'est pas fixe. Or je voudrais que ce menu reste toujours en haut de la page!
(aïe, qu'est ce que j'ai dit encore comme bêtise?)

Pour que ton menu soit fixe en haut de ta page, tu dois lui passer les attributs CSS suivants :
position : Fixed
Left : 0
Top : 0
Right : 0
Attention, ta DIV ou ta NAV sera alors vraiment fixe en haut et ne bougera plus, même en faisant défiler la page.
Penses à décaler ta MAIN en dessous du menu...

abeille a écrit :
Greg me dit que les flex sont simples, toi tu me déconseilles!

Je ne te le déconseille pas mais tu pourras voir ça plus tard.

abeille a écrit :
(aïe, qu'est ce que j'ai dit encore comme bêtise?)

Aucune , il faut juste que tu fasses comme te l'indique Greg, appliquer un position: fixed; au conteneur de ta liste (soit à ton <ul> soit à ta <nav>).
Voilà un exemple : http://codepen.io/korell/pen/pyOdqg/?editors=1100

Merci Raphaël pour cette précision et je suis assez d'accord avec toi quand tu utilises la balise <nav>.
Là où je trouve que la liste se justifie (encore aujourd'hui) dans une navigation est qu'il s'agit souvent d'une collection d'éléments qui ont un niveau sémantique similaire et que ces éléments cohabitent tout le temps ensemble.
Par exemple, si on désactive tout le style appliqué (cas purement théorique), je trouve ça plus ergonomique d'avoir une apparence de liste qu'une ligne de texte enchaînant des liens : http://codepen.io/korell/pen/qZMvQV?editors=1000

<h2>Exemple sans liste</h2>
<nav role="navigation">
  <a href="elem1">Element 1</a>
  <a href="elem2">Element 2</a>
  <a href="elem3">Element 3</a>
  <a href="elem4">Element 4</a>
</nav>

<h2>Exemple avec liste</h2>
<nav role="navigation">
  <ul>
    <li><a href="elem1">Element 1</a></li>
    <li><a href="elem2">Element 2</a></li>
    <li><a href="elem3">Element 3</a></li>
    <li><a href="elem4">Element 4</a></li>
  </ul>
</nav>

MatthieuR a écrit :

Par exemple, si on désactive tout le style appliqué (cas purement théorique), je trouve ça plus ergonomique d'avoir une apparence de liste qu'une ligne de texte enchaînant des liens

(dans rien ne t'empêche d'inclure tes liens dans des <div> non plus )