stackoom
  简体   繁体   中英

HTML form overlaps image banner

 原文  2016-10-05 10:51:25  8   6    html/ css

Question

I just started with CSS, and I'm not being able to put an image banner on the top of a form as I want. When the resolution is huge, the website looks good, but when it's low (the navigator window is smaller) the HTML form covers the banner. That's not what I want; I want the banner to always stay on the top of the form. The image shows the problem.

表单与图像重叠。

My html code: 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Formulario de registro UVigo</title>
<link rel="stylesheet" href="style/index_style.css">
<script type="text/javaScript" src="p1.js"> </script>
</head>
<body>
<img src= "http://www.colegiosanagustin.net/wp-content/uploads/2016/06/Logo-Formulario.png"></img>
<section id="formulario">
    <p id="titulo">Formulario de registro</p>

    <form method="POST" action="" name="formulario" id="form" onsubmit="return checkForm(this);">
        <input type="text" id="nombre" name="nombre" placeholder="Nombre">
        <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos">
        <input type="text" id="birth" name="birth" placeholder="Fecha de nacimiento">
        <div class="help-tip"><p>Formato: DD/MM/YYYY</p></div>
        <input type="text" id="dni" name="dni" placeholder="DNI">
        <div class="help-tip"><p>Formato ejemplo: 99999999L</p></div>
        <input type="text" id="telephone" name="telephone" placeholder="Tel&eacute;fono">
        <div class="help-tip"><p>Formato ejemplo: 887889781</p></div>
        <input type="mail" id="mail" name="mail" placeholder="Correo electr&oacute;nico">
        <div class="help-tip"><p>Formato: nombre@dominio.com</p></div>
        <input type="password" id="pass" name="pwd1" placeholder="Contrase&ntilde;a">
        <div class="help-tip"><p>Mínimo 6 caracteres. Debe contener al menos una letra mayúscula y un número.</p></div>
        <input type="password" id="pass" name="pwd2" placeholder="Confirmar contrase&ntilde;a">
        <p id="questions">¿Cuáles fueron sus estudios anteriores?<br>
        <select name="studieslist" form="form">
            <option value="bach">Bachillerato</option>
            <option value="ciclo">Ciclo Superior</option>
            <option value="extra">Estudios en el extranjero</option>
        </select>
        <p id="questions">¿Desea recibir comunicaciones por parte de la Universidad de Vigo?<br>
        <input type="checkbox" name="h" value="1" id="g"> SMS
        <br/>
        <input type="checkbox" name="h" value="2" id="g"> Correo electrónico
        <br/>
        <input type="checkbox" name="h" value="3" id="g"> Teléfono
        <br/>
        <input type="button" id="prueba" name="sub" value="Marcar todas" onclick="checkall(document.formulario.h)">
        <input type="button" name="sub" value="Desmarcar todas" onclick="uncheckall(document.formulario.h)">
        <p id="questions">¿Desea activar el servicio de "Notas al móvil"?<br>
        <input type="radio" name="mobilegrade" value="yes" checked="checked"> Sí<br>
        <input type="radio" name="mobilegrade" value="no"> No</p>
        <p id="questions">Escriba aquí cualquier comentario adicional que desee adjuntar con el formulario:<br>
        <textarea name="comment" form="form" placeholder="Comentario adicional..." rows="4" cols="50"></textarea></p>
        <div id="outer">
        <p id="opcionesenvio">Opciones de envío</p>
        <p id="questions">Tipo de codificación:<br>
        <input type="radio" name="codification" value="urlencoded" checked="checked"> application/x-www-form-urlencoded<br>
        <input type="radio" name="codification" value="multipart"> multipart/form-data</p>
        <p id="questions">Método de envío:<br>
        <input type="radio" name="sendmethod" value="GET"> GET<br>
        <input type="radio" name="sendmethod" value="POST" checked="checked"> POST</p>
        <p id="questions">Enviar a:<br>
        <input type="radio" name="sendto" value="myphp" checked="checked"> Fichero PHP (p1.php)<br>
        <input type="radio" name="sendto" value="sintprofphp"> URL "/~sint0/p1.php"</p>
        <input type="hidden" name="navegador"/>
        <input type="hidden" name="hora"/>
        <div class="inner"><input type="submit" value="enviar"></div>
        <div class="inner"><input type="reset" value="limpiar"></div>
        </div>
    </form>
