5568 sujets

Sémantique web et HTML

Problème de placement titre et texte avec <picture>

Bonjour,
je n'arrive pas à placer dans l'image, en top, le titre et le texte, les boutons ça a l'air d'aller... ??

Merci d'avance pour vos réponses

Mon code actuel :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre</title>
<style>
/*------------------------------------------------ fonts */
@font-face {
font-family: "Montserrat";
src: url(Montserrat-Regular.ttf)
}
@font-face {
font-family: "Montserrat-ExtraLight";
src: url(Montserrat-ExtraLight.ttf);
}
/*---------------------------------------------- general */
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: grey;
}
img {
width: 100%;
height: auto;
}
h1 {
font-family: "Montserrat-ExtraLight", sans-serif;
margin: 0;
padding: 0 0 0 0;
font-size: 5.7em;
color: #fff;
}
p {
margin: 0;
padding: 0;
font-size: 0.77em;
font-family: "Montserrat", sans-serif;
}
a {
font-family: "Montserrat", sans-serif;
}
/*-------------------------------------- visual evenement */
.container-visual-evenements {
position: relative;
margin: 0;
padding: 0;
}
/*----------------------------- titre et texte evenements */
.sous-container-visual-evenement-titre {
position: absolute;
color: #fff;
top: 8%;
left: 8%;
margin: 0;
padding: 0;
}
.sous-container-visual-evenement-texte {
position: absolute;
color: #fff;
top: 8%;
left: 8%;
margin: 0;
padding: 0;
}
.titre-evenements {
padding: 0;
margin: 0 0.3em 0 0;
color: #fff;
}
.texte-evenements {
padding: 0;
margin: 0 0 0 0.3em;
color: #fff;
}
/*------------------------------------------ boutons */
.sous-container-bouton-video-demo-et-contacts {
position: absolute;
color: white;
bottom: 8%;
left: 8%;
margin: 0 0 8% 0;
padding: 0%;
}
.bouton-video-demo {
text-decoration: none;
border: 1px solid#777;
padding: 1em 2em;
margin: 0 0.3em 0 0;
color: #fff;
background-color: transparent;
}
.bouton-contacts {
text-decoration: none;
border: 1px solid#777;
padding: 1em 2em;
margin: 0 0 0 0.3em;
color: #fff;
background-color: transparent;
}
/*------------------------------------ boutons hover */
.bouton-video-demo:hover {
background-color: white;
color: orangered;
}
.bouton-contacts:hover {
background-color: white;
color: orangered;
}
</style>
</head>
<body>
<picture>
<source media="(max-width: 480px)" srcset="Image-480px.jpg">
<source media="(max-width: 600px)" srcset="Image-800px.jpg">
<source media="(max-width: 1300px)" srcset="Image-1300px.jpg">
<source media="(max-width: 1680px)" srcset="Image-1680px.jpg">
<source media="(max-width: 2100px)" srcset="Image-2100px.jpg">
<img src="Image-3200px.jpg" alt="">
<div class="container-visual-evenements">
<div class="sous-container-visual-evenement-texte">
<h1 class="titre-evenements">Événements</h1>
<p class="texte-evenements">Une vidéo de votre événement aura...</p>
</div>
<div class="sous-container-bouton-video-demo-et-contacts">
<a href="" class="bouton-video-demo">Regardez Vidéo</a>
<a href="" class="bouton-contacts">Contacts</a>
</div>
</div>
</picture>
</body>
<script>
</script>
</html>
Hello,

Peux tu créer un JSFiddle ou quelque chose dans le genre pour montrer ce que tu n'arrives pas à faire ? Car là on a pas tes images pour tester et voir ce qui ne va pas.
Sujet clos
Aller à