Developpement sous Html5 et Css3

Version imprimable

01/09/2023, 18h30
marik9206

1 pièce(s) jointe(s)

Developpement sous Html5 et Css3

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
02/09/2023, 12h19
NoSmoking
Bonjour,
tu aurais eu meilleur compte d'insérer une image plutôt qu'un PDF mais bon ...

Citation:

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

Citation:

et que dois-je déclarer en css3

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

Citation:

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:

1 2 3 4 5 <nav class="bandeau"> <a href="#">Adresse</a> <a href="#">Mail</a> <a href="#">Téléphone</a> </nav>
02/09/2023, 12h39
marik9206

1 pièce(s) jointe(s)

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

Citation:

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

oui j'avais prévenu :mrgreen:

Autre exemple :

Code:

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:

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

04/09/2023, 17h03
marik9206

Merci Nosmoking !
c'est parfait ! je vais l'adapter un petit peu
12/09/2023, 08h49
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.