Header avec images - Placement des éléments
Leg2027
Messages postés
118
Statut
Membre
-
Leg2027 Messages postés 118 Statut Membre -
Leg2027 Messages postés 118 Statut Membre -
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
Voila à quoi j'aimerais que ça ressemble:
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:absolutesi possible.
Voila à quoi j'aimerais que ça ressemble:
1 réponse
-
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/-
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;
} -
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>
-
-
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; } -
-
