Header avec images - Placement des éléments

Leg2027 Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   -  
Leg2027 Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   -
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:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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/
0
Leg2027 Messages postés 114 Date d'inscription   Statut Membre Dernière intervention  
 
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;
}
0
DoctorHow > Leg2027 Messages postés 114 Date d'inscription   Statut Membre Dernière intervention  
 
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>
0
Leg2027 Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   > DoctorHow
 
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.
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527 > Leg2027 Messages postés 114 Date d'inscription   Statut Membre Dernière intervention  
 
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;
}
0
Leg2027 Messages postés 114 Date d'inscription   Statut Membre Dernière intervention   > Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention  
 
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.
0