BUenos dias, alguien podria ayudarme a hacer responsive este codigo:
Se trata de un formulario de reservas-restaurant.
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/calendario.css"> <script type="text/javascript" src="js/calendario.js"></script> <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){
$("#fecha").datepicker({
showOn: "button",
buttonImage: "css/images/18x18_icon-calendar.png",
buttonImageOnly: true,
})
})
/* Insertar este codigo en Formulario Reservas para verlo en español */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['enero','febrero','marzo','abril','mayo','junio',
'julio','agosto','septiembre','octubre','noviembre','diciembre'],
monthNamesShort: ['ene','feb','mar','abr','may','jun',
'jul','ago','sep','oct','nov','dic'],
dayNames: ['domingo','lunes','martes','miércoles','jueves','viernes','sábado'],
dayNamesShort: ['dom','lun','mar','mié','jue','vie','sáb'],
dayNamesMin: ['D','L','M','X','J','V','S'],
weekHeader: 'Sm',
dateFormat: 'dd-mm-yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['es']);
return datepicker.regional['es'];
}));
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #00C;
font-weight: normal;
}
#bg {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height:100%;
}
.textospequenos {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #333;
font-style: italic;
line-height: 10px;
}
.textos_form {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #333;
text-align: left;
line-height: 22px;
height: 20px;
}
.titulo {
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
font-weight: bold;
color: #333;
margin-left: 30px;
line-height: 20px;
}
.subtitulo {
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
color: #333;
font-weight: normal;
line-height: 15px;
margin-left: 16px;
}
#contenido {
position: relative;
width: 1024px;
height: 1000px;
z-index: 2;
margin-left: auto;
margin-right: auto;
}
#form_reservas {
position: absolute;
width: 583px;
height: 677px;
z-index: auto;
background-color: #FFFFEA;
border: thin solid #C60;
background-image: url(css/images/img-logo.jpg);
background-repeat: no-repeat;
background-position: right top;
left: 200px;
top: 100px;
}
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<body><img id="bg" src="css/images/780K__bigstock-Rustic-wooden-boards-with-a-re-66943387.jpg" /> <p class="titulo_formulario"><span class="textos_form"><span class="subtitulo">Por favor, complete el siguiente formulario para realizar su reserva
<br /> Si lo desea, tambien puede realizar su reserva por teléfono en el
<br /> +34 96 222 222. Esta reserva será efectiva cuando reciba una
<br /> llamada o e-mail de confirmación. Muchas gracias.
<br /> <form action="enviar.php" method="post" name="form1" class="textos_form" id="form1"> <strong>Nombre y Apellidos
</strong><br /> <input name="nombre" type="text" class="textos_form" id="nombre" size="30" maxlength="40" /> <strong><br /> Correo eléctronico
</strong><br /> <span id="sprytextfield1"> <input name="email" type="text" class="textos_form" id="email" size="25" /> <span class="textfieldRequiredMsg">Se necesita un valor.
</span><span class="textfieldInvalidFormatMsg">Formato no válido.
</span></span> <br /> </span></strong><span id="sprytextfield2"><strong>Teléfono
</strong><br /> <span id="sprytextfield3"> <input name="telefono" type="text" class="textos_form" id="telefono" size="20" /> <span class="textfieldRequiredMsg">Se necesita un valor.
</span><span class="textfieldInvalidFormatMsg">Formato no válido.
</span><span class="textfieldMinCharsMsg">No se cumple el mínimo de caracteres.
</span><span class="textfieldMaxCharsMsg">Se ha superado el número caracteres.
</span></span> <br />
<span class="textfieldRequiredMsg">Se necesita un valor.
</span></span><strong>Fecha
</strong> <strong>Hora
</strong>
<input name="fecha" type="text" class="textos_form" id="fecha" size="10" />
<input name="hora" type="time" class="textos_form" max="22:30:00" min="10:00:00" step="1" value="13:30:00" /> <select name="comensal" class="textos_form" id="comensal"> <span class="textospequenos"> Si usted o algunos de sus invitados tienen alguna intolerancia o alergia alimentaria, es muy importante
para nosotros saberlo con antelación. Por favor indiquelo a continuación.
</span><br />
<strong>Comentarios
</strong><br />
<input name="newletters" type="checkbox" id="newletters" value="SI" checked="checked" /> Deseo recibir newsletter.
<br /> <input name="politica" type="checkbox" id="politica" value="SI" checked="checked" /> <a href="politica reservasOK.html" target="_blank">Acepto la politica de privacidad y reservas
</a><br /> <br /> <input type="submit" name="enviar" id="enviar" value="Enviar la reserva" /> <input type="reset" name="borrar" id="borrar" value="Restablecer" /> <script type="text/javascript"> var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "email");
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "integer", {minChars:9, maxChars:9});
Muchas gracias como siempre por la ayuda