google map et flexbox

Par tyai, il y a 8 ans

Les bases HTML/CSS

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&#39;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

Roak, il y a 8 ans

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 ...

tyai, il y a 8 ans

merci beaucoup je vais essayer

Lardio, il y a 8 ans

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&#39;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

tyai, il y a 8 ans

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