我有点困惑......
无论我尝试什么，我都无法将我的联系表单放在我的谷歌iframe上......我的意思是，我可以，而且没关系，但只有我不想让我的网站成为响应因为，当我减少我的窗户时，我可以看到它因为绝对分配而保持在位置......
任何想法如何让我在这个位置上完全响应，对屏幕大小有所帮助？
/*ajout des polices*/
@font-face{
font-family : "Roboto";
src : url('./fonts/Roboto-Black.ttf');
}
@font-face{
font-family : "RobotoBold";
src : url('./fonts/Roboto-Bold.ttf');
}
@font-face{
font-family : "RobotoThin";
src : url('./fonts/Roboto-Thin.ttf');
}
@font-face {
font-family: 'FontAwsome';
src: url('./fonts/fontawsome-webfont.eot');
src: url('./fonts/fontawsome-webfont.woff') format('woff'),
src: url('./fonts/fontawsome-webfont.ttf') format('truetype'),
src: url('./fonts/fontawsome-webfont.otf') format('otf'),
src: url('./fonts/fontawsome-webfont.svg') format('svg');
}
/*ajout des médias queries pour que le site soit résponsif*/
@media(max-width:767px){
.asside, nav
{
display: flex;
flex-wrap: wrap;
padding-left: 3%;
}
.nav
{
display: flex;
flex-wrap: wrap;
margin: 0px;
padding: 0px;
}
.row
{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
figcaption h1
{
position: absolute;
color: #FFF;
margin-left: -60px;
margin-top: -55px;
width: 50%;
font-size: 0.1em;
}
.imagemac img
{
width: 70%;
margin-right: 3%;
}
.assidecontent
{
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
padding: 1% 3% 1% 3%;
width: 100%;
margin: 0;
}
.servicescircles
{
position: absolute;
left: -55px;
top: -55px;
}
.button1
{
display: none;
}
.projetsrows
{
display: flex;
flex-wrap: wrap;
}
.projetsrows img
{
display: flex;
flex-wrap: wrap;
margin: auto;
}
.projetslist
{
background-color: #e4e4e4;
padding: 2%;
display: flex;
flex-wrap: wrap;
}
.projetslist li
{
background-color: #e4e4e4;
border-radius: 3px;
padding: 12px;
}
.projetslist li:hover
{
border-bottom: 2px solid blue;
border-radius: 5px;
background-color: #62a8d0;
padding: 12px;
}
.separateur1, .separateur2
{
margin-left: 150px;
}
.google_iframe
{
display: none;
}
.formposition
{
width: auto;
margin: auto;
}
}
@media(max-width:1200px){
figcaption
{
position: absolute;
margin-top: -50px;
}
.button1
{
display: none;
}
.asside
{
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.asside img
{
width: 50%;
}
.projetslist
{
width: 100%;
position: relative;
margin: auto;
background-color: #f5f5f5;
}
.projetslist li
{
background-color: #e4e4e4;
border-radius: 3px;
padding: 12px;
}
.projetslist li:hover
{
border-bottom: 2px solid blue;
border-radius: 5px;
background-color: #62a8d0;
padding: 12px;
}
}
@media(max-width:2000px){
}
/*header du site*/
/*ajout d'une keyframe pour annimer le slider*/
@keyframes sliding {
0% { left: 0%; }
25% { left: 0%; }
50% { left: -100%; }
75% { left: -100%; }
100% { left: - 200%; }
}
/* appliquer une police globale à toute la page*/
body
{
padding: 0;
margin: 0;
font-family: "RobotoBold", sans-serif;
font-size: 1em;
}
header
{
position: relative;
}
/*navigation et logo*/
nav
{
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 15% 0 15%;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style:none;
display: flex;
flex-direction: row;
font-family: "RobotoBold", sans-serif;
font-size: 1.1em;
}
.blocmenu
{
display: flex;
flex-wrap: wrap;
position: relative;
}
.nav a
{
margin: 15px 0px 15px 0px;
}
ul a {
padding: 1em;
display: block;
text-align:center;
text-decoration: none;
color: black;
}
li a:hover {
display: block;
text-align:center;
text-decoration: none;
border-top: 3px solid #62a8d0;
padding-top: 15px;
}
/*slider*/
div#slider
{
width: 100%; overflow: hidden;
box-shadow: 0px 25px 120px #999999;
}
div#slider figure
{
position: relative;
width: 500%;
margin: 0;
padding: 0;
font-size: 0;
left: 0;
text-align: left;
animation: 10s sliding infinite;
}
div#slider figure img
{
width: 20%; height: auto; float: left;
}
figcaption {
position: absolute;
color: #FFF;
top: 230px;
left: 170px;
width: 50%;
font-size: 1.4em;
text-decoration: none;
}
.button1, .button2
{ color: #FFF;
text-align: center;
padding: 10px 0px 10px 0px;
margin: 10px;
border-radius: 5px;
background-color: #62a8d0;
box-shadow: 1px 3px 1px #1a7790;
width: 20%;
}
.button1 a, .button2 a
{
color: #FFF;
text-decoration: none;
font-size: 1.5em;
}
.button1:hover, .button2:hover
{
background-color: #00557f;
}
.fa-chevron-left
{
color: #FFF;
justify-content: flex-start;
position: absolute;
justify-content: center;
left: 15px;
font-size: 1.8em !important;
top: 50%;
}
.fa-chevron-right
{
color: #FFF;
justify-content: flex-end;
position: absolute;
right: 15px;
font-size: 1.8em !important;
top: 50%;
}
.fa-chevron-right:hover, .fa-chevron-left:hover
{
font-size: 2.8em !important;
}
/*forme des titres */
h1
{
font-size: 2.2em;
font-family: "RobotoBold", sans-serif;
}
/* gestion des séparateurs entre titre et articles*/
/*.point_bleu
{
position: absolute;
width: 15px;
height: 15px;
border-radius: 20px;
background: #62a8d0;
}*/
.hr1, .hr2
{
width: 60px;
margin: 0;
}
.separateur1
{
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-bottom: 35px;
margin: auto;
}
.separateur2
{
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-bottom: 35px;
margin: auto;
}
/* section services /
/*centrer le corps du bloc*/
.bloc_centre
{
margin: 0 25% 0 25%;
text-align: center;
}
.services
{
width: auto;
padding: 5% 0% 3% 0%;
margin: 0% 10% 0% 10%;
}
.fa-circle
{
position: relative;
font-size: 1.2em;
border-radius: 50%;
color: #62a8d0;
padding: 3px;
}
.fa-chart-line, .fa-cubes, .fa-chart-pie
{
color: #62a8d0;
font-size: 2.4em;
border: 1px solid black;
border-radius: 50%;
padding: 15px;
}
.servicescircles
{
position: relative;
left: 55px;
top: -45px;
}
.asside
{
display: flex;
flex-direction: row;
}
.asside img
{
margin: auto;
width: 120%;
}
.assidebloc
{
display: flex;
flex-direction: column;
}
.assidecontent
{
display: flex;
flex-direction: row;
margin: 5% 0% 0% 20%;
}
.assideicons
{
margin: 5% 0 5% 0;
}
.assidetext
{
display: flex;
flex-direction: column;
padding: 1% 3% 1% 3%;
}
b
{
color: #62a8d0;
}
/*création d'un fond effet jumbotron pour la section projets*/
.projets
{
background-color: #f5f5f5;
padding: 3% 5% 10% 5%;
}
.projetslist
{
border: 0px solid black;
border-radius: 5px;
display: flex;
flex-direction: row;
list-style: none;
margin: auto;
justify-content: center;
}
.projetslist li
{
background-color: #e4e4e4;
padding: 12px;
margin: 5% 0% 0% 0%;
}
.projetslist li:hover
{
background-color: #62a8d0;
border-bottom: 3px solid #1a7790;
}
/* le bouton doit il êtres en active, ou est-ce un effet de hover?*/
/*.active
{
border-bottom: 2px solid blue;
border-radius: 5px;
background-color: #62a8d0;
padding: 12px;
}*/
/*mise en forme des blocs de la partie projets et de leurs éléments*/
/* mise ne place des images de la partir portfolio*/
.projetsrows
{
display: flex;
flex-direction: row;
margin: 5% 0% 0% 0%;
}
.projetsrows img
{
width: 85%;
margin: 1% 0% 1% 0%;
}
.projetsrows img:hover
{
width: 86%;
border: 1px solid blue;
border-radius: 5px;
padding: 3% 0% 3% 0%;
background-color: black;
opacity: 0.7;
box-shadow: 7px 7px 5px grey;
}
/*mise en forme des éléments de la partie contact*/
.contactinfos
{
padding-left: 15px;
}
form
{
z-index: 1;
padding: 1%;
display: flex;
flex-direction: column;
position: relative;
width: 300px;
height: 550px;
background-color: rgba(255, 255, 255, 0.7);
/*border: 1px solid #62a8d0;*/ /*décorations facultatives, à voir avec mentor*/
/*border-radius: 5px;*/
}
input, textarea
{
padding: 3%;
margin: 0% 3% 2% 3%;
border-radius: 5px;
width: 85%;
}
.formposition
{
position: absolute;
margin: 3% 0% 0% 80%;
}
.google_iframe
{
background-color: #A9A9FF;
}<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Web Agency</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" href=".fonts/css/fontawsome-all.css">
<!--<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> -->
</head>
<body>
<header style="background-color: #fafafa"> <!-- entête du site, contiendra le menu de navigation ainsi que le carrousel-->
<div class="blocsmenu">
<nav class="nav"> <!-- navigation-->
<a href="#"><img src="./webagency_images/images/logo.png" alt="Web Agency Logo"/></a>
<ul class="menu">
<li class="menu-item"><a href="#">Accueil</a></li>
<li class="menu-item"><a href="#">Services</a></li>
<li class="menu-item"><a href="#">Portfolio</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div id="slider"> <!-- carrousel-->
<figure>
<img src="./webagency_images/images/slider/bg1.jpg" alt="Images Slider">
<img src="./webagency_images/images/slider/bg2.jpg" alt="Images Slider">
</figure>
<figcaption>
<h1><span style="color:#62a8d0">WEBAGENCY</span> : L'AGENCE DE TOUS VOS PROJETS!</h1>
<p>Vous avez un projet Web? La WebAgency vous aide à le réaliser!</p>
<p class="button1" type="button"><a href="#">Plus d'infos</a></p>
</figcaption>
<div class="slider_navigation">
<div class="fa fa-chevron-left" aria-hidden="true"></div>
<div class="fa fa-chevron-right" aria-hidden="true"></div>
</div>
</div>
</header>
<!-- section services de la page du site-->
<section class="services">
<h1 style="text-align: center">NOS SERVICES</h1><br>
<div class="separateur1"><hr class="hr1"><span class="fas fa-circle"></span><hr class="hr1"></div>
<p class="bloc_centre">Nous proposons les meilleurs services et en plus, aux meilleurs prix!! Nous avons une équipe de professionnels tous prêt à accueillir votre projet et lui donner vie selon vos souhaits. N'hésitez pas à nous contacter pour un devis, un projet web ou pour un magasin web. Les éléments pris en charge par l'UX vont de la partie commerciale à l'accessibilité.</p><br/>
</div>
<div class="asside">
<div><img src="./webagency_images/images/main-feature.png" alt="Mac" /></div>
<div class="assidebloc">
<div class="assidecontent">
<div class="assideicons"><i class="fas fa-chart-line"></i><i class="fas fa-circle servicescircles"></i></div>
<div class="assidetext"><h1>UX Design</h1>
<p><b>U</b>ser e<b>X</b>périence : son rôle à pour but de faire la liaison entre l'interface construite, et l'utilisateur. Il est chargé de rendre l’expérience d'utilisation fluide, simple, intuitive, de faciliter l'utilisation de l'utilisateur, de réfléchir pour lui à tout ces moyens là d'avoir la meilleure expérience possible sur son support. Faites confiance à nos équipes pour tout mettre en oeuvre pour avoir l'interface parfaitement en accords avec vos attentes!</p>
</div></div>
<div class="assidecontent">
<div class="assideicons"><i class="fas fa-cubes"></i><i class="fas fa-circle servicescircles"></i></div>
<div class="assidetext"><h1>UI Design</h1>
<p><b>U</b>ser <b>I</b>nterface : son rôle est là pour rendre accessible, optimale et facile, l'accès et l’exécution des dispositifs liés à l'interface des applications et machines. Nos professionnels sont là pour vous assurer la meilleure expérience possible!</p>
</div></div>
<div class="assidecontent">
<div class="assideicons"><i class="fas fa-chart-pie"></i><i class="fas fa-circle servicescircles"></i></div>
<div class="assidetext"><h1>SEO</h1>
<p><b>S</b>earch <b>E</b>ngine <b>O</b>ptimization : son rôle est d'optimiser au mieux le référencement des outils web, d'un site... Le travaille se fait sur les mots clés, la sémantique, l'étude de la concurrence, du marché actuel et doit être fait régulièrement pour mettre à jour les données importantes au référencement. Soyez assuré que votre site sera toujours référencé au mieux et que les clés du référencement seront mises à jours régulièrement par nos services! </p>
</div></div>
</div>
</div>
</section>
<!-- section portfolio de la page du site -->
<section class="projets">
<h1 style="text-align: center">NOS PROJETS</h1><br>
<div class="separateur1"><hr class="hr1"><span class="fas fa-circle"></span><hr class="hr1"></div>
<p class="bloc_centre">Vous pourrez voir ici tout les projets sur lesquels nous avons travaillé. Qu'ils soient personnel ou professionnel, comptez sur nous pour vous donner le résultat le plus satisfaisant possible! Nous aimons la diversité, nous aimons les identités différentes et travaillons autour de ça.</p><br />
<ul class="projetslist">
<li class="active">All Works</li>
<li>Creative</li>
<li>Corporate</li>
<li>Portfolio</li>
</ul>
<div class="projetsrows">
<div><img src="./webagency_images/images/portfolio/01.jpg" alt="Image1"/></div>
<div><img src="./webagency_images/images/portfolio/02.jpg" alt="Image2"/></div>
<div><img src="./webagency_images/images/portfolio/03.jpg" alt="Image3"/></div>
<div><img src="./webagency_images/images/portfolio/04.jpg" alt="Image4"/></div>
</div>
<div class="projetsrows">
<div><img src="./webagency_images/images/portfolio/05.jpg" alt="Image5"/></div>
<div><img src="./webagency_images/images/portfolio/06.jpg" alt="Image6"/></div>
<div><img src="./webagency_images/images/portfolio/07.jpg" alt="Image7"/></div>
<div><img src="./webagency_images/images/portfolio/08.jpg" alt="Image8"/></div>
</div>
</section>
<!-- bas de page contenant un iframe google maps et un formulaire de contact-->
<footer>
<div class="formposition">
<form method="post">
<h1 class="contactinfos">Contact Info</h1>
<h4 class="contactinfos">WebAgency SAS<br /> 25 rue d'Hauteville 75010 Paris<br /> Tel : 01 02 03 04 05</h4>
<label for="Nom"></label>
<input type="text" name="Nom" placeholder="Nom"><br/>
<label for="E-mail"></label>
<input type="text" name="E-mail" placeholder="E-mail"><br />
<label for="Sujet"></label>
<input type="text" name="Sujet" placeholder="Sujet"><br />
<label for="Message"></label>
<textarea rows="50" cols="35" placeholder="Votre message"></textarea><br />
<p class="button2" style="width: 50%">Envoyer</p>
</form>
</div>
<div class="google_iframe">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11139.440186098542!2d4.878186999999999!3d45.73390145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1524499866273" width="100%" height="650" style="border:0; opacity: 0.7" allowfullscreen></iframe>
</div>
</footer>
</body>
</html>
答案 0 :(得分：0)
你可以通过一些JS数学来解决这个问题。这是一个例子（使用JQuery）：
const formPercentLeft = 40;
$(window).resize(function(){
var windowWidth = $(window).innerWidth();
var pxLeft = formPercentLeft * windowWidth;
$(".formposition").css("left", pxLeft);
});
只需硬编码相对于页面宽度的位置，您希望自己的表单;然后在文档大小调整事件上，更改left表单的CSS position: absolute像素值。
答案 1 :(得分：0)
我真的不知道你到底想要什么，但我认为你使用absolute定位错误。首先，您应该添加到footer一个position: relative，以使其相对于儿童定位，而不是整个HTML。
然后不要在绝对定位元素上使用边距，这就是top，bottom，left，right属性的原因，所以：
footer {
position: relative; //to position .formposition relative to footer
}
.formposition {
top: 3%;
right: 0; //to put it to right side of container
}
如果它不是你想要的，你应该向我们提供你希望它看起来的moro信息。