Bonjour,

Je voudrais faire un header avec une couleur en background. Par dessus, il y aurais une image (logo) opacité 5% qui serait centré verticalement et horizontalement à l'intérieur de ce header. Par dessus cette image, un texte composé d'un H1 et d'un P.

Je voudrais évidement que le tout soit responsive. L'idée c'est que le header remplisse la totalité de la largeur et de la hauteur d'un viewport.

Quelle est la meilleure façon de faire ? J'ai essayé des choses mais sans réel succès et exporté un png du header sur photoshop n'est peut être pas très opti niveau référencement...

J'utilise bootstrap.

Merci.

Bonjour,

Quand tu dis "j'ai essayé des choses", peux-tu nous mettre un exemple de code stp ?

Bonjour, pour l'instant l'onglet pour ajouter du code ne marche pas chez moi donc je vais le copier comme un texte normal désolé.

HTML :

<header id="accueil">

            <img src="IMAGES/LOGO-510.png">

            <div class="text">

                <h1>510</h1>

                <p class="nous">NOUS SOMMES<br><span>OUVERTS LE :</span></p>

                <p class="horaire">Lundi, Mardi : 9h - 18h<br>

                Mercredi : 9h - 14h<br>

                Jeudi : 9h - 00h<br>

                Vendredi, Samedi : 9h - 1h30<br>

                Dimanche : 7h30 - 12h<br>

                au 11 Avenue Paul Cézanne<br>

                42600 Montbrison</p>

            </div>

        </header>

CSS :

header {

    background-color: #313542;

    height: 100vh;

    position: relative;

    text-align: center;

}

header img {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    opacity: 0.05;

    height: 80%;

    width: auto;

}

.text {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

header h1 {

    font-family: 'Merriweather', serif;

    font-size: 200px;

    color: #f0da63;

}

.nous {

    font-family: 'Cabin', sans-serif;

    font-weight: 700;

    font-size: 86px;

    color: #f0da63;

    line-height: 75px;

}

.nous span {

    font-family: 'Cabin', sans-serif;

    font-weight: 700;

    font-size: 98px;

    color: #f0da63;

    line-height: 10px;

}

.horaire {

    font-family: 'Cabin', sans-serif;

    font-size: 32px;

    color: #f0da63;

    line-height: 35px;

}

Voilà ce que j'ai fait pour l'intant. Je ne pense pas que le code soit vraiment opti mais le résultat visuel est pas trop mal.

Je vais peut être devoir remplacer le h1 "510" par un logo, donc une image de plus. Etant donné que c'est le nom du commerce, est-ce que cela pose problème pour le référencement ?

Pour que le texte soit également responsive et adapter au viewport, vaut mieux le faire avec des media queries ou avec les unités "vw" et "vh" ?

Bonjour, j'aimerai préciser avant de donner ma réponse que j'ai un niveau 1/3 en html mais en réalité, je le mettrai à 2.5 (mais je ne sais plus comment faire).

Je ne connais pas bien le sujet du référencement, mais beaucoup de sites mettent un image même quand leur logo est un texte (ex: fnac). Je pense donc que tu devrais faire de même. Je ne pourrais pas plus t'aider là-dessus.

En revanche, je me permet d'intervenir sur ton code en général.

• Tu ne devrais pas définir un id pour ton header, puisque ce dernier est censé être comme un <div id="header">
• Avant, j'utilisais beaucoup les balises <h1>, <em>, etc... mais c'est une erreur. Puisque tu sais désormais utiliser le CSS, tu devrais mettre une class ou un id (class c'est mieux si tu l'utilises ensuite sur d'autres balises) et ensuite éditer font-size et font-weight.
• Je ne comprend pas trop le class="nous". Tu devrais mettre un nom plus précis pour mieux t'y retrouver, mais tu peux choisir le nom que tu veux, le principal c'est que toi, tu y arrives.
• Dans cette classe justement, tu n'est pas obligé de mettre un <br/>. Selon moi, c'est mieux d'utiliser dans ton css un display: inline-block; et ensuite de définir width à une taille qui fait sauter de ligne ton texte (encore une fois, <br/> n'est pas si mauvais, les deux n'ont aucun impact, me semble-t-il, sur ta page)
• Je ne peux pas voir ton site terminer, mais est-ce une bonne idée de mettre les horaires et l'addresse dans un header?
• Enfin, pour répondre à ta derière question, je n'utilise ni vw, ni vh. Je préfère les px et les %, mais c'est encore une fois à toi de voir. Si tu veux que ton header soit responsive comme le reste de ton site, tu dois mettre width: 100% pour ton header, et ne pas oublier le fameux *{margin: 0; padding: 0;} qui a pour but de retirer ces petites marges désagréables sur le bord de la fénêtre.

J'espère en tous cas avoir pu t'aider, bonne journée