Bandeau avec un <div>

Question

abeille

26 Apr 2016 à 11:19

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)

~~supprimé~~

26 Apr 2016 à 11:29

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)

~~supprimé~~

26 Apr 2016 à 11:38

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)

MatthieuR

26 Apr 2016 à 11:53

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)

Felipe

Administrateur

26 Apr 2016 à 11:58

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 Smiley vieux

où on avait des images de fond à découper et des CSS monolithes de 3000 lignes Smiley langue

) Le validateur m'aurait économisé pas mal de temps !
Modifié par Felipe (26 Apr 2016 - 12:00)

abeille

26 Apr 2016 à 13:27

MatthieuR a écrit :
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...

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)

~~supprimé~~

26 Apr 2016 à 14:07

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

)

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.

MatthieuR

26 Apr 2016 à 14:24

abeille a écrit :
les *li* sont une idée de Greg.
Moi j'aime pas trop, mais bon je vais apprendre.

Oui, j'ai bien vu que c'est Greg qui avait suggéré d'utiliser des <li>, et c'est LA bonne manière, ton menu doit être une liste : ce sont des éléments d'une série. Cependant Greg continuait dans ton sens avec un positionnement en absolute (left: 23%; left: 47%; ...) et là je pense que c'est une mauvaise idée.

abeille a écrit :
Et tu me dis que je dois aussi apprendre flexbox maintenant!
J'ai la tête qui va exploser là! Sérieux.

Ne te lance pas dans flexbox maintenant si tu veux, bien que ça soit très simple pour faire un menu horizontal. Utilise plutôt soit ça :

li{
  display: block;
  float: left;
}

soit

li{
  display: inline-block;
}

Sur l'utilisation de l'inline-block, suis l'avertissement de Greg sur les espaces indésirables, ça reste un bloc avec un comportement d'un inline.

abeille

26 Apr 2016 à 14:36

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?)

~~supprimé~~

26 Apr 2016 à 14:44

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

sepecat

26 Apr 2016 à 14:58

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

MatthieuR

26 Apr 2016 à 15:35

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

Raphael

Administrateur

27 Apr 2016 à 09:16

Hello,

MatthieuR a écrit :

Oui, j'ai bien vu que c'est Greg qui avait suggéré d'utiliser des <li>, et c'est LA bonne manière, ton menu doit être une liste : ce sont des éléments d'une série.

À vrai dire... pas forcément, non.
C'était LA bonne manière avant, quand il n'y avait pas d'élément "sémantique" pour désigner une navigation, mais dire qu'une navigation est une liste a toujours été un (bon) détournement par dépit.

Aujourd'hui, il existe <nav> pour apporter ce sens et cette fonction. Ce n'est pas une mauvaise idée d'y ajouter une liste, mais c'est loin d'être une nécessité non plus Smiley cligne

Bonne journée !

MatthieuR

27 Apr 2016 à 09:35

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>

Raphael

Administrateur

27 Apr 2016 à 10:13

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 Smiley cligne

)

MatthieuR

27 Apr 2016 à 10:26

Raphael a écrit :

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

Exact

Sujet clos

CSS et mise en forme, CSS3

Bandeau avec un <div>