</section>
</body>
</html>

My css code: 

*{
margin:0px;
padding:0px;
font-family: Tahoma;
font-weight: lighter;
}

img{
display: block;
margin: auto;
margin-top: 10px;
}

body{
background-color: #E0ECF8;
overflow-y: scroll;
}

section#formulario{
position: absolute;
top:50%;
left: 50%;
margin-left: -200px;
margin-top: -240px;
width:400px;
min-height: 100px;
background-color: white;
overflow: hidden;
border-radius: 5px;

}

p#titulo{
font-size: 1.6em;
text-align: center;
margin-top: 20px;
}

p#opcionesenvio{
font-size: 1.6em;
text-align: center;
margin-top: 20px;
}

p#questions{
font-size: 1em;
margin-top: 10px;
margin-left: 20px;
text-align: left;
}

input[type="text"], input[type="password"], input[type="mail"], input[type="birth"], input[type="dni"]{
width: 335px;
height: 35px;
margin-left: 20px;
margin-top:10px;
padding-left: 10px;
font-size: 1.1em;
outline: none;
border:0px;
background-color: #dcdcdc;
border-radius: 5px;
}

textarea{
width: 335px;
margin-left: 0px;
margin-top:10px;
padding-left: 10px;
font-size: 1em;
outline: none;
border:0px;
background-color: #dcdcdc;
border-radius: 5px;
}

#outer
{
width:100%;
text-align: center;
}
.inner
{
display: inline-block;
}


input[type="submit"]{
margin:20px;
margin-bottom: 20px;
width:157px;
height: 40px;
outline: none;
border:0px;
background-color: #75b6dc;
color: white;
font-size: 1.2em;
border-radius: 5px;
-webkit-box-shadow:0px 5px 0px #659dbf;

}

input[type="reset"]{
margin:20px;
margin-bottom: 20px;
width:157px;
height: 40px;
outline: none;
border:0px;
background-color: #585858;
color: white;
font-size: 1.2em;
border-radius: 5px;
-webkit-box-shadow:0px 5px 0px #424242;

}

.help-tip{
display: inline-block;
position: static;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}

.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}

.help-tip:hover p{
display:block;
transform-origin: 100% 0%;

-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{    /* The tooltip */
display: none;
text-align: left;
background-color: #1E2021;
padding: 10px;
width: 200px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:15px;
top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
0% { 
    opacity:0; 
    transform: scale(0.6);
}

100% {
    opacity:100%;
    transform: scale(1);
}
}

@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}

JS Fiddle

https://jsfiddle.net/zg4g3Lke/

Which way should I take to correct this? Thank you!

6 answers

