Header avec images - Placement des éléments

Fermé

Leg2027 Messages postés 114 Date d'inscription mardi 1 septembre 2020 Statut Membre Dernière intervention 3 décembre 2023 - 27 mai 2022 à 14:32
Leg2027 Messages postés 114 Date d'inscription mardi 1 septembre 2020 Statut Membre Dernière intervention 3 décembre 2023 - 11 juin 2022 à 12:52

Bonjour,

J'essaye de créer la page d'acceuil d'un site web. Mais j'ai du mal à faire la bannière qui contient le nom du site, une phrase et des images.
J'ai essayé différent moyen de placement, impossible de faire comme je veux.

Par exemple si je veux centrer le texte au milieu de la page, ça centre entre les 2 images. Ou alors le sous-titre n'est pas décalé etc...

Pouvez-vous me dire quel éléments je dois utiliser pour positionner les images et le texte comme je le souhaiterais en HTML et CSS ?
Sans

position:absolute

si possible.

Voila à quoi j'aimerais que ça ressemble:

A voir également:

Nicolas a téléchargé le logiciel utilitaires 2020. il clique sur le bouton “j’accepte” en bas à droite. quels sont les programmes ou éléments installés maintenant sur son ordinateur ?
Ordinateur qui rame - Guide
Money logiciel - Télécharger - Comptabilité & Facturation
Réinitialiser ordinateur - Guide
Logiciel montage vidéo gratuit windows 10 - Guide
Télécharger musique gratuitement sur pc - Télécharger - Conversion & Extraction

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
27 mai 2022 à 16:34

Bonjour,

Essaye d'utiliser flexbox pour positionner tes éléments.

https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Flexbox
https://flexbox.ninja/demos/website-header/

Leg2027 Messages postés 114 Date d'inscription mardi 1 septembre 2020 Statut Membre Dernière intervention 3 décembre 2023
28 mai 2022 à 10:38

J'ai essayé avec flexbox, c'est pas mal mais c'est pas encore parfait.
Le titre se centre toujours entre les éléments à sa droite et à sa gauche mais pas au millieu de la page. Et les espaces entre les images ne sont pas exactement comme je le veux.

Pouvez-vous me dire ce que je dois modifier/utiliser ?

Voici le résultat: http://apprendreitalien.byethost33.com/HeaderTest/index.html

Le code html est:


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <title>Titre</title>
        <meta charset="utf-8">
    </head>
    
<body>
    <header class="container">
        <div class="item1"><img src="vespa.png" alt="vespa" class="vespa"></div>
        <div class="item2"><h2>Imparare l'italiano</h2>
        <h1>-Apprendre l'italien</h1></div>
        <div class="item3"><img src="drapeau.png" class="drapeau"></div>
        <div class="item4"><img src="tour.webp" class="tour"></div>
    </header>    
</body>
</html>

Le CSS:


@import url('https://fonts.googleapis.com/css2?family=Questrial&family=Raleway:wght@300&display=swap');

body{
    margin: 0px;
    padding: 0px;
}
header{
    background-color: #77e8ca;
    padding: 15px;
    height: 210px;
    
}
h1{
    text-align: right;
    font-size: 18px; 
    font-family: 'Raleway', sans-serif;
    font-weight: normal;
}
h2{
    font-size: 48px; 
    font-family: 'Questrial', sans-serif;
    margin-bottom: 0px;
    font-weight: normal;
}
img.vespa{
    height: 249px;
}
img.drapeau{
    position: relative;
    top: -20px;
    height: 219px;
}
img.tour{
    height: 220px;
}
.container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.item1{
    background-color: aqua;
}
.item2{
    background-color: red;
}
.item3{
    background-color: blueviolet;
}
.item4{
    background-color: darkorange;
}

DoctorHow > Leg2027 Messages postés 114 Date d'inscription mardi 1 septembre 2020 Statut Membre Dernière intervention 3 décembre 2023
Modifié le 28 mai 2022 à 21:25

Salut,
avec des dimensions en pourcentage et des marges sinon.


<header><!--- 100% 0 de marge //-->
<container image1>    <container titre><container image2><container img3>
 30% 2% de marge à droite
----------------------- -TITRE --------2%marge à gauche,  width 30%
----------------------------- image2  ---------------------width18%,  1%marge à droite
 ---------------------------------------- image3 -------------------- width 16%, 1% marge à droite

</header>

Le plus simple est toujours le mieux
Faut virer tout les autres positionnement et si un soucis passez les containers en display:inline ou inline-block
J'ai donné des valeurs au pif mais tant que ça fait 100% (marge externes et internes comprises) voire un poco moins pour éviter tout débordement(bordure et truc du genre)

ciao

ps: utilisez des dimensions proportionnelles au lieux de valeurs fixes qui ne correspondent à rien sur un écran d'une autre taille et résolution : "%" et "em" par exemple au lieu "px" et "pt"
ps2: même pas besoin de container ) part le header en ne jouant que sur les marges(droite/gauche internes/externes) et simplement regrouper les 2 titres en utilisant que du "inline"

<p><h2>Imparare italiano<h2><br>
<h1 style="padding-left:2em;">Apprendre l'italien<h1>
</p>

Leg2027 Messages postés 114 Date d'inscription mardi 1 septembre 2020 Statut Membre Dernière intervention 3 décembre 2023 > DoctorHow
29 mai 2022 à 11:37

Ce n'est pas très simple non plus.
J'ai essayé de placer les éléments comme ça mais il y a des problèmes.

h1 et h2 se mettent en diagonale en bas à droite de la première image, au lieu d'être vers le haut du header.

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525 > Leg2027 Messages postés 114 Date d'inscription mardi 1 septembre 2020 Statut Membre Dernière intervention 3 décembre 2023
29 mai 2022 à 12:08

Une autre piste en utilisant float :

<header class="page-header">
  <img src="http://apprendreitalien.byethost33.com/HeaderTest/vespa.png" class="vespa">
  
 <h1 class="page-title">
   Imparare l'italiano<br>
   <small>-Apprendre l'italien</small>
 </h1>
  
  <img src="http://apprendreitalien.byethost33.com/HeaderTest/tour.webp" class="tour">
  <img src="http://apprendreitalien.byethost33.com/HeaderTest/drapeau.png" class="drapeau">
</header>

@import url('https://fonts.googleapis.com/css2?family=Questrial&family=Raleway:wght@300&display=swap');

body{
  margin: 0;
  padding: 0;
}

.page-header{
  background-color: #77e8ca;
  text-align: center;
}

.page-title {
  display: inline-block;
  padding: 35px 15px;
  font-size: 48px;
  font-family: 'Questrial', sans-serif;
  font-weight: normal;
}

.page-title small {
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  text-align: right;
}

.vespa {
  float: left;
  max-height: 250px;
}

.drapeau {
  float: right;
  max-height: 220px;
  margin-right: 20px;
}

.tour {
  float: right;
  max-height: 220px;
}

Leg2027 Messages postés 114 Date d'inscription mardi 1 septembre 2020 Statut Membre Dernière intervention 3 décembre 2023 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
29 mai 2022 à 12:28

Merci pour avoir fait ça !
C'est aussi une bonne idée.
Je vais surement garder ce code (en faisant quelques petites modifications) sauf si biensur il y a une solution encore meilleure.

Discussions similaires

comment donner les droits sur fichier partage