[SOLUCIONADO] Responsive html

priamo · #1 (**permalink**) 21/11/2017, 01:08

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="css/calendario.css">
<script type="text/javascript" src="js/jquery.js"></script>
<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: '&#x3C;Ant',
    nextText: 'Sig&#x3E;',
    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'];
}));
</script>
 
<style type="text/css">
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;
}
 
 
 
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
 
<body><img id="bg" src="css/images/780K__bigstock-Rustic-wooden-boards-with-a-re-66943387.jpg" />
<div id="contenido">
<div id="form_reservas">
  <p class="titulo_formulario"><span class="titulo"><strong>Formulario de Reservas</strong></span><br />
  </p>
  <p class="titulo_formulario"><span class="textos_form"><span class="subtitulo">Por favor, complete el siguiente formulario para realizar su reserva<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Si lo desea, tambien puede realizar su reserva por teléfono en el<br />
&nbsp;&nbsp;&nbsp;&nbsp; +34 96 222 222. Esta reserva será efectiva cuando reciba una<br />
&nbsp;&nbsp;&nbsp;&nbsp; llamada o e-mail de confirmación. Muchas gracias.<br />
  </span></span>  </p>
  <form action="enviar.php" method="post" name="form1" class="textos_form" id="form1">
    <label><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Nombre y Apellidos
        </strong><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input name="nombre" type="text" class="textos_form" id="nombre" size="30" maxlength="40"  />
        <br />
        <strong><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        Correo eléctronico</strong><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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 />
        <strong><span id="sprytextfield2"><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></strong><span id="sprytextfield2"><strong>Teléfono</strong><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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 />
<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="textfieldRequiredMsg">Se necesita un valor.</span></span><strong>Fecha &nbsp;</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Hora</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <strong>Nº comensales</strong><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input name="fecha" type="text" class="textos_form" id="fecha" size="10" /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input name="hora" type="time" class="textos_form" max="22:30:00" min="10:00:00" step="1" value="13:30:00" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <select name="comensal" class="textos_form" id="comensal">
        <option selected="selected">1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
      </select>
      <br />
      <br />
      <span class="textospequenos"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Si usted o algunos de sus invitados tienen alguna intolerancia o alergia alimentaria, es muy importante &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;para nosotros saberlo con antelación. Por favor indiquelo a continuación.</span><br />
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <strong>Comentarios</strong><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <textarea name="comentarios" id="comentarios" cols="25" rows="3"></textarea>
      <br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input name="newletters" type="checkbox" id="newletters" value="SI" checked="checked" />
Deseo recibir newsletter.<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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 /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" name="enviar" id="enviar" value="Enviar  la reserva" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" name="borrar" id="borrar" value="Restablecer" />
<br />
    </label>
</form>
  <p>&nbsp;</p>
</div>
</div>
<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});
</script>
</body>
</html>

Muchas gracias como siempre por la ayuda

ArturoGallegos · #2 (**permalink**) 21/11/2017, 09:22

que te parece si nos das mas detalles, como por ejemplo que parte te da problemas?

vamos que coger el código y hacértelo responsivo va mas como una oferta de trabajo con remuneración $$$

aquí solo te podemos asesorar y para eso debes hacer preguntas concretas,

igual si tu intención es pagar por el trabajo intenta publicar o pedir que te muevan el post al area correspondiente.

priamo · #3 (**permalink**) 21/11/2017, 09:52

Entendido.