Discussion :

[marik9206]

Bonjour à toutes et à tous,
Je dois développer sous html5 et css3 le bandeau bleu du document joint.
Ce document contient 3 éléments de texte qui coivent être à gauche, centrer et à droite
Pouvez-vous m'indiquer comment l'écrire en html ?
- est-ce que je dois utiliser un tableau (table)
- est-ce que je dois utiliser des span ?
et que dois-je déclarer en css3
Je bloque complètement

[NoSmoking]

Bonjour,
tu aurais eu meilleur compte d'insérer une image plutôt qu'un PDF mais bon ...

- est-ce que je dois utiliser un tableau (table)
- est-ce que je dois utiliser des span ?

non dans les deux cas, il faut penser simple au premier abord.

et que dois-je déclarer en css3

au minimum d'après ce que l'on voit, les couleurs et les centrages !

Je bloque complètement

Il ne faut pas que cela soit une fatalité, le code que tu as réalisé aurait également été un plus

Une piste de structure, si bien sûr il s'agit d'un bandeau menu :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<nav class="bandeau">
  <a href="#">Adresse</a>
  <a href="#">Mail</a>
  <a href="#">Téléphone</a>
</nav>

[marik9206]

Merci Nosmoking
Mais ta solution correspond à une barre de navigation alors que moi j'ai besoin au milieu de ma page d'accueil d'avoir un bandeau bleu avec 3 textes : un à gauche, un au milieu et un à droite

je te mets l'exemple en .jpg
Merci d'avance

[NoSmoking]

Mais ta solution correspond à une barre de navigation ...

oui j'avais prévenu

Autre exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="bandeau">
  <ul>
    <li>Adresse</li>
    <li>Mail</li>
    <li>Téléphone</li>
  </ul>
</div>

avec comme CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.bandeau {
  display: grid;
  min-height: 100vh;
  place-items: center; /* ou margin: auto sur enfant */
}
.bandeau ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  border: 4px solid #069;
  text-align: center;
  line-height: 5em;
  list-style: none;
  color: #FFF;
  background-color: #47C;
}
.bandeau li {
  min-width: 20em;
}

Maintenant il y a d'autres solutions possibles à toi de voir et d'adapter

[marik9206]

Merci Nosmoking !
c'est parfait ! je vais l'adapter un petit peu

[laurentSc]

Bonjour,
je me disais aussi que les flexbox étaient une bonne solution et jreaux62 en avaient fait plusieurs : https://codepen.io/jreaux62/pen/POGdjj ou https://codepen.io/jreaux62/pen/bYwxYL. Pour les trouver toutes : google et codepen jreaux62 mise en page flex.