Bannière qui ne m'obéit pas

Signaler
Messages postés
4
Date d'inscription
mardi 6 juillet 2021
Statut
Membre
Dernière intervention
11 juillet 2021
-
 R0box -
Bonjour,



Voici ma bannière, mais elle ne veut pas se mettre en largeur automatique quand l'écran devienbt olus petit ou plus grand (ça d&épend des pouces des pcs utilisés). Je viens de suivre au moins une petite dizaines de tutos essayant de m'expliquer comment faire, mais à chaque fois que je change iune seule chose de mes codes css, la bannière disparait tout simplement, alors, je suis obligée pour le moment de laisser tel qu'elle.

Mon html :
<a href="index.php"><div id="haut-menu"></div></a>

Mon css :

#haut-menu {
background-image: url("image/design/banniereinitiale.jpg");
background-size: 100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
height: 140px; }

Et quand j'essaie de mettre :
soit : background-size: 100% auto; ou background-size: 100%; auto;
soit : height: auto ;
La bannière disparait tout simplement... Pourquoi ?

Merci pour votre retour

1 réponse

Salut,
il y a de multiples problèmes ici:
Votre DIV est vide: il n'indique aucun contenu.

Vous n'indiquez nulle part de dimensions pour celui ci.

Vous utilisez un texte(qui plus est texte de titre) en utilisant une image. Cela n'est pas bon: un texte (surtout un titre) doit être indiqué en texte.
Rien ne vous empêche d'adjoindre(au texte) des images mais "vie professionnelle " et "tout savoir sur le monde du travail" doit être écrit en tant que texte...puisque ce sont des textes(qui plus est de titre et comportant le nom du site. Il me semble que ce sont des informations importantes à fournir aussi bien à votre visiteur que pour référencer votre site).

"Voici ma bannière, mais elle ne veut pas se mettre en largeur automatique"
Nulle part vous n'indiquez de largeur pour votre bannière, le CSS que vous utilisez utilise "background-size" qui indique la taille de l'image d'arrière plan et non la taille du bloc de DIV(pour quoi un div alors qu'il s'agit visiblement d'un titre et qu'un DIV n'indique rien sur la nature/chapitrage du contenu).

"Et quand j'essaie de mettre :
soit : background-size: 100% auto;"
Il s'agit d'une propriété qui a 4 manière d'écriture possible

https://www.w3schools.com/csSref/css3_pr_background-size.asp

La valeur auto signifie automatique, le contenu du DIV étant inexistant l'arrière plan va s'adapter à une dimension nulle( un élément sans contenu ni dimension ne prends aucune place).

Solutions:
Révisez HTML en version 5 pour écrire correctement du HTML(donc pas de DIV à moins que cela soit cohérent parce qu'il n'y a pas d'autres balise possible, ici un simple H1 serait cohérent), n'utilisez pas un bloc vide de contenu(une image de fond n'est pas un contenu mais un élément décoratif et donc indiqué et repéré en tant que tel, ou plutôt pas référencé ni indiqué au navigateur en tant que contenu ayant du sens/sémantique).
  • écrivez les textes en textes et les titres en titres, donc pas d'image pour remplacer un texte. Et les images en images que ce soit en image de fond(background) ou simplement en image(balise img) si cela pet-être utile pour faire un lien.
  • Pour indiquer la largeur d'un élément en CSS c'est la propriété "width" qu'il faut utiliser. Attention à supprimer les marges si vous voulez que l'élément prenne toute la largeur.
  • Pour width et height utilisez des valeurs relatives/proportionnelles et non fixes (qui ne pourront pas s'adapter)

height: 140px;/* fixe (valeur en pixel) à ne pas utiliser pour permettre une page web adaptative*/
height: 7%;/* valeur relative , sur n'importe quel écran 7% fait toujours 7% de l'écran (plus ou moins les marges internes et externes)*/