bonjour tout le monde
je galere depuis quelque jours sur mon bout de code
en gros je dois mettre une googlemap en fond et dessus je dois y mettre un formaulaire
le souci je n arrive pas a ce que la google map prenne tout la place
je vous donne mon code html et le css que j ai ecris
le html
<section id="contact">
<div class="contact-conteneur">
<div class="contact-box"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7013.997004335047!2d2.34849836332936!3d48.87256543268373!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e145ccb3091%3A0x9495beee8c96ec27!2s25+Rue+d'Hauteville%2C+75010+Paris!5e0!3m2!1sfr!2sfr!4v1522327511133" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<!-- <div class="contact-box-form">
<h3>Contact info</h3>
<p class="soustitre">Webagency sas</p>
<p>25 rue hauteville 75010 Paris</p>
<form method="post" action="traitement.php">
<input type="text" name="nom" placeholder="Votre Nom" />
<input type="email" name="email" placeholder="Votre email" />
<input type="text" name="sujet" placeholder="sujet" />
<input type="text" name="nom" placeholder="Votre nom" />
<textarea name="message" id="message" placeholder="Votre message"></textarea>
<input type="submit" value="Envoyer" />
</form>
</div>
-->
</div>
</section>et le css
/*contact*/
.contact-conteneur{
display: flex;
align-items: stretch;
}
.contact-box{
display: flex;
}j utilise le systeme flexbox je cherche dans tout les sens mais rien de chez rien et je ne peut pas utiliser le js pour cela
si une ame charitable pouvais m aider cela serai gentil
cordialement
4 réponses
Salut,
je sais pas si j'ai bien compris ce que tu cherches a faire -> google map qui prend toute la largeur, et le formulaire dessus ?
Si oui, je te propose ca (j'ai ajoute des styles de bases, c'etait plus agrable pour tester ^^) :
Bloc parent qui contient l'iframe en relative, et ton contact absolute qui se centre au sein de son parent.
HTML :
<section id="contact">
<div class="contact-box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7013.997004335047!2d2.34849836332936!3d48.87256543268373!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e145ccb3091%3A0x9495beee8c96ec27!2s25+Rue+d'Hauteville%2C+75010+Paris!5e0!3m2!1sfr!2sfr!4v1522327511133" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<div class="contact-box-form">
<h3>Contact info</h3><br>
<p class="soustitre">Webagency sas</p><br>
<p>25 rue hauteville 75010 Paris</p><br>
<form method="post" action="traitement.php"><br>
<input type="text" name="nom" placeholder="Votre Nom" /><br>
<input type="email" name="email" placeholder="Votre email" /><br>
<input type="text" name="sujet" placeholder="sujet" /><br>
<input type="text" name="nom" placeholder="Votre nom" /><br>
<textarea name="message" id="message" placeholder="Votre message"></textarea><br>
<input type="submit" value="Envoyer" />
</form>
</div>
</div>
</section>CSS :
.contact-box{
width:100%;
position: relative;
}
.contact-box-form{
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 4px black solid;
position: absolute;
background-color: rgba(255,255,255,0.7);
top: 50%;
}
iframe{
width:100%;
}J'espere avoir correctement repondu (je suis encore debutant :D ).
Cdlt
Hello !
Utilise la position absolute pour caler la map en fond et une relative avec un z-index pour ton formulaire. Ca devrait le faire ...
bonsoir
merci beaucoup a vous deux
et trés trés bon code sylvain je n avais jamais eu le probleme sans passe par js enorme merci