Hola tengo un problema con la pagina que estoy haciendo y es que no puedo centrar mi fondo y mi formulario.
Lo que deseo es que este centrado para cualquier resolucion que pueda tener un browser.
el tamaño de mi pagina es de 1280 x 720.
Espero su ayuda
desde ya muchas gracias
Pd. soy nuevo en estoy y estoy tratando de hacer de lamejor manera.
Les dejo el codigo.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html class="no-js">
<head>
<title>Movistar Lima 42Km</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/fuentes.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script src="js/modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
//si es copiar
var jun=0;
$(document).keydown(function(e){
if(e.keyCode==17 ){
jun++;
if(jun==2){
return false;jun=0;
}}
if(e.keyCode==67 ){
jun++;
if(jun==2){
return false;jun=0;
}}}).keyup(function(e){
if(jun>0){
jun=jun-1;
}
});
//si es pegar
var juen=0;
$(document).keydown(function(e){
if(e.keyCode==17 ){
juen++;
if(juen==2){
return false;juen=0;
}}
if(e.keyCode==86 ){
juen++;
if(juen==2){
return false;juen=0;
}}}).keyup(function(e){
if(juen>0){
juen=juen-1;
}
});
//desahabilito click derecho
//document.oncontextmenu=new Function("return false");
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Solo letras");
$('#MovistarRegistro').validate({
rules: {
NumeroCor: {required: true ,minlength: 6},
NombreCor: {required: true , lettersonly: true},
ApellidoCor: {required: true , lettersonly: true},
CelularCor: {required: true , minlength: 9}
},
messages: {
NumeroCor: {required: "Complete el campo"},
NombreCor: {required: "Complete el campo"},
ApellidoCor: {required: "Complete el campo"},
CelularCor: {required: "Complete el campo",minlength:"9 Digitos"}
}
});
});
function justNumbers(e) {
var keynum = window.event ? window.event.keyCode : e.which;
if ( keynum == 8 ) return true;
return /\d/.test(String.fromCharCode(keynum));
}
function ActivarCampoCel(){
if ((document.getElementById("mascelulares").style.display) == 'block') {
document.getElementById("mascelulares").style.display = 'none';
//cambiarTexto(dcodigo,'mostrar') ;// Texto para cuando la capa esté oculta
//limpiamos los campos
document.getElementById("Cel1").value = null;
document.getElementById("Cel2").value = null;
document.getElementById("Cel3").value = null;
document.getElementById("Cel4").value = null;
document.getElementById("Cel5").value = null;
}else{
document.getElementById("mascelulares").style.display = 'block';
//cambiarTexto(dcodigo,"ocultar"); // Texto para cuando la capa esté visible
}
}
function ActivarSub(){
if ( document.getElementById("btnaceptar").disabled) {
document.getElementById("btnaceptar").disabled = false;
//cambiarTexto(dcodigo,'mostrar') ;// Texto para cuando la capa esté oculta
}else{
document.getElementById("btnaceptar").disabled = true;
//cambiarTexto(dcodigo,"ocultar"); // Texto para cuando la capa esté visible
}
}
</script>
</head>
<body>
<div id="continer">
<div class="comentario"><label id="gratis">Servicio Gratuito</label><br />
<label>Registra tus datos para recibir los resultados de la carrera en tu celular:</label></div>
<div id="contenedorhijo">
<br />
<?php if ($status == "ok") { ?>
<p class="confirm">Registro guardado correctamente</p>
<?php } ?>
<?php if ($status == "no") { ?>
<p class="confirm">No se completo el registro, el numeros del corredor ya esta registrado.</p>
<?php } ?>
<form method="post" id="MovistarRegistro" action="RegistroMov.php">
<label for="NumeroCor">Número de corredor</label>
<input type="text" id="NumeroCor" name="NumeroCor" onkeypress="return justNumbers(event);" maxlength="6" placeholder="ejem:254876" min="6"/>
<br />
<label for="NombreCor">Nombre</label>
<input type="text" id="NombreCor" name="NombreCor" placeholder="ejem:Roberto"/>
<br />
<label for="ApellidoCor">Apellido</label>
<input type="text" id="ApellidoCor" name="ApellidoCor" placeholder="ejem:Diaz Robles"/>
<br />
<label for="CelularCor">Celular</label>
<input type="text" id="CelularCor" name="CelularCor" onkeypress="return justNumbers(event);" maxlength="9" placeholder="ejem:999222111" required min="9"/>
<br />
<label class="Labelacep" for="acepto" >Deseo enviarle mi resultado a otros numeros.</label>
<input type="checkbox" id="acepto" name="acepto" onclick="ActivarCampoCel();" />
<br />
<div id="mascelulares" style="display:none;">
<label for="Cel1">Celular 01</label>
<input type="text" id="Cel1" name="Cel1" onkeypress="return justNumbers(event);" maxlength="9" placeholder="ejem:999222111" min="9"/>
<br />
<label for="Cel2">Celular 02</label>
<input type="text" id="Cel2" name="Cel2" onkeypress="return justNumbers(event);" maxlength="9" placeholder="ejem:999222111" min="9"/>
<br />
<label for="Cel3">Celular 03</label>
<input type="text" id="Cel3" name="Cel3" onkeypress="return justNumbers(event);" maxlength="9" placeholder="ejem:999222111" min="9"/>
<br />
<label for="Cel4">Celular 04</label>
<input type="text" id="Cel4" name="Cel4" onkeypress="return justNumbers(event);" maxlength="9" placeholder="ejem:999222111" min="9"/>
<br />
<label for="Cel5">Celular 05</label>
<input type="text" id="Cel5" name="Cel5" onkeypress="return justNumbers(event);" maxlength="9" placeholder="ejem:999222111" min="9"/>
<br />
</div>
<label class="LabelTermino" for="aceptermino" >He leído y acepto las condiciones del servicio</label>
<input type="checkbox" id="aceptermino" name="aceptermino" onclick="ActivarSub();" />
<br />
<label for="bts"> </label>
<button id="btnaceptar" type="submit" disabled>Registrar</button>
<button type="reset">Cancelar</button>
</form>
</div>
</div>
</body>
</html>
mi hoja de estilos.
Código:
body {
font-family:MovistarTtf, Helvetica, sans-serif;
font-size: 12px;
color:#f7f9f9;
text-decoration: none;
line-height: 16px;
}
#continer{
/*siempre poner el fondo antes del tamaño*/
background-image:url(../images/fondomovistar.jpg);
background-repeat:no-repeat;
width:1280px;
height:720px;
margin: 0 auto;
}
#contenedorhijo{
position:relative;
top:150px;
margin-left: auto;
margin-right: auto;
}
form {
line-height: 30px;
margin-left: auto;
margin-right: auto;
}
form label {
width: 160px;
float: left;
color:#f7f9f9;
}
.Labelacep{
width: 280px;
float: left;
color:#f7f9f9;
}
.LabelTermino{
width: 280px;
float: left;
color:#f7f9f9;
}
.comentario{
position:relative;
text-align:center;
color:#f7f9f9;
top:150px;}
#gratis{
position:relative;
text-align:center;
color:#434040;}
form input {
float: left;
width: 180px;
padding: 2px 4px;
color: #666;
}
.confirm {
color: #036;
font-style: italic;
}
Se que no es la mejor forma de programar pero estoy intentando.