solution1
 0  2016-10-05 10:57:33

 *{ margin:0px; padding:0px; font-family: Tahoma; font-weight: lighter; } img{ display: block; margin: auto; margin-top: 10px; } body{ background-color: #E0ECF8; overflow-y: scroll; } section#formulario { position: absolute; top: 0px; left: 50%; margin-left: -200px; margin-top: 250px; width: 400px; min-height: 100px; background-color: white; overflow: hidden; border-radius: 5px; } p#titulo{ font-size: 1.6em; text-align: center; margin-top: 20px; } p#opcionesenvio{ font-size: 1.6em; text-align: center; margin-top: 20px; } p#questions{ font-size: 1em; margin-top: 10px; margin-left: 20px; text-align: left; } input[type="text"], input[type="password"], input[type="mail"], input[type="birth"], input[type="dni"]{ width: 335px; height: 35px; margin-left: 20px; margin-top:10px; padding-left: 10px; font-size: 1.1em; outline: none; border:0px; background-color: #dcdcdc; border-radius: 5px; } textarea{ width: 335px; margin-left: 0px; margin-top:10px; padding-left: 10px; font-size: 1em; outline: none; border:0px; background-color: #dcdcdc; border-radius: 5px; } #outer { width:100%; text-align: center; } .inner { display: inline-block; } input[type="submit"]{ margin:20px; margin-bottom: 20px; width:157px; height: 40px; outline: none; border:0px; background-color: #75b6dc; color: white; font-size: 1.2em; border-radius: 5px; -webkit-box-shadow:0px 5px 0px #659dbf; } input[type="reset"]{ margin:20px; margin-bottom: 20px; width:157px; height: 40px; outline: none; border:0px; background-color: #585858; color: white; font-size: 1.2em; border-radius: 5px; -webkit-box-shadow:0px 5px 0px #424242; } .help-tip{ display: inline-block; position: static; text-align: center; background-color: #BCDBEA; border-radius: 50%; width: 24px; height: 24px; font-size: 14px; line-height: 26px; cursor: default; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip p{ /* The tooltip */ display: none; text-align: left; background-color: #1E2021; padding: 10px; width: 200px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; line-height: 1.4; } .help-tip p:before{ /* The pointer of the tooltip */ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#1E2021; right:15px; top:-12px; } .help-tip p:after{ /* Prevents the tooltip from being hidden */ width:100%; height:40px; content:''; position: absolute; top:-40px; left:0; } /* CSS animation */ @-webkit-keyframes fadeIn { 0% { opacity:0; transform: scale(0.6); } 100% { opacity:100%; transform: scale(1); } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:100%; } } 
 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Formulario de registro UVigo</title> <link rel="stylesheet" href="style/index_style.css"> <script type="text/javaScript" src="p1.js"> </script> </head> <body> <img src= "http://www.colegiosanagustin.net/wp-content/uploads/2016/06/Logo-Formulario.png"></img> <section id="formulario"> <p id="titulo">Formulario de registro</p> <form method="POST" action="" name="formulario" id="form" onsubmit="return checkForm(this);"> <input type="text" id="nombre" name="nombre" placeholder="Nombre"> <input type="text" id="apellidos" name="apellidos" placeholder="Apellidos"> <input type="text" id="birth" name="birth" placeholder="Fecha de nacimiento"> <div class="help-tip"><p>Formato: DD/MM/YYYY</p></div> <input type="text" id="dni" name="dni" placeholder="DNI"> <div class="help-tip"><p>Formato ejemplo: 99999999L</p></div> <input type="text" id="telephone" name="telephone" placeholder="Tel&eacute;fono"> <div class="help-tip"><p>Formato ejemplo: 887889781</p></div> <input type="mail" id="mail" name="mail" placeholder="Correo electr&oacute;nico"> <div class="help-tip"><p>Formato: nombre@dominio.com</p></div> <input type="password" id="pass" name="pwd1" placeholder="Contrase&ntilde;a"> <div class="help-tip"><p>Mínimo 6 caracteres. Debe contener al menos una letra mayúscula y un número.</p></div> <input type="password" id="pass" name="pwd2" placeholder="Confirmar contrase&ntilde;a"> <p id="questions">¿Cuáles fueron sus estudios anteriores?<br> <select name="studieslist" form="form"> <option value="bach">Bachillerato</option> <option value="ciclo">Ciclo Superior</option> <option value="extra">Estudios en el extranjero</option> </select> <p id="questions">¿Desea recibir comunicaciones por parte de la Universidad de Vigo?<br> <input type="checkbox" name="h" value="1" id="g"> SMS <br/> <input type="checkbox" name="h" value="2" id="g"> Correo electrónico <br/> <input type="checkbox" name="h" value="3" id="g"> Teléfono <br/> <input type="button" id="prueba" name="sub" value="Marcar todas" onclick="checkall(document.formulario.h)"> <input type="button" name="sub" value="Desmarcar todas" onclick="uncheckall(document.formulario.h)"> <p id="questions">¿Desea activar el servicio de "Notas al móvil"?<br> <input type="radio" name="mobilegrade" value="yes" checked="checked"> Sí<br> <input type="radio" name="mobilegrade" value="no"> No</p> <p id="questions">Escriba aquí cualquier comentario adicional que desee adjuntar con el formulario:<br> <textarea name="comment" form="form" placeholder="Comentario adicional..." rows="4" cols="50"></textarea></p> <div id="outer"> <p id="opcionesenvio">Opciones de envío</p> <p id="questions">Tipo de codificación:<br> <input type="radio" name="codification" value="urlencoded" checked="checked"> application/x-www-form-urlencoded<br> <input type="radio" name="codification" value="multipart"> multipart/form-data</p> <p id="questions">Método de envío:<br> <input type="radio" name="sendmethod" value="GET"> GET<br> <input type="radio" name="sendmethod" value="POST" checked="checked"> POST</p> <p id="questions">Enviar a:<br> <input type="radio" name="sendto" value="myphp" checked="checked"> Fichero PHP (p1.php)<br> <input type="radio" name="sendto" value="sintprofphp"> URL "/~sint0/p1.php"</p> <input type="hidden" name="navegador"/> <input type="hidden" name="hora"/> <div class="inner"><input type="submit" value="enviar"></div> <div class="inner"><input type="reset" value="limpiar"></div> </div> </form> </section> </body> </html>

Try this code

just changed in below class 

section#formulario {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -200px;
    margin-top: 250px;
    width: 400px;
    min-height: 100px;
    background-color: white;
    overflow: hidden;
    border-radius: 5px;
}

solution2
 0  2016-10-05 10:57:58

The cause is 

position: absolute;

Make it 

position: relative;

Or if position:absolute is necessary give margin-top to your form.

solution3
 0  2016-10-05 11:00:21

Here is an updated jsFiddle

Update the below line of CSS 

section#formulario {
  background-color: white;
  border-radius: 5px;
  margin: 0 auto;
  min-height: 100px;
  overflow: hidden;
  width: 400px;
}

solution4
 0 ACCPTED  2016-10-05 11:00:59

I updated your CSS code.

Get it

https://jsfiddle.net/zg4g3Lke/3/

Deleted position:absolute and added margin 0 auto to make it on the middle.

Good luck!

solution5
 0  2016-10-05 11:05:09

Your <section id="formulario"> element is absolutely positioned and with negative margins. You should let the html document follow the normal flow.

Also if you want it centered you may use margin: 0 auto; once its width is defined.

Try out this fiddle: https://jsfiddle.net/2qyufp7t/1/

solution6
 0  2016-10-05 11:10:39

Apart from the answers others have given I want to point out few things which could be improved in your code if your interested.

The position: absolute property technically pulls the element out of the HTML, so unless its necessary do not use it

  1. Try using a container for such requirements and apply position: relative to that container & move all your children items relative to the parent instead.

  2. If you are using left & right to position your element, you also need NOT use the margin-left & margin-right . You could just use margin: auto to center the element ( Note: This requires the width property )

So you're section#formulario could be as simple as 

section#formulario{
    width:400px;
    margin: auto;
    min-height: 100px;
    background-color: white;
    overflow: hidden;
    border-radius: 5px;
}

So basically in your case all you need is to remove the excess unwanted code from your section#formulario . Check here

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Html image overlaps on the phone JavaScript image banner timer HTML Rotate image “overlaps” other html elements CSS Background Image on top of image banner in HTML? Hero banner image not working css and html Html2pdf Image in cell overlaps other cells HTML and CSS: Image floated right overlaps with ul below - WHY HTML5 & CSS Header banner image and text alignment how to make banner image full width HTML & CSS Alternative image when flash banner is not available USING HTML/CSS?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